Fuelux向导验证输入

Question

我已经将一个表单嵌套在fuelux向导中.如果用户单击下一个按钮,则不会显示bookstrap必填字段.是否有任何方法可以要求用户无法通过单击下一步进行直到输入所需的字段？

这是输入的一个例子

  <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>

用于下一个和上一个按钮的脚本

$(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

如果要在不发送表单的情况下进行验证,可以使用jquery.validate.使用该方法$("#form_id").valid();,它返回true或false,具体取决于表单的状态将"class"添加到相关输入中.

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