6

我制作了一个嵌套在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);
});
});
4

3 回答 3

7

如果您想在不发送表单的情况下进行验证，可以使用 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
        }
    }
});
于 2013-08-07T19:11:46.870 回答
2

我做了什么：

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

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

于 2013-10-18T15:23:48.857 回答
0

另一种选择是将每个步骤包装在一个表单中，然后在提交时浏览器将不会继续，直到填写了必填字段。这取决于浏览器支持表单中的“必需”属性作为 HTML5 规范的一部分，但您也许可以使用它。此答案中出现了一些损坏的链接，但也有一些起始信息：使用 HTML5 验证时如何绑定到提交事件？

于 2013-08-08T01:11:47.133 回答