Question

我正在弹出一个JQuery对话框，里面有一个表单。

<div class="addcalevent">
    <form name="caleventform" id="caleventform" method="get" action="" accept-charset="utf-8">
        <div>
            <label>Title</label>
            <input type="text" id="txtcaltitle" name="title"  />
        </div>
       <button id="savecalevent"  >save</button>
</form>
</div>

当我弹出对话框时，我正在初始化Jquery验证插件。

    $(".addcalevent").dialog(
    {
        height: 300,
        width: 546
    }
    );
 $('#caleventform').validate({
        rules: {
            title: {
                required: true,
            }
        },
        messages: {
            title: {
                required: "pls enter user name"
            }
        }
    });

单击Ob按钮.valid（）始终返回true。

$('.addcalevent').on('click', "#savecalevent", function (event) {
    if (!$('#caleventform').valid()) {
        return;
    }
});

我做错了什么？我使用的是Jquery版本1.10.2和验证版本1.11.0，验证是否仅适用于“提交”按钮？

谢谢！

Answer 1

我将您的代码放入jsFiddle中，它清楚地表明.valid()正常工作。如果有错误，它会返回false，而当表单有效时会返回true。

DEMO：http://jsfiddle.net/g65g6/

但是，在单击有效表单的按钮后，只要您想要执行某些操作，就应该使用submitHandler回调函数。当表单无效时，使用invalidHandler回调执行某些操作。在.valid()处理程序中使用click方法，用于无法将按钮识别为submit按钮的特殊情况，或用于以编程方式触发/检查有效性。

$(document).ready(function () {

    $(".addcalevent").dialog({
        height: 300,
        width: 546
    });

    $('#caleventform').validate({
        rules: {
            title: {
                required: true,
            }
        },
        messages: {
            title: {
                required: "pls enter user name"
            }
        },
        submitHandler: function(form) { // optional callback
            // fires on button click when form is valid
            // do any ajax here
            return false;
        },
        invalidHandler: function() { // optional callback
            // fires on button click when form is not valid
        }
    });

});

DEMO：http://jsfiddle.net/g65g6/1/

Documentation for all callback functions and options。

Answer 2

如果您想在表单有效时执行操作，请使用Validate的submitHandler选项。

$("#caleventform").validate({
    rules: {
        title: {
            required: true
        }
    },
    submitHandler: function () {
        console.log('successful submit');
        $('.addcalevent').dialog('close');
        return false;
    }
});

在此处查看：http://jsfiddle.net/ryleyb/N5kjc/

Jquery验证在Dialog中无效

2 个答案: