如何在ASP.NET MVC，以免jQuery AJAX提交如果驗證

我使用ASP.NET 5 MVC RC1如何在ASP.NET MVC，以免jQuery AJAX提交如果驗證

我的ASP.NET MVC採用的是標準的jquery.validate.js一個默認的ASP.NET jQuery的驗證插件失敗5模板項目使用。

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

和jquery.validation.unobtrusive.js

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

我在下面提供一個簡單的必填字段例子來說明我的問題。

視圖模型：

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>

上述驗證工作正常。如果String1未被捕獲，POST方法未被調用，並且錯誤消息顯示在客戶端。

然後我用下面的jquery，因爲我想捕捉所有表單提交，並做一些額外的邏輯：

$(".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功能的作品，並打電話給我的控制器方法是單擊按鈕時。但是，當String1未被捕獲並單擊提交時，驗證會啓動並顯示錯誤消息，但jquery函數仍然呈現該表單。

如何防止jquery函數在現有驗證字段失敗時不調用ajax方法？

當屏幕上顯示驗證消息時，我不需要自己進行驗證。我只是需要防止提交

我能找到我的表格的唯一事情是獨立的校驗字段，例如

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

和形式不僅具有novalidate=novalidate標籤，它的jquery.validate.js增加了各種形式的是啓用。

來源

2016-02-12 devc2

你根本沒有在你的代碼中使用該插件。 – Jai

我已經更新了我的答案，以反映爲所有表單提交使用簡單處理程序的情況下的解決方案。 – JotaBe

您需要有條件地使Ajax調用只有形式是有效的，可以用這段JavaScript代碼來完成：

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

的文檔是在這裏：.valid()。

請確認生成的頁面中表單的ID確實是form1。如果沒有，您可以使用替代選擇器，或者獲取由Razor代碼生成的ID。

注意：當我重新讀取您的代碼時，我可以看到您對所有窗體都使用了單個處理程序。在這種情況下，您必須以觸發該事件的形式調用.valid()方法，該門檻可用於$(this)。即，做$(this).valid()檢查表格是否有效。

來源

2016-02-12 12:11:35 JotaBe

首先不使用e.preventDefault();它會阻止提交按鈕提交表單。

在你$(".allforms").submit函數首先確認您的形式

這樣var frmVlalidation = $('#formId').valid();

如果表單驗證正確frmVlalidation值將是true如果驗證失敗，它將返回false。

通過使用這個變量調用ajax。

這樣子。

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

     var frmVlalidation = $('#formId').valid(); 

     if (frmVlalidation == true) 
     { 
     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); 
    });

來源

2016-02-12 12:12:19

對插件使用ajax的正確方法是將ajax放入插件的submitHandler回調函數中。

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

從技術文檔

實施例：提交通過Ajax有效的形式時。

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

這確保瞭如果表單是有效的，那麼只有表單被引用。

來源

2016-02-12 12:22:21

如何在ASP.NET MVC，以免jQuery AJAX提交如果驗證

回答

相關問題