Question

I am using jquery validation plugin for clientside validation of a form.

I have a field StandardPrice which is required and needs to be a number. The validation code below works perfect.

I have another field in a form called MinPrice that is optional but I do want to validate that if a user puts something in there that it is a number. I thought by removing the required: true but still having the number: true it would support this but it seems like its not allowing me to leave this field blank (even though I don’t have required: true set)

Does jquery validation plugin support validating a field IF its populated but leaving it alone if its blank.

Here is my code:

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

Here is a screenshot of the validation when the field is empty:

and here is my html output (my actual code is using a lot of HTML.helpers() and 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 should work as you expect as seen in this live demo.

• leave the field blank => the form submits
• enter a valid number in the field => the form submits
• enter an invalid number => an error message is shown and the form doesn’t submit

After showing your markup it seems that you have some inconsistency between your field names and your jQuery validate names. For example your input is named Product.StandardPrice, not StandardPrice which is what you are using in your jQuery.validate. So none of your validate rules actually will apply as it doesn’t have any corresponding form element. So fix it:

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

Also notice that it should be Product.MiniPrice and not Product.MinPrice. Please be consistent.

Remark: looking at your markup it is pretty clear that this is generated by ASP.NET MVC 3 HTML helpers. Why are you using custom jQuery.validate rules instead of the default unobtrusive ones?