阻止通過手動驗證提交表單

Question

我在以下文章的幫助下使用JQuery和Unobtrusive驗證實現了一些自定義驗證邏輯：

在文本框中手動設置不打擾的驗證錯誤

為了節省您閱讀該帖子的時間，這里有一個簡單的javascript，當某些操作失敗時，它會強制顯示驗證消息：

在我的文本框.blur():

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

效果很好。

我的問題是，當顯示失敗的驗證消息時，單擊提交時，表單提交就可以了。

如何使用上面的代碼實現自定義驗證，並防止顯示消息時提交表單？ 我累了像$('#SomeFormId').valid = false;這樣的事情$('#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();
}

經過編輯以增加更多內容，這將解決您的提交/阻止問題，現在您只需添加驗證調用即可。