Client side validation in asp.net mvc3

Question

I am using asp.net mvc3 for my project along with jquery ajax methods. I have been able to validate the input but if I click on the post button the data is posted even if the form contains invalid data. I know this can be solved using submit button. But I want to use my jquery methods. I have been using asp.net mvc3 client side validation. Here is my code to post the data from a form.

//jQuery
function PostForm(Url, FormID, Title) {    

    var dataTOPost = '#' + FormID; // Id of particular form to post

    $.ajax({
        url: Url,
        type: 'POST',
        data: $(dataTOPost).serialize(),
        beforeSend: function () {
            //display some loading pics
        }
    }).done(function (result) {

        //if success do something
    });

}

And I used it as follows

<a onclick="PostForm('someurl','myform', 'Title of dialog');" >Submit</a>

Here is the screen shot of part of the form being validated. Even if the form contains invalid data the form gets posted. How do I solve this. Thanks.

Certain part of form being validated

May be you should have to manually check if error messages length is greater than zero and return false. — ssilas777
– ssilas777, Commented Aug 29, 2013 at 8:01
If u have validations defined in your model and you are referencing jquery, jquery.validate, jquery.validate.unobtrusive, try adding a submit handler for form inside ur postform function.Might help! — KKS
– KKS, Commented Aug 29, 2013 at 8:02
@ssilas777, It will be time consuming. I was wondering if there were some built in features in mvc3 for checking if the data being posted are valid or not. And Post only when the data is valid else display error msg or something like that. — Redone
– Redone, Commented Aug 29, 2013 at 8:05
@Redone you can use data annotations to specify validations on your model properties. If you will reference jquery.validate.unobtrusive script file in your application and if clientsidevalidation, unobtrusivevalidation is set to true in your app's web.config file, your validations will then work client side. — KKS
– KKS, Commented Aug 29, 2013 at 8:17
@Yoda client side validation is working as shown in the above form screenshot. When the user adds invalid data the form post button should not work. But this is not happening instead the form gets posted with invalid data. How do I check this with javascript/jquery? — Redone
– Redone, Commented Aug 29, 2013 at 8:42

Cristi Pufu · Accepted Answer · 2013-08-29 09:48:51Z

You have to parse the form to validate using:

$.validator.unobtrusive.parse($(form));

And then ask if is valid:

$(form).valid();

Ex:

function PostForm(Url, FormID, Title) {    

        var dataTOPost = '#' + FormID; // Id of particular form to post

        $.validator.unobtrusive.parse($(dataTOPost));

        if ($(dataTOPost).valid()){

            $.ajax({
                url: Url,
                type: 'POST',
                data: $(dataTOPost).serialize(),
                beforeSend: function () {
                  //display some loading pics
                },
                done: function (result) {
                  //if success do something
                }});
        }else{
         console.log("invalid form");
        }
    }

Joan Caron · Accepted Answer · 2013-08-29 08:09:13Z

0

$("a").click(function(event) {
    //cancel submit click
    event.preventDefault();
    //check errors
    ...
    //Post your form
    PostForm('someurl','myform', 'Title of dialog');
});

answered Aug 29, 2013 at 8:09

Joan Caron

1,97018 silver badges21 bronze badges

Collectives™ on Stack Overflow

Client side validation in asp.net mvc3

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related