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

我做了什么：

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

如果您想禁用双向移动，只需删除 data.direction ==='next' 部分。

Answer 2

如果您想在不发送表单的情况下进行验证，可以使用 jquery.validate。使用方法$("#form_id").valid();，它根据表单的状态返回真或假，将类“必需”添加到有问题的输入中。

$('#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 3

另一种选择是将每个步骤包装在一个表单中，然后在提交时浏览器将不会继续，直到填写了必填字段。这取决于浏览器支持表单中的“必需”属性作为 HTML5 规范的一部分，但您也许可以使用它。此答案中有一些链接出现问题，但也有一些起始信息：How to bind to the submit event when HTML5 validation is used?