EmailAddress Validation ModelValidation firing automatically even before the user finished entering data

Question

I am using data annotation to validate mvc4 model. Field

 [Required(ErrorMessage="Please fill your Email Address")]        
    [EmailAddress(ErrorMessage="Please enter your active email so we can reply to your email.")]
    public string UserEmail { get; set; }

in my view

 <div class="form-group has-feedback">
                        <label class="sr-only" for="email2">Email address</label>
                        @Html.TextBoxFor(model => model.UserEmail, new { @class = "form-control", placeholder = "User Email", id = "useremail" })

                        @Html.ValidationMessageFor(model => model.UserEmail, string.Empty, new { @style = "color:red", @class = ".field-validation-error", id = "valUserEmail" })
                        <i class="fa fa-envelope form-control-feedback"></i>

                    </div>

The problem here is , i start entering data to my email address field and when i start entering data i will get my validation message even before i finish entering my data to the field. This will be vanished when i finished entering correct data , but its annoying for the user if he/she see the error message even before he/she enters the data.

Any suggestions would be helpful.

Thanks in advance.

Answer 1

By default client validation works with keyUp event. You can change it with changing settings of jquery validate:

var validator = $("form").data("validator");
if (validator) {
    validator.settings.onkeyup = false; // disable validation on keyup
}

Or even disable keyUp event for particular input:

$('form').validate({
   rules: {
     [...]
   }
} 
// Disable keyup validation for UserEmail field
$("[data-val-UserEmail]").keyup(function() { return false } );