Fuelux向导验证输入

Question

我已经创建了一个嵌套在fuelux向导中的表单。如果用户单击next按钮，则不会显示bookstrap required字段。是否有任何方法可以要求用户在输入必填字段之前不能通过单击下一步进行操作？

以下是输入的示例

  <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，将类"required“添加到有问题的输入中。

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

我做了什么：

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

如果要禁用双向移动，只需删除data.direction ==='next'部件即可。

Answer 3

另一种选择是将每个步骤包装在表单中，然后在提交时，浏览器将不会继续，直到填写完必填字段。这取决于支持表单中的'required‘属性的浏览器，该属性是HTML5规范的一部分，但您可以使用此属性。在这个答案中，有一些链接似乎是断开的，但也有一些起始信息：How to bind to the submit event when HTML5 validation is used?