плагин проверки jquery, как я могу проверить поле, но оно не требуется

Question

Я использую плагин проверки jquery для проверки формы на стороне клиента.

У меня есть поле StandardPrice, которое является обязательным и должно быть числом.Приведенный ниже код проверки работает отлично.

У меня есть другое поле в форме с именем MinPrice, которое является необязательным, но я хочу подтвердить, что если пользователь вводит что-то туда, то это число.Я подумал, удалив required: true , но все еще имея номер : true , это бы поддержало это, но кажется, что оно не позволяет мне оставить это поле пустым (даже если я не обязательный: true set)

Поддерживает ли плагин проверки jquery проверку поля, если оно заполнено, но оставляет его в покое, если оно пустое.

Вот мой код:

 $("#productForm").validate({
     rules: {
         StandardPrice: {
             required: true,
             number: true
         },
         MinPrice: {
             number: true
         }
     }
 });

Вот скриншот проверки, когда поле пусто:

и вот мой вывод html (мой реальный код использует многоHTML.helpers () и Html.ValidationMessageFor ()

 <form action="/Product/EditProduct" id="productForm" method="post">    <fieldset>
    <legend>Product</legend>

    <div class="editor-label">
        <label for="Product_Name">Name</label>
    </div>

    <div class="editor-field">
        <input class="required" id="Product_Name" name="Product.Name" style="width:450px;" type="text" value="Linzer Tart" />
        <span class="field-validation-valid" data-valmsg-for="Product.Name" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">

        <label for="Product_StandardPrice">StandardPrice</label>
    </div>
    <div class="editor-field">
        <input data-val="true" data-val-number="The field StandardPrice must be a number." data-val-required="The StandardPrice field is required." id="Product_StandardPrice" name="Product.StandardPrice" style="width:45px;text-align:right;" type="text" value="1.50" />
        <span class="field-validation-valid" data-valmsg-for="Product.StandardPrice" data-valmsg-replace="true"></span>
    </div>

    <div class="editor-label">
        <label for="Product_MiniPrice">MiniPrice</label>

    </div>
    <div class="editor-field">
        <input data-val="true" data-val-number="The field MiniPrice must be a number." data-val-required="The MiniPrice field is required." id="Product_MiniPrice" name="Product.MiniPrice" style="width:45px;text-align:right;" type="text" value="0.00" />
        <span class="field-validation-valid" data-valmsg-for="Product.MiniPrice" data-valmsg-replace="true"></span>
    </div>

    <input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Product_Id" name="Product.Id" type="hidden" value="102" />

    <p>
        <input type="submit" value="Save" />

    </p>
</fieldset>

Answer 1

number: true должно работать так, как вы ожидаете, как видно из этой живой демонстрации .

• оставьте поле пустым => форма отправляется
• введите действительное число в поле => отправляемая форма
• введите неверный номер => отображается сообщение об ошибке, а форма не отправляется

После показа вашей разметки кажется, что у вас есть некоторое несоответствие между именами ваших полей и именами проверки JQuery. Например, ваш ввод называется Product.StandardPrice, а не StandardPrice, который вы используете в своем jQuery.validate. Так что ни одно из ваших правил проверки на самом деле не будет применяться, так как оно не имеет соответствующего элемента формы. Так что исправьте это:

$("#productForm").validate({
     rules: {
         'Product.StandardPrice': {
             required: true,
             number: true
         },
         'Product.MiniPrice': {
             number: true
         }
     }
});

Также обратите внимание, что это должно быть Product.MiniPrice, а не Product.MinPrice. Пожалуйста, будьте последовательны.

Примечание: по вашей разметке становится ясно, что она генерируется HTML-помощниками ASP.NET MVC 3. Почему вы используете пользовательские правила jQuery.validate вместо ненавязчивых по умолчанию?

Answer 2

Пожалуйста, укажите ваш HTML. Это прекрасно работает для меня:

<input id="StandardPrice" name="StandardPrice" type="textbox" />
<input id="MinPrice" name="MinPrice" type="textbox" />

$("#productForm").validate({
 rules: {
     StandardPrice: {
         required: true,
         number: true
     },
     MinPrice: {
         number: true
     }
 }

});