CODEWITHSUNDEEP
asp.net-mvc
Chad
Chad

Reputation: 24699

MVC Validation model attributes: Client side validation not occurring, only server side

I have jQuery.Validation 1.15.0 installed in an ASP.NET MVC 5.2 project and I am trying to learn the basics of MVC and, at the moment, validating model data.

I was under the impression that the Validation Attributes that I add would generate client side validations and that a post back would not occur until all client validations were passed. However, though the validations are generally working, a post back occurs every time, even when, for example, a value for VendorId is not provided.

public class StateAssessmentViewModel
{                
    [Required(ErrorMessage = "Vendor ID is required")]   
    [MaxLength(4, ErrorMessage="{0} can not be longer than {1} characters." )]      
    [Display(Name = "Vendor ID")]
    public int VendorId { get; set; }

    [Display(Name = "Effective Date")]
    [DisplayFormat(DataFormatString = "{0:MM-dd-yyyy}", ApplyFormatInEditMode = true)]
    public DateTime EffectiveDate { get; set; }
}

This site confirms that the validations should be first performed on the client if Javascript were enabled in the browser, Chrome v49, and it is. In fact, the "Effective Date" field has a working jQuery calendar on it, so Javascript is definitely enabled.

What can I look for to help me identify why the validations are not being performed at all on the client?

Here is the produced html when I view source:

<div class="form-group">
            <label class="control-label col-md-2" for="VendorId">Vendor ID</label>
            <div class="col-md-10">
                <input class="input-validation-error form-control text-box single-line" data-val="true" data-val-maxlength="Vendor ID can not be longer than 4 characters." data-val-maxlength-max="4" data-val-number="The field Vendor ID must be a number." data-val-required="Vendor ID is required" id="VendorId" max="4" min="0" name="VendorId" type="number" value="3333a" />
                <span class="field-validation-error text-danger" data-valmsg-for="VendorId" data-valmsg-replace="true">The value &#39;3333a&#39; is not valid for Vendor ID.</span>
            </div>
        </div>

I'm using Bootstrap, too, and trying to filter out non numeric keystrokes for the VendorId field, but this has no effect. I also tried playing around setting max and min lengths.

I also was expecting the DisplayFormat attribute on the EffectiveDate model property to have some client side effect. It did not. Here's the generated HTML from doing a the "View Source"

<div class="form-group">
    <label class="control-label col-md-2" for="EffectiveDate">Effective Date</label>
    <div class="col-md-10">
        <input class="input-validation-error form-control text-box single-line" data-val="true" data-val-date="The field Effective Date must be a date." data-val-required="The Effective Date field is required." id="txtEffectiveDate" name="EffectiveDate" type="datetime" value="" />
        <span class="field-validation-error text-danger" data-valmsg-for="EffectiveDate" data-valmsg-replace="true">The Effective Date field is required.</span>
    </div>
</div>

Why is client side validation not occurring?

Upvotes: 2

Views: 386

Answers (1)

mituw16
mituw16

Reputation: 5260

Are you including the jquery validation library in your BungleConfig.cs class ? If so, are you including that script bundle in your layout file? It should be working given the HTML that it's producing

Upvotes: 4

Related Questions