Entering Fuelux Wizard Confirmation

Question

I created a form embedded in the master drive. The required log field is not displayed if the user clicks the next button. Are there any methods that might require the user to not work by clicking then until the required fields are entered?

Below is an example of input

<tr> <td>3</td> <td><label class="control-label" for="inputCompanyCountry">Country <span style="color:red">*</span></label></td> <td><div class="controls controls-extra"><input type="text" id="inputCompanyCountry" name="inputCompanyCountry" value=""required></div></td> <td><div class="help-inline">Country of residence</div></td> </tr> 

Scripts used for next and previous buttons

 $(function() { $('#MyWizard').on('change', function(e, data) { console.log('change'); if(data.step===3 && data.direction==='next') { // return e.preventDefault(); } }); $('#MyWizard').on('changed', function(e, data) { console.log('changed'); }); /*$('#MyWizard').on('finished', function(e, data) { console.log('finished'); });*/ $('#btnWizardPrev').on('click', function() { $('#MyWizard').wizard('previous'); }); $('#btnWizardNext').on('click', function() { $('#MyWizard').wizard('next','foo'); }); $('#btnWizardStep').on('click', function() { var item = $('#MyWizard').wizard('selectedItem'); console.log(item.step); }); }); 

Answer 1

If you want to check without submitting the form, you can use jquery.validate. Use the $("#form_id").valid(); method $("#form_id").valid(); , it returns true or false depending on the status of the form. Add the "required" class to the corresponding inputs.

 $('#MyWizard').on('change', function(e, data) { console.log('change'); if(data.step===3 && data.direction==='next') { if($("#form_id").valid()){ // allow change }else{ // cancel change } } }); 

Answer 2

What I've done:

 $('#MyWizard').on('change', function(e, data) { var isValid = $('#stepId [required]').valid(); if (data.direction === 'next' && !isValid) { e.preventDefault(); } }); 

If you want to disable movement in both directions, just delete the data.direction ==='next' .

Answer 3

Another option is to transfer each step to the form, and then when sending the browser will not work until the required fields are filled. It depends on the browser that supports the “required” attribute on the form as part of the HTML5 specification, but you can use this. There are some links in this answer that appear in this answer, but there is also some background information: How to link to the send event when HTML5 validation is used?