我該如何獲得jQuery驗證以生成與服務器端ASP .NET MVC驗證相同的標記？

我正在開發使用ASP .NET MVC 1.0和jQuery（包括validation plugin）的Web應用程序。服務器端的標記爲一個典型的「編輯實體」觀點如下我該如何獲得jQuery驗證以生成與服務器端ASP .NET MVC驗證相同的標記？

<label for="FirstName">FirstName:</label> 
<%= Html.TextBox("FirstName", Model.FirstName) %> 
<%= Html.ValidationMessage("FirstName") %>

當無效數據發佈到名字字段，生成的HTML是

<label for="FirstName">FirstName:</label> 
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text"> 
<span class="field-validation-error">Please enter the first name.</span>

而這正是你會希望從ASP .NET MVC開箱即用。

我現在將客戶端驗證與jQuery，並且希望它以完全相同的方式行事 - 即輸入控制進行一類輸入驗證錯誤和一個跨度中加入一類的字段驗證錯誤，用於顯示錯誤消息。

我幾乎沒有，但並不完全。使用errorElement選項可使驗證程序爲錯誤消息創建一個範圍，而不是標籤。使用errorClass選項意味着input元素被賦予一個input-validation-error類。

我得到的問題是，錯誤消息跨度也得到一類輸入驗證錯誤，我希望它有字段驗證錯誤。

我試過使用突出顯示和unighighlight函數來糾正這個問題，但只要我開始弄亂span上的類，驗證本身就停止工作，只是將表單發佈到服務器。

任何人在那裏有什麼想法，我怎麼能解決這個問題？謝謝。

來源

2010-03-05 gilles27

看起來像我有通過用施加到輸入和出錯元素類擺弄引起的問題。該插件會查找具有該類的元素以顯示或隱藏錯誤消息，並計算有多少無效元素。

爲了避免這些問題，我停止使用Darin答案中顯示的errorClass：'input-validation-error'行，並將其作爲默認值。在errorPlacement函數中，我將正確的類附加到錯誤和輸入元素，以及將消息插入DOM中的正確位置。這一切似乎現在工作。的JavaScript是如下

$('form').validate({ 
errorElement: 'span', 
errorPlacement: function(error, element) { 
    error.insertAfter(element); 
    error.addClass('field-validation-error'); 
    element.addClass('input-validation-error'); 
},   
rules: { 
    FirstName: { 
     required: true 
    } 
}, 
messages: { 
    FirstName: { 
     required: 'Please enter the first name.'  
    } 
}

}）;

感謝達林他的輸入，因爲它指出了我在正確的方向。此

來源

2010-03-06 16:03:47 gilles27

當處理一個稍微不同的例子時，我也遇到了一個問題，即刪除了field-validation-error類。我通過將label的部分行621從label.removeClass（）更改爲label.removeClass（this.settings.errorClass）來修復它。我正在使用插件的1.6版，未縮小。 – gilles27 2010-03-09 10:11:31

結帳的errorPlacement回調：

$('form').validate({ 
    errorClass: 'input-validation-error', 
    errorElement: 'span', 
    errorPlacement: function(error, element) { 
     // Insert and manipulate the span element here: 
     error.insertAfter(element) 
      .removeClass('input-validation-error') 
      .addClass('field-validation-error'); 
    },   
    rules: { 
     FirstName: { 
      required: true 
     } 
    }, 
    messages: { 
     FirstName: { 
      required: 'Please enter the first name.'  
     } 
    } 
});

來源

2010-03-05 18:34:58

謝謝，它指出我在正確的方向。 – gilles27 2010-03-06 16:04:26

我該如何獲得jQuery驗證以生成與服務器端ASP .NET MVC驗證相同的標記？

回答

相關問題