Asp.Net Mvc 4: form validate on submit button click

Question

I have a very simple newsletter subscription form :

    @using (Ajax.BeginForm("Register", "Home", new AjaxOptions
{
    Confirm = "confirm?",
    HttpMethod = "Post",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "response"
}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <div id="response">
        <div class="form-group">
            @Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "insert email" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div class="form-group">
            <input type="submit" id="submit" value="subscribe" class="btn btn-default" />
        </div>
    </div>
}

The email field needs to be filled, and be a valid email. The problem is that as soon as I start typing inside the textbox, validation fires, and the message "email is invalid" pops out. This is quite annoying. Is there a way to fire validation when clicking on submit button, instead of every single textbox change? Thank you.

I can't replicate this problem. I think you might need to include more of your page code/content in your question. — sanepete
– sanepete, Commented Apr 27, 2015 at 9:59
What you claim is not the default behavior. Validation is 'lazy' will not be triggered until the control loses focus. If you refocus the control, validation is 'eager'. You have something else in your code causing this issue — user3559349
– user3559349, Commented Apr 27, 2015 at 10:18
Actually, it seems to be the default behaviour... As Prasanth says below, validation is triggered as soon as I type, not when field loses focus. — Cuttlefish
– Cuttlefish, Commented Apr 27, 2015 at 10:30
Rubbish. You should read the documentation to confirm it. you are doing something else wring to cause this behavior. — user3559349
– user3559349, Commented Apr 27, 2015 at 11:26
Ok, this is what I came up to: ValidationMessageFor triggers error when the field changes its state to invalid, and this happens on every field change. So I removed ValidationMessageFor and replaced it with a ValidationSummary, that triggers only on submit click. Thank you everyone for support. — Cuttlefish
– Cuttlefish, Commented Apr 28, 2015 at 8:57

Prasanth Jaya · Accepted Answer · 2015-04-27 10:11:32Z

1

If you use ValidationMessageFor then the MVC will trigger immediately when you type. Instead use Jquery or javascript validation.

HTML:

@Html.TextBoxFor(model => model.Email, new { @class = "form-control", @placeholder = "insert email" })
<div id="emailerror" class="hide">The email is required</div>

JQuery:

var pattern = /^([\w\-\.]+)@@((\[([0-9]{1,3}\.){3}[0-9]{1,3}\])|(([\w\-]+\.)+)([a-zA-Z]{2,3}))$/;
        var email = $('#Email').val();
        if (email == "") {
            $('#emailerror').removeClass('hide');
            $('#emailerror').addClass('error');
            return false;
        } else if (!pattern.test(email)) {
            $('#emailerror').removeClass('hide');
            $('#emailerror').addClass('error');
            document.getElementById("emailerror").innerHTML = "The Email is not valid";
            return false;
        }
        else {
            $('#emailerror').addClass('hide');
            $('#emailerror').removeClass('error');
            return true;
        }

CSS:

.hide {
display:none;
}

.error {
position: absolute; 
margin-top:48px; 
margin-left:-300px;
z-index: 1060;
max-width: 276px;
padding: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
white-space: normal;
color: #fff;
background-color: #c14a4a;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

answered Apr 27, 2015 at 10:11

Prasanth Jaya

4,8062 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cuttlefish Over a year ago

Didn't know about that... So the only way to avoid this issue is to use a "custom" jquery validation?

Guruprasad J Rao Over a year ago

No @Cuttlefish.. You have another alternative where you can avoid it.. :) But even Prashanth's answer works well.. :)

user3559349 Over a year ago

"MVC will trigger immediately when you type."! Complete rubbish. Read the documentation. It does not trigger validation until the control loses focus, and only then if the value has been modified.

Community · Accepted Answer · 2017-05-23 11:50:47Z

As an alternative a more straightforward way you can pass a function to the onfocusout and onkeyup settings of the jquery.validator to decide if an element has to be validated in those events or not, as this :

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}

SOURCE

Collectives™ on Stack Overflow

Asp.Net Mvc 4: form validate on submit button click

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related