MVC3 Проверка на стороне клиента неустойчивая/непоследовательная

Question

Проверка на стороне сервера работает отлично, но клиентская часть не будет работать в некоторых областях.

Использование:

"jquery-1.5.1.min.js" 
"modernizr-1.7.min.js" 
"jquery.validate.min.js" 
"jquery.validate.unobtrusive.min.js". 

HTML5 семантическая разметка

MVC3, Razor, Code First

Класс данных аннотаций:

using System.ComponentModel.DataAnnotations; 

[Required, MaxLength(30, ErrorMessage = "First Name must be {1} characters or less")] 
public string FirstName { get; set; } 

[Range(20, 50, ErrorMessage = "{0} must be between {1} and {2}")] 
public double Waist { get; set; } 

Вид:

вид строго типизирован.

@using (Html.BeginForm()) { @Html.ValidationSummary(true) 

    <span class="editor-label"> First Name </span> 

    <span class="editor-field"> 

    @Html.EditorFor(model => model.FirstName) 

    @Html.ValidationMessageFor(model => model.FirstName) 

    </span><br /><br /> 

    <span class="editor-label">@Html.LabelFor(model => model.Waist): 20 to 50</span> 

    <span class="editor-field"> 

    @Html.EditorFor(model => model.Waist) 

    @Html.ValidationMessageFor(model => model.Waist) 

    </span><br /><br /> 

Проверка на стороне клиента работает для талии, но не для FirstName. Серверная сторона работает для обоих.

Когда я смотрю на исходный код Талия имеет диапазон данных-val.

данные Val-диапазон = "талия должен быть между 20 и 50"

Там нет данных Val-диапазона для FirstName.

Любая помощь очень ценится.

Спасибо,

Джо

Я использую IE9 64 бит.

По дополнительному запросу Требуется и длина строки частично работают. Я изменил атрибуты Dataannotation на это.

[Required(ErrorMessage = "First Name is required")]  [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")]  public string FirstName { get; set; } 

Теперь, когда я перехожу к своему редактированию и очищаю текстовое поле FirstName и вкладку к следующему, я не получаю ошибки проверки. Если я затем введу один символ, я получаю сообщение StringLength, когда я впоследствии очищу поле, затем получаю сообщение Required. Подходите ближе, но он все еще работает неправильно.

данных Вэл длина = добавляется к источнику, когда я использую StringLength

Answer 1

MaxLength и MinLength не работает с проверкой на стороне клиента. Вы можете использовать StringLength вместо:

[Required] 
[StringLength(30, ErrorMessage = "First Name must be {1} characters or less")] 
public string FirstName { get; set; } 

И есть MinimumLength свойство, которое можно установить, если вы хотите, чтобы имитировать MinLength атрибут:

[Required] 
[StringLength(30, MinimumLength = 10, ErrorMessage = "First Name must be between 10 and 30 characters")] 
public string FirstName { get; set; } 

---

UPDATE:

Кажется, что вы хотите с уверенностью активировать проверку, даже если форма не отправлена.Можно добавить следующий сценарий для достижения этой цели:

<script type="text/javascript"> 
    $(function() { 
     var settngs = $.data($('form')[0], 'validator').settings; 
     settngs.onfocusout = function (element) { $(element).valid(); }; 
    }); 
</script> 

---

UPDATE 2:

Вот полный пример. Создайте новый проект ASP.NET MVC 3 с использованием интернет-шаблона.

Модель:

public class MyViewModel 
{ 
    [Required(ErrorMessage = "First Name is required")] 
    [StringLength(30, MinimumLength = 2, ErrorMessage = "First Name must be {2} to {1} characters")] 
    public string FirstName { get; set; } 
} 

Контроллер:

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel 
     { 
      FirstName = "foo" 
     }); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

Вид:

@model MyViewModel 

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     var settngs = $.data($('form')[0], 'validator').settings; 
     settngs.onfocusout = function (element) { $(element).valid(); }; 
    }); 
</script> 

@using (Html.BeginForm()) 
{ 
    @Html.EditorFor(x => x.FirstName) 
    @Html.ValidationMessageFor(x => x.FirstName) 
    <button type="submit">OK</button> 
}