How to force user to enter valid Email before moving to next textbox?

Question

I am taking 2 textbox for Email id and Confirm Email id in my MVC project.

On View:

@Html.TextBoxFor(m => m.Email, new { maxlength = 50, title = "Enter Email" })
@Html.ValidationMessageFor(m => m.Email)
@Html.TextBoxFor(m => m.ReEmail, new { maxlength = 50, title = "Confirm Email" })
@Html.ValidationMessageFor(m => m.ReEmail)

On View Model:

    [DisplayName("Email")]
    [Required(ErrorMessage = "Please enter Email")]
    [RegularExpression(RegexTypes.EMAIL, ErrorMessage = RegexTypes.EMAIL_MESSAGE)]
    public string Email { get; set; }

    [DisplayName("Confirm Email")]
    [Required(ErrorMessage = "Please re enter Email")]
    [RegularExpression(RegexTypes.EMAIL, ErrorMessage = RegexTypes.CONFIRM_EMAIL_MESSAGE)]
    [DataType(DataType.EmailAddress)]
    [System.Web.Mvc.Compare("Email", ErrorMessage = "The email and confirmation email does not match.")]
    public string ReEmail { get; set; }

It is working fine and showing the message.

I want to stop the user if email is not valid then user should not able to enter Confirm Email in 2nd textbox until Email is not correct. How to do that? Someone please help me.

Answer 1

You could add custom jQuery that re-focuses the e-mail textbox when the confirm textbox is focused if the e-mail is not valid.

$("#confirmTextBox").focusin(function() {
    if (!emailIsValid())
    {
        $("#emailTextboxID").focus();
    }
});

where emailIsValid() is a method of your own.

If you want to prevent the user's actions even more, you could do that on Blur of the mail textbox (which would mean he could not focus anything else on the page until the e-mail is valid).

$("#emailTextboxID").blur(function() {
    if (!emailIsValid())
    {
        $(this).focus();
    }
});

Finally, you can also disable the tab key:

//disable the tab key
$(document).keydown(function(objEvent) {
    if (objEvent.keyCode == 9) {  //tab pressed
        objEvent.preventDefault(); // stops its action
    }
})  

Answer 2

This just a hint:

@Html.TextBoxFor(m => m.Email, new { maxlength = 50, title = "Enter Email", onblur="regainFocusOnError()" })

[EDIT] Just ran a quick test and it works. Trick here is to check for input-validation-class generated by helper, if it present regain focus on input:

@Html.TextBoxFor(m => m.UserName, 
new { maxlength = 50, title = "Enter Email", onblur="var me = this; setTimeout(function() { if($(me).hasClass('input-validation-error')) { me.focus(); } }, 0);" })

Answer 3

Assuming you are using jQuery.validate, you can just encapsulate the validation function in your own. Be aware that this code will trigger for all jquery validated email on your page.

$(function() {
    // track original validation method
    var originalMailValidator = $.validator.methods.email;

    var keepFocus = function() {
        var that = this;
        setTimeout(function() { that.focus(); }, 0);
    };

    // encapsulate the original validation function in custom
    // function which keeps focus
    $.validator.methods.email = function(value, element) {
        $(element).unbind('blur', keepFocus);
        var result = originalMailValidator.apply(this, [value, element]);
        if (!result)
            $(element).bind('blur', keepFocus);
        return result;
    };
});