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

Question

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

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 事件对象

当您在 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();
}

编辑添加了更多内容，这将负责您的提交/预防，现在您只需添加您的验证调用。