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，具体取决于表单添加类的状态＆＃34; required＆＃34;对有问题的投入。

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

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

Fuelux向导验证输入

3 个答案: