CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-4data-annotationsunobtrusive-validation
Sasu
Sasu

Reputation: 423

jQuery validation is not working with ASP .Net MVC data annotations

I am working on a ASP .Net MVC 4 web application. Here, I have tried to implement validation using jQuery's validation and unobtrusive plugins. The sample code is specified below

SignUp model

public class Signup
{

    [StringLength(256,ErrorMessage ="Name can have maximum of 256 characters.")]
    [Required]
    public string Name { get; set; }

    [Required]
    [StringLength(10, ErrorMessage = "User code should have of 10 character.", MinimumLength = 10)]
    public string UserCode { get; set; }

[StringLength(256, ErrorMessage = "Password can have maximum of 256 characters.")]
    [Required]
    public string Password { get; set; }

    [StringLength(256, ErrorMessage = "Confirm Password can have maximum of 256 characters.")]
    [Required]
    public string ConfirmPassword { get; set; }
}

Signup.cshtml

 @using (Html.BeginForm("SubmitSignUp", "Foobbox", Model, FormMethod.Post)) {
    @Html.ValidationSummary()
        <span class="input-group-addon">
            <i class="material-icons">face</i>
        </span>
        @Html.EditorFor(x => x.Name, new { @class="form-control", @placeholder = "Name"})
        @Html.ValidationMessageFor(x => x.Name)                                           
    </div>

    <div class="input-group">
        <span class="input-group-addon ">
            <i class="material-icons">email</i>
        </span>
        @Html.TextBoxFor(x => x.EmailId, new { @class = "form-control", @placeholder = "Email" })
        @Html.ValidationMessageFor(x => x.EmailId)                                           
    </div>
}

Under <head> tag

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

The above specified validation is generating data validation properties in HTML

Ex:

<input class="text-box single-line" data-val="true" data-val-length="Name can have maximum of 256 characters." data-val-length-max="256" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="">

The problem is that I'm unable to display corresponding error message to User. Is there anything that I'm missing? Or am I doing something wrong?

Upvotes: 1

Views: 789

Answers (1)

Balaji Marimuthu
Balaji Marimuthu

Reputation: 2058

Enable the ClientValidationEnabled key in web.config. 

<add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />

Upvotes: 1

Related Questions