CODEWITHSUNDEEP
jquerytwitter-bootstrapfuelux
James R
James R

Reputation: 276

Fuelux wizard validation input

I have made a form nested inside the fuelux wizard. The bookstrap required field will not show up if the person clicks the next button. Is there any methods which can make it a requirement that the user cannot progress by clicking next until the required fields have been entered?

Here is an example of the 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>

The scripts used for the 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);
});
});

Upvotes: 6

Views: 6452

Answers (3)

Rafael Herscovici
Rafael Herscovici

Reputation: 17104

what i did:

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

If you want to disable moving both ways, then just remove the data.direction ==='next' part.

Upvotes: 2

Birkto
Birkto

Reputation: 71

If you want to validate without sending the form, you can use jquery.validate. Use the method $("#form_id").valid();, it returns true or false depending the status of the form add class "required" to the inputs in question.

$('#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
        }
    }
});

Upvotes: 7

scottplumlee
scottplumlee

Reputation: 70

Another option is wrapping each step in a form, and then on submittal the browser will not proceed until required fields have been filled out. This depends on the browser supporting the 'required' attribute in the form as part of the HTML5 spec, but you might be able to make use of this. There are some links that appear broken in this answer, but there's some starting information as well: How to bind to the submit event when HTML5 validation is used?

Upvotes: 0

Related Questions