Jquery验证在对话框中不起作用

我弹出一个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>

Ob按钮click.valid（）始终返回true

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

我做错了什么？我正在使用Jquery版本1.10.2和验证版本1.11.0， 验证是否只使用“提交”按钮

---

谢谢

如果要在表单有效时执行操作，请使用Validate的

submitHandler

选项

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

---

在这里查看它的工作情况：

我将您的代码放入一个JSFIDLE，它清楚地表明

.valid（）

工作正常。当有错误时返回

false

，当表单有效时返回

true

演示：

---

但是，只要在单击有效表单的按钮后想要执行某项操作，就应该使用

submitHandler

回调函数。当表单无效时，使用

invalidHandler

回调来执行某些操作。对于按钮未被识别为

提交

按钮的特殊情况，或用于通过编程触发/检查有效性，请在

单击

处理程序中使用

.valid（）

方法

$(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
        }
    });

});

演示：

---

链接插件请使用return false；不返回。这是我用于插件的@当我评估时，Bhadra.valid总是返回true。我刚刚注意到一件事，当我在html中输入required=“required”时，.valid（）起作用了！将HTML验证属性

required=“required”

放入代码中应该完全无效，因为您已经在

.validate（）

方法中正确声明了

required

规则。我不知道您是如何检查

.valid（）

的，但在这里它对我来说很好：

$(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
        }
    });

});