Question

我有一个包含4个标签的表单，我希望能够在用户点击任何其他标签时切换到新标签之前验证当前标签。这就是我到目前为止所做的：

$("#tabs").tabs({
            beforeActivate: function(event, ui) {

                var tab = ui.oldTab.index();
                var valid = true;

                if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {

                    valid = false;
                };


                if (!valid) {
                    //alert('not valid');

                    event.preventDefault();
                }
                else {
                    alert('valid');
                }
            }
        });

如果没有填写某些字段，上述功能可以防止用户选择其他选项卡。我还有如下验证功能设置：

$("#form1").validate({

            rules: {

                txbYPSchool: { required: true, nowhitespace: true },
                txbYPSubjectDesc: { required: true, nowhitespace: true }

            },

            messages: {

                txbYPSchool: "*This field is mandatory. If not in school, type 'Not in School'",  
                txbYPSubjectDesc: "*This field is mandatory"

            },

            ignore: ""
        });

当用户在当前标签上仍有不完整的字段时尝试更改标签时，如何运行验证并显示错误消息？我希望能够在没有按钮单击的情况下执行此操作，并且仅当用户尝试更改选项卡但我不知道如何将验证功能合并到第一个函数中时。

使用jquery 1.9.1和最新的验证插件。

由于

Answer 1

您可以使用插件的.valid() method。

替换此......

if (!valid) {

有了......

if !($("#form1").valid()) {

然后由于插件正在检查有效性，你可以摆脱所有这些......

var valid = true;
if (tab == 0 && ($('#txbYPSchool').val() == "" || $('#txbYPSubjectDesc').val() == "")) {
   valid = false;
};

更改选项卡而不提交时，jquery验证

1 个答案: