javascript - jQuery validation on dropdown and form repeater -
i've got form wizard form repeater , need validate dropdown before accessing next step. i've tried different solutions , managed validation on first form doesn't work repeated form.
javascript code
if ($("body").data("title") === "admin_new_user") { var formwizard = function () { return { //main function initiate module init: function () { if (!jquery().bootstrapwizard) { return; } var form = $('#submit_form'); var error = $('.alert-danger', form); var success = $('.alert-success', form); // regex pe rla validazione del campo email $.validator.methods.email = function( value, element ) { return this.optional( element ) || /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/.test( value ); }; // regex la validazione del campo codice fiscale $.validator.methods.fiscalcode = function( value, element ) { return this.optional( element ) || /^(?:[b-df-hj-np-tv-z](?:[aeiou]{2}|[aeiou]x)|[aeiou]{2}x|[b-df-hj-np-tv-z]{2}[a-z]){2}[\dlmnp-v]{2}(?:[a-ehlmpr-t](?:[04lq][1-9mnp-v]|[1256lmrs][\dlmnp-v])|[dhps][37pt][0l]|[acelmrt][37pt][01lm])(?:[a-mz][1-9mnp-v][\dlmnp-v]{2}|[a-m][0l](?:[\dlmnp-v][1-9mnp-v]|[1-9mnp-v][0l]))[a-z]$/i.test( value ); }; // regex la validazione del campo numero carta d'identità e passaporto $.validator.methods.idcard = function( value, element ) { return this.optional( element ) || /^[a-z]{2}[0-9]{7}$/i.test( value ); }; // regex la validazione del campo sito web $.validator.methods.web = function( value, element ) { return this.optional( element ) || /^((ftp|http|https):\/\/)?([a-za-z0-9]+(\.[a-za-z0-9]+)+.*)$/i.test( value ); }; //start repeating form group add limit var maxgroup = 5; //add more fields group $(".addmore").click(function(){ if($('body').find('.fieldgroup').length < maxgroup){ var fieldhtml = '<div class="form-group fieldgroup">'+$(".fieldgroupcopy").html()+'</div>'; $('body').find('.fieldgroup:last').after(fieldhtml); }else{ alert('hai raggiunto il massimo numero di immobili registrabili di '+maxgroup+''); } }); //remove fields group $("body").on("click",".remove",function(){ $(this).parents(".fieldgroup").remove(); }); // end repeating form form.validate({ donothidemessage: true, //this option enables show error/success messages on tab switch. errorelement: 'span', //default input error message container errorclass: 'help-block help-block-error', // default input error message class focusinvalid: false, // not focus last invalid input rules: { userfirst: { required: true }, userlast: { required: true }, useremail: { remote: "../controllers/ctrl_admin_user_app/check_email_validation.php", required: true, email: true, async: false }, userweb: { required: false, web: true }, userhometel: { required: false, number: true }, usermobiletel: { required: false, number: true }, userfiscalcode: { required: true, fiscalcode: true }, docnum: { required: { depends: function () { return $('#doctypo').val() == "idcard" || $('#doctypo').val() == "passport"; } }, idcard: true }, doctypo: { required: { depends: function () { return $('#docnum').val() != ''; } } }, docexp: { required: false, dateita : true }, userbirth: { required: false, dateita : true }, username: { required: true, remote: "../controllers/ctrl_admin_user_app/check_user_validation.php", async: false }, userrole: { required: true } }, // mostro messaggi di errore personalizzati messages: { userfirst: "ops, il campo nome cliente è richiesto", userlast: "ops, il campo cognome cliente è richiesto", useremail: { required: "ops, il campo email cliente è richiesto", email: "ops, il formato dell'email non è corretto", remote: "ops, questo indirizzo email esiste già, per favore scegline un altro!" }, userweb: { web: "ops, il formato del sito web non è corretto" }, userhometel: { number: "ops, il formato del numero non è corretto!" }, usermobiletel: { number: "ops, il formato del numero non è corretto!" }, userfiscalcode: { required: "ops, il campo codice fiscale è richiesto", fiscalcode: "ops, il formato codice fiscale non è corretto" }, docnum: { required: "ops, non ha secificato il numero di documento", idcard: "ops il numero del documento non è un formato valido" }, doctypo:{ required: "ops, seleziona tipologia documento", }, docexp: { dateita : "ops, il formato data deve essere nel formato giorno/mese/anno" }, userbirth: { dateita : "ops, il formato data deve essere nel formato giorno/mese/anno" }, username: { required: "ops, devi inserire un nome utente per il cliente!", remote: "ops, questo nome utente già esiste, per favore scegline un altro!" }, userrole: { required: "ops, il campo ruolo cliente è richiesto!" } }, errorplacement: function (error, element) { // render error placement each input type error.insertafter(element); // other inputs, perform default behavior }, invalidhandler: function (event, validator) { //display error alert on form submit success.hide(); error.show(); app.scrollto(error, -200); }, highlight: function (element) { // hightlight error inputs $(element) .closest('.form-group').removeclass('has-success').addclass('has-error'); // set error class control group }, unhighlight: function (element) { // revert change done hightlight $(element) .closest('.form-group').removeclass('has-error'); // set error class control group }, // success: function (label) { // label // .addclass('valid') // mark current input valid , display ok icon // .closest('.form-group').removeclass('has-error').addclass('has-success'); // set success class control group // }, submithandler: function (form) { //add here ajax code submit form $.ajax({ url: form.action, type: form.method, data: $(form).serialize(), // se tutto va buon fine mostro un messaggio di successo utilizzando sweetalert success: function(response) { swal({ title: response.title, text: response.message, type: response.status }, function(){ location.reload(); } ); }, error: function(jqxhr, exception) { if (jqxhr.status === 0) { swal('il server non risponde', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else if (jqxhr.status == 404) { swal('errore 404', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else if (jqxhr.status == 500) { swal('errore 500', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else if (exception === 'parsererror') { swal('si è verificato un errore!', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else if (exception === 'timeout') { swal('time out', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else if (exception === 'abort') { swal('richiesta annullata', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } else { swal('errore non previsto', 'siamo spiacenti non è stato possibile eseguire questa operazione, per favore contatta l\'amministratore di sistema.', 'info'); } } }); } }); var handletitle = function(tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1; // set wizard title // $('.step-title', $('#form_wizard_1')).text('step ' + (index + 1) + ' of ' + total); // set done steps jquery('li', $('#form_wizard_1')).removeclass("done"); var li_list = navigation.find('li'); (var = 0; < index; i++) { jquery(li_list[i]).addclass("done"); } if (current == 1) { $('#form_wizard_1').find('.button-previous').hide(); } else { $('#form_wizard_1').find('.button-previous').show(); } if (current >= total) { $('#form_wizard_1').find('.button-next').hide(); $('#form_wizard_1').find('.button-submit').show(); } app.scrollto($('.page-title')); } // default form wizard $('#form_wizard_1').bootstrapwizard({ 'nextselector': '.button-next', 'previousselector': '.button-previous', ontabclick: function (tab, navigation, index, clickedindex) { return false; success.hide(); error.hide(); if (form.valid() == false) { return false; } handletitle(tab, navigation, clickedindex); }, onnext: function (tab, navigation, index) { success.hide(); error.hide(); if (form.valid() == false) { return false; } // validation on dropdown $("#usergruppo").each(function () { $(this).rules('add', { required: true }); }); handletitle(tab, navigation, index); }, onprevious: function (tab, navigation, index) { success.hide(); error.hide(); handletitle(tab, navigation, index); }, ontabshow: function (tab, navigation, index) { var total = navigation.find('li').length; var current = index + 1; var $percent = (current / total) * 100; $('#form_wizard_1').find('.progress-bar').css({ width: $percent + '%' }); } }); $('#form_wizard_1').find('.button-previous').hide(); $('#form_wizard_1 .button-submit').click(function () { if (form.valid() == false) { return false; } }).hide(); //apply validation on select2 dropdown value change, needed chosen dropdown integration. $('#userrole', form).change(function () { form.validate().element($(this)); //revalidate chosen dropdown value , show error or success message input }); } }; }(); jquery(document).ready(function() { formwizard.init(); }); }
Comments
Post a Comment