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.

Answer 1

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.