MVC3 Ajax.BeginForm hooking submit event before validation

Question

I am using an Ajax.BeginForm with unobtrusive validation. I want to give the user the option to save the data with a minimum number of validated fields (which might be zero) but allow some required fields to be saved when empty.

I think my requirements are:

add an event handler to the submit button
perform the validation manually
identify which fields have failed validation because they are empty
identify which fields have failed validation the data is in error

I can catch the submit event and validate the form by adding the following at "document ready"

$(document).ready(function () {

    $('#submit-11').click(function () {
        if (!$("#form0").valid()) {
            alert("woops");
            return false;
        }
        return true;
    });

My problem now is how to identify which fields have failed validation and the reason for failing.

I can find nothing on Google (although that may be a function of my search skills rather than the problem.)

Thanks in advance.

coffeeyesplease · Accepted Answer · 2012-10-09 15:08:51Z

have you tried

event.preventDefault();

just after the submit click? http://api.jquery.com/event.preventDefault/

Now regarding your larger question. I think you can do all of that with jquery here's an example

$(document).ready(function () {
    //form validation rules, including custom rules you'd like
    $("#form").validate({
        rules: {
            fieldOne: { required: true },
            fieldTwo: { required: function () { /*custom validation*/return true; } }
        },
        messages: {
            fieldOne: { required: "error" },
            fieldTwo: { required: "error" }
        }
    });
    //handle submit click
    $("#btnSubmit").click(function (event) {
        event.preventDefault(); //stops form from submitting immediately 
        if ($("#form").valid()) { //perform validation 
            //submit your data if valid
            $.post("/your/action", $form.serialize(), function (data) { 
                //do something with the result
            });
        }
    });

});

UPDATE: So maybe you should be doing this, when you add the validate handler to the form you can implement the submitHandler and the invalidHandler. Now what you really should be looking at is the invalidHandler

        $(document).ready(function(){
            $("#form").validate({
                rules : {
                    field : {required : true}                   
                },
                messages : {
                    field : {required : ""}                 
                },
                submitHandler: function(form) {                     
                    form.submit(); //if all is good
                }, 
                invalidHandler: function(form, validator){
                    console.log(validator.errorList); //if something went wrong
                }
            });

this function receives the validator which in turns has the errorList containing all the fields (and messages) that failed. Test this code with chrome's developer tools, for instance, and you'll see what's in the errorList.

Thanks for the hint. I have revosed my question as the seond part is still stumping me.

Collectives™ on Stack Overflow

MVC3 Ajax.BeginForm hooking submit event before validation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related