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 />

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

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

data-val-range = "Талия должна быть между 20 и 50"

Для 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, когда я впоследствии очищаю поле, я получаю сообщение Обязательное. Подхожу ближе, но все равно не работает правильно.

data-val-length = добавляется к источнику, когда я использую 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; }

---

ОБНОВЛЕНИЕ:

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

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

---

ОБНОВЛЕНИЕ 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>
}