Fuelux wizard validation input

Question

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);
});
});

score 7 · Answer 1 · edited Sep 06 '13 at 17:47

7

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
        }
    }
});

edited Sep 06 '13 at 17:47

nhahtdh

55,989
15
126
162

answered Aug 07 '13 at 19:11

Birkto

71
4

http://bootply.com/72771 This is an example of my problem. The user should not be able to pass the next button until a value is entered in the input field. – James R Aug 08 '13 at 07:39

score 2 · Answer 2 · edited Aug 11 '14 at 15:39

2

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.

edited Aug 11 '14 at 15:39

Rethic

1,054
4
21
36

answered Oct 18 '13 at 15:23

Rafael Herscovici

16,558
19
65
93

How did you get the #stepId? struggling with this – Masinde Muliro Feb 20 '14 at 02:15
'#stepId' is the 'id' of the step you want to skip. – Rafael Herscovici Feb 22 '14 at 09:55

score 0 · Answer 3 · edited May 23 '17 at 10:26

0

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?

edited May 23 '17 at 10:26

Community

1
1

answered Aug 08 '13 at 01:11

scottplumlee

70
6

The problem is the form is divided into several sections so if the user is on chevron #3, they cannot see the required field on chevron #1. What would be best if they could not click the "next" button until the required fields have been filled out. – James R Aug 08 '13 at 07:35
In both this case and the answer above, what you'll need to do is apply a 'disabled' attribute to the buttons. Then you'll to trigger some event when you pass validation, and you'll also need an event handler that listens for that event and removes the disabled attribute. So there's not a single method that will do this, but it isn't that much code to write to do so. Using the example given by Birkto above, you'd put code to remove the disabled attribute where he has ````// allow change```` – scottplumlee Aug 16 '13 at 17:53

Fuelux wizard validation input

3 Answers3