Question

I’m using ASP.NET MVC. My validation works well until I attached an event to the form’s onSubmit event.

This is how my form looks:

@using (Html.BeginForm("Recover", "Auth", FormMethod.Post, new { Id = "RecForm", onSubmit = "return Events.Submit(this,event)" }))
{
        @Html.TextBoxFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
        <input type="submit" value="Recover" />
}

The Javascript (works fine, just put it here so you can check if something in this is causing the validation not to fire):

//Events
window.Events = (function () {

    // Baseline setup
    var Events = {};

    function disableAllChildren(el) {
        $(el).find(':input').attr('disabled', true);
    }
    function enableAllChildren(el) {
        $(el).find(':input').attr('disabled', false);
    }

    //Ajax submit
    Events.Submit = function (el, event) {
        event.preventDefault();
        //serialize the form before disabling the elements.
        var data = $(el).serialize();

        disableAllChildren(el);
        $(el).find('.success, .error').hide();
        $.ajax({
            url: el.action,
            type: 'POST',
            data: data,
            success: function (data) {
                //Stuff happens.
            }
        });
    };
    return Events;
})(this, this.document);

How do I get back my validations?

Answer 1

What I do is to check if the form is valid before I submit it. See the below code :

$form = $("#myForm");

if (form.valid()) {

    form.validate();
    //other codes here

 }

If the form is valid, then post your data. If not, do nothing.