Làm thế nào để trong ASP.NET MVC ngăn chặn jquery ajax nộp nếu xác nhận thất bại

Question

Tôi đang sử dụng ASP.NET 5 MVC RC1

Các plugin validation jquery mà ASP.NET MVC của tôi sử dụng là jquery.validate.js tiêu chuẩn mà một ASP.NET mặc định 5 mẫu dự án sử dụng.

/*! 
* jQuery Validation Plugin v1.14.0 
* 
* http://jqueryvalidation.org/ 
* 
* Copyright (c) 2015 Jörn Zaefferer 
* Released under the MIT license 
*/ 

và jquery.validation.unobtrusive.js

/*! 
** Unobtrusive validation support library for jQuery and jQuery Validate 
** Copyright (C) Microsoft Corporation. All rights reserved. 
*/ 

tôi cung cấp một ví dụ lĩnh vực yêu cầu đơn giản dưới đây để chứng minh vấn đề của tôi.

ViewModel:

public class TierImportStatusUpdateViewModel 
{ 
    [Required] 
    public string String1 { get; set; } 
    [Required] 
    public string String2 { get; set; } 
    //more fields 
} 

cshtml:

@model MyViewModel 
<form action="/controller/action" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dic1" id="form1" method="post" class="allforms"> 
    @Html.LabelFor(model=>model.String1) 
    @Html.EditorFor(model=>model.String1) 
    @Html.ValidationMessageFor(model=>model.String1) 
    <br> 
    @Html.LabelFor(model=>model.String2) 
    @Html.EditorFor(model=>model.String2) 
    @Html.ValidationMessageFor(model=>model.String2) 
    <br> 
    <button type="submit" class="btn btn-primary" id="submit" name="submit">submit</button> 
</form> 

Việc xác nhận trên hoạt động chính xác. Nếu String1 không bị bắt ở dạng, phương thức POST KHÔNG được gọi và thông báo lỗi được hiển thị ở phía máy khách.

sau đó tôi sử dụng jquery sau khi tôi muốn nắm bắt tất cả các lần gửi biểu mẫu và làm một số logic thêm:

$(".allforms").submit(function (e) { 

     e.preventDefault(); 

     var self = this; 
     $.ajax({ 
      processData: false, 
      contentType: false, 
      data: new FormData(this), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (data) { 
       //other logic 
      } 
     }); 

     return (false); 
    }); 

jquery này hoạt động chức năng và gọi phương thức điều khiển của tôi khi nút được nhấp. Tuy nhiên khi String1 không bị bắt và gửi được nhấp, xác thực sẽ khởi động và hiển thị thông báo lỗi nhưng hàm jquery vẫn POSTS biểu mẫu.

Làm cách nào để ngăn chức năng jquery không gọi phương thức ajax nếu các trường xác thực hiện tại không thành công?

Tôi không cần phải thực hiện xác thực của chính mình vì thông báo xác thực đang được hiển thị trên màn hình. Tôi chỉ cần để ngăn chặn việc nộp

Điều duy nhất tôi có thể tìm thấy ở dạng của tôi là các lĩnh vực xác nhận cá nhân ví dụ như

<span class="text-danger field-validation-valid" data-valmsg-for="String1" data-valmsg-replace="true"></span> 

và hình thức duy nhất có thẻ novalidate=novalidate mà jquery.validate.js thêm vào tất cả các hình thức đó là đã bật.

Answer 1

Bạn cần phải có điều kiện thực hiện cuộc gọi ajax chỉ khi các hình thức có giá trị, có thể được thực hiện với mã javascript này:

if ($("#form1").valid()) { 
    // make the ajax call 
} 

Các tài liệu là ở đây: .valid().

Vui lòng xác minh rằng id của biểu mẫu trong trang được tạo thực sự là form1. Nếu không, có các bộ chọn thay thế mà bạn có thể sử dụng hoặc các cách để lấy id sẽ được tạo bởi mã Razor.

LƯU Ý: khi tôi đọc lại mã của bạn, tôi có thể thấy bạn đang sử dụng một trình xử lý duy nhất cho tất cả các biểu mẫu. Trong trường hợp đó, bạn phải gọi phương thức .valid() trong biểu mẫu kích hoạt sự kiện, trong đó có sẵn sàng trhough $(this). I.e, làm $(this).valid() để kiểm tra xem biểu mẫu có hợp lệ hay không.

Answer 2

Không sử dụng lần đầu e.preventDefault(); nó sẽ ngăn nút gửi gửi biểu mẫu.

Trong chức năng $(".allforms").submit của bạn đầu tiên xác nhận hình thức của bạn

như thế này var frmVlalidation = $('#formId').valid();

nếu mẫu của bạn được xác nhận đúng giá trị frmVlalidation sẽ true nếu xác nhận thất bại nó sẽ trở lại false.

bằng cách sử dụng biến số này gọi là ajax.

như thế này.

Answer 3

Cách thích hợp để sử dụng ajax với plugin này là đặt ajax vào bên trong hàm gọi lại submitHandler của plugin.

"The right place to submit a form via Ajax after it is validated."

Từ tài liệu

Ví dụ: submit form thông qua Ajax khi hợp lệ.

$(".selector").validate({ 
    submitHandler: function(form) { 
    $(form).ajaxSubmit(); 
    } 
}); 

Điều này đảm bảo rằng nếu biểu mẫu hợp lệ thì chỉ có biểu mẫu được gửi.