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

Question

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?

Since I am checking whether the model is valid in my controller, it's not accepting the request. So basically nothing happens — Sasu
– Sasu, Commented Jan 14, 2017 at 23:12
what you mean it's not accepting the request ?? Is your form being submitted ? — Shyju
– Shyju, Commented Jan 14, 2017 at 23:14
Yes, the form is being submitted. But as I already told, the controller is accepting the request only if submitted model is valid. — Sasu
– Sasu, Commented Jan 14, 2017 at 23:24
@Sasu did you enabled the client side validation key in web.config — Balaji Marimuthu
– Balaji Marimuthu, Commented Jan 15, 2017 at 2:57

Balaji Marimuthu · Accepted Answer · 2017-01-15 03:13:28Z

1

Enable the ClientValidationEnabled key in web.config.

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

edited Jan 15, 2017 at 3:13

answered Jan 15, 2017 at 3:01

Balaji Marimuthu

2,06814 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related