Client validation doesn't fire after server error

Question

I have form which validate inputed email on uniqueness.

<form id="emailValidationForm">
            @Html.ValidationSummary(true, String.Empty, new {@class = "text-danger text-center"})
            <div class="form-group text-center">
                <div class="input-group margin-bottom-5 margin-top-10">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    @Html.TextBoxFor(m => m.Email, new {@class="form-control", @placeholder="Enter your Email",@data_toggle="tooltip"})
                    @*<input type="text" name="Email" placeholder="Enter your Email" class="form-control" data-toggle="tooltip">*@
                </div>
                @Html.ValidationMessageFor(m => m.Email, null, new { @class = "text-danger text-center" })
            </div>
            <div class="text-right">
                <button type="submit" class="btn-u btn-u-wide btn-u-orange" title="Validate email">Join</button>    
            </div>
        </form>

Email is part of next Model :

public class RegisterViewModel
{
    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

So, when i type nothing in text-box i will get error. When i type email that is already registered, i will get also error from function which checks uniqueness.

[AllowAnonymous]
    public JsonResult EmailValidation(string email)
    {
        if (ModelState.IsValid)
        {
            var user = _service.FindByEmail(email);
            if (user == null)
            {
                return Json(new {result = true, message = "Email is validated"}, JsonRequestBehavior.AllowGet);
            }
            ModelState.AddModelError(string.Empty, "Email already exists");
            return Json(new
                            {
                                result = false,
                                message =
                            RenderRazorViewToString("~/Views/Account/_RegisterPartialView.cshtml",
                                                    new RegisterViewModel {Email = email})
                            }, JsonRequestBehavior.AllowGet);
        }
        return Json(new {result = false, message = "Input Email"}, JsonRequestBehavior.AllowGet);
    }

But then client validation doesn't works, i can input nothing in email text-box and it will go on.

How can i fix it?

I use jquery 1.10.2 and jquery.validate for validation. Work on MVC5. Use Bootstrap3 for styling.

Also i have set custom defaults:

$.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".input-group").addClass("has-error");
        },
        unhighlight: function (element) {
            $(element).closest(".input-group").removeClass("has-error");
        }
    });

That script is in partialView (i try to replace it in js-module that is used on partialView, but this doesn't works. So i left script it in partialView)

severin · Accepted Answer · 2014-08-07T10:48:19.393

0

You need to add the remote annotation to the Email-field:

[Remote("EmailValidation","<ControllerName>", ErrorMessage="{0} already has an account, please enter a different email address.")]
public string Email { get; set; }

Also it appears to me like you are mixing two concepts here. The validation-check should be a simple JSON-result like this:

public JsonResult EmailValidation(string email)
    {

        var user = _service.FindByEmail(email);

        return user == null
            ? Json(true, JsonRequestBehavior.AllowGet)
            : Json(false, JsonRequestBehavior.AllowGet);
    }

edited Aug 07 '14 at 10:48

answered Aug 07 '14 at 10:26

severin

5,203
9
35
48

thanks for reply. About Action : i do so because i have problem with displaying error `Email is in use` - on form it doesn't dispay as ValidationSummary – demo Aug 07 '14 at 10:36
I think that if you include the ErrorMessage in the annotation it will work, I updated the original answer to show. If it doesn't work, I think [this post](http://stackoverflow.com/questions/8944999/mvc3-remote-validation) contains the answer. – severin Aug 07 '14 at 10:48
and another point, i make submit of form using ajax (and on beforeSend and on Complete i show loading gif-image), if it all ok - then another form become shown. If i apply your sample(which is pretty good for me now ;-) ) how can now i show loading? Thanks – demo Aug 07 '14 at 11:13
and again: how can i disable button submit while email isn't validated? – demo Aug 07 '14 at 11:22
[Disable submit-button](http://pastebin.com/5TXcjqNX). You will also need to add the 'disabled' attribute to your submit button. – severin Aug 07 '14 at 11:58
I am not sure how you can include a loading icon in the built-in remote validation. It is possible you will have to do the validation call manually with jQuery to make it work. – severin Aug 07 '14 at 12:00

Client validation doesn't fire after server error

1 Answers1