Question

I have an MVC application that uses data annotations validation. I also have on button submit some manual jQuery validation. I want the submit button to hide when my jQuery validation has passed and the unobtrusive validation implemented by the framework passes.

This is the code I have:

$('#btnSubmit').click(function () {
    if (!$('#Terms').is(':checked')) {
        $('.termsLabel').animate({ color: "#c71040" }, 'slow');
        $('.termsLabel a').animate({ color: "#c71040" }, 'slow');
        return false;
    }

    if ($('.wordCount').hasClass('error')) {
        $('.caption label').animate({ color: "#c71040" }, 'slow');
        return false;
    }

    if ($(form).valid()) {
        $('#btnSubmit').hide();
        $('#submitting').show();
    }

});

The (form).valid() method always seems to return false (and the hide / show is never executed) even when the form is posting.

The reason I’m doing this is I’m allowing the users to upload an image, and I don’t want the user to be able to click more than once.

Any help – appreciated.

Answer 1

I’ll answer my own question.

On the form:

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { @ID = "MyForm" }))

And then:

$('#MyForm').validate();

    if ($('#MyForm').valid()) {
        $('#btnSubmit').hide();
        $('#submitting').show();
    }

The problem was I didn’t give my form a name, and didn’t call .validate()