Display error messages using c# mvc with razor view engine

Question

I want to display error messages dynamically ie, when the cursor moves out of the field but not when the form is submitted.

My requirement is like this:- I have to design a registration form with some fields like name,address,phone number,email,password etc. i designed it & saved the data successfully in DB but what i exactly required in the sense i have to display error messages dynamically without using "ajax" as i have already stated ...

My code is like this:-

View:-

<div class="venfor_line5" popText><label>@Resources.Resources.VendorReg_phoneNumber<img src="~/images/star.png" /> </label>
        @Html.TextBoxFor(model => Model.MobileNumber, new { @class = "input" })
        @Html.ValidationMessageFor(model => model.MobileNumber)</div>

    <div class="venfor_line1" popText = @Resources.Resources.VendorReg_emailHintStr>
    <label>@Resources.Resources.VendorReg_email<img src="~/images/star.png" /> </label>
    @Html.TextBoxFor(model => Model.Email, new { @class = "input" })
    @Html.ValidationMessageFor(model => model.Email)</div>

I have gone through many references but not found exactly what i am looking for.Any help would be greatly appreciated. can anyone guide me in resolving this issue.

Answer 1

You could use jQuery's focusOut() method to perform validation. Something like:

$('#elementId').focusOut(function(){
    //do validation here
});

Answer 2

If you are using unobtrusive jQuery validation you could eagerly enable it so that it is automatically triggered onblur without requiring the user to submit the form:

$(document).ready(function () {
    var settngs = $.data($('form')[0], 'validator').settings;
    settngs.onfocusout = function (element) { $(element).valid(); };
});