Question

我在以下帖子的帮助下，使用JQuery和Unobtrusive验证实现了一些自定义验证逻辑：

Manually set unobtrusive validation error on a textbox

为了节省您阅读该帖子的时间，这里是一个简单的JavaScript，如果出现故障，会强制显示验证消息：

在我的文本框.blur():

上

var errorArray = {};
errorArray["Slug"] = 'Some error message for the Slug text box';
$('#SomeFormId').validate().showErrors(errorArray);

效果很好。

我的问题是显示失败的验证消息，当点击提交时，表单提交就好了。

如何使用上面的代码实现自定义验证，并防止在显示消息时提交表单？我厌倦了像$('#SomeFormId').valid = false;这样的事情，但它没有用。

谢谢。

Answer 1

使用$('#SomeFormId')将无效，因为您执行以下操作：

$('#SomeFormId').valid = false;

然后当您使用（我假设的）再次以submit形式处理它时：

var form = $('#SomeFormId');   // or $(this)
if (form.valid) {
    //
}

你实际上是在创建两个不同的对象，即使它们指的是同一个DOM元素。因此，将valid = true设置为一个将不会在第二个中更新它。

你给的代码是非常准确的，所以我假设你的验证与你的submit处理程序是分开的（因为它总是在blur），所以你可以做的是利用一些东西比如.data()或者一个标志（只是确保它在上下文中）。

// on blur
$('#SomeFormId').data('isvalid', false);    // invalid

// on submit
var isvalid = $('#SomeFormId').data('isvalid');
if (!isvalid) {
    // invalid form
    ev.preventDefault();
}

修改

jQuery Event对象

当你将一个函数绑定为jQuery中的事件处理程序时，jQuery默默地为你做的一件事是它为你“创建”一个规范化的Event对象。这将包含有关您可以在处理程序中使用的事件的信息，还允许您以某种方式控制事件的行为。

// setting a submit event on my form
//                                       |   whatever you put here 
//                                       V   is the event object.
$('#SomeFormId').on('submit', function (ev) {

    // preventing the default action
    // : in a form, this prevents the submit
    ev.preventDefault();
});

Answer 2

要检查表单是否有效，您可以使用以下内容：

var form = $("#SomeFormId");
form.submit(function(event) {
    if(form.valid() == false) event.preventDefault();
}

编辑为它添加更多内容，这将照顾您的提交/预防，现在您只需添加验证调用。

防止通过手动验证提交表单

2 个答案:

修改

jQuery Event对象