Use ASP.NET MVC validation by Jquery

Question

I want to show validation messages for my DOM elements for which the validation are written into Viewmodel:

My viewmodel code is as::

 public class HotelDetailViewModel
    {
        public long DocumentHotelID { get; set; }
        [Required(ErrorMessage = "Please enter Check In Date")]
        public string CheckInDate { get; set; }
        [Required(ErrorMessage = "Please enter Room Type")]
        public string RoomType { get; set; }
        [Required(ErrorMessage = "Please enter Nights")]
        public int Nights { get; set; }
    }

I have also used the Razor Validators as:

@Html.ValidationMessageFor(Model => Model.CheckInDate)

But I want to do the Validation on client side itself, without doing any submit. Because I have two forms on page and only one form can be submitted and for other I haveto do something using Jquery on client side, that I am asking. Thanks in Advance.

Answer 1

To enable eager validation with the jQuery Validation plugin, use this code in your view

$('#myform').validate({
onfocusout: function(element) {
    $(element).valid();
}
});

Answer 2

In MVC, to support DataAnnotation validation on client side, you just have to put this javascript file **jquery.unobtrusive-ajax.js, jquery.validate.min.js, jquery.validate.unobtrusive.min.js

which is can be render as

 @Scripts.Render("~/bundles/jqueryval")

Answer 3

If you are allready using jquery.validate.min.js, you can add validation rules on client side.

<script src="jquery.validate.min.js" type="text/javascript"></script>

Example

@using (Html.BeginForm("action", "controller", new { Id = "ClientForm" }, FormMethod.Post))
{

    @Html.LabelFor(m => m.UserName)
    @Html.TextBoxFor(m => m.UserName)

    <input type="submit" value="Log in" />
}

Add validation rules

<script>
    $("#ClientForm").validate({
        rules: {
            'UserName': {
                required: true,
                maxlength: 20
            }
        },
        messages: {
            'UserName': {
                required: 'Title required',
                maxlength: 'Must be under 20 characters'
            }
        }
    });
</script>