validation fails but jQuery valid() is true and $.post executes

Question

I am having trouble with jQuery validation and posts. I am using MVC 4 but that shouldnt matter. I have done the view source and I have all the correct HTML 5 attributes set.

Here's how I am doing a post using jQuery:

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnsend').click(function (e) {
            if ($("#sendForm").validate().form()) {
                var contact = {
                    Name: $('#Name').val(),
                    Email: $('#Email').val(),
                    Message: $('#Message').val()
                };

                $.post('/Contact/Send', contact, function () {
                    $('#cSet').fadeOut(1000, "", function () {
                        $('#success').delay(1000).fadeIn(1000, "", function () {
                            $('#success').html("<h2>The message is sent. Thank you!</h2>");
                        });
                    });
                });
            }
            else {
                return false;
            }
            //return false;
        });
    });
</script>

Here's the code inside div for email textbox:

<div>
    @Html.TextBox("Email", null, new { @style = "width:400px", @Type = "email",            @placeholder="Your email" })
    @Html.ValidationMessageFor(m => m.Email)
</div>

I remove the script block everything works. With the script, email type validation doesnt work properly. I see the validator flashing but that doesnt stop the post going through.

Any help is appreciated! Thanks in advance!

Should I just use $.Ajax instead?

Here's more the validation flash occurs if the button type is submit

<div>
    <input id="btnsend" type="submit"  value="Send" />;
</div>   

If I change it to button, it does not flash or stop the post.

Answer 1

There is an issue with jquery plugin that gets shipped with MVC handling html5 input types.

Got the latest from

https://github.com/jzaefferer/jquery-validation/downloads

Works like a charm!! :)

I cant be happier. :)

Answer 2

I never used the JQuery validation plugin, but reading the form() method documentation at http://docs.jquery.com/Plugins/Validation/Validator/form:

Validates the form, returns true if it is valid, false otherwise. This behaves as a normal submit event, but returns the result.

It seems like the form() method is firing a submit event and that's causing the post. Maybe try:

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnsend').click(function (e) {
            if ($("#sendForm").validate()) {
                var contact = {
                    Name: $('#Name').val(),
                    Email: $('#Email').val(),
                    Message: $('#Message').val()
                };

                $.post('/Contact/Send', contact, function () {
                    $('#cSet').fadeOut(1000, "", function () {
                        $('#success').delay(1000).fadeIn(1000, "", function () {
                            $('#success').html("<h2>The message is sent. Thank you!</h2>");
                        });
                    });
                });
            }
            else {
                return false;
            }
        });
    });
</script>

Hope it helps!

Answer 3

I think your issue might be in your textbox set up. In order to use the jQuery Validate plugin, you need to have certain data attributes, which are set up automatically if you use:

@Html.TextBoxFor(m => m.Email, new { style = "width:400px", type = "email", placeholder = "Your email" })

instead of the regular TextBox method of the HtmlHelper

Answer 4

Could it be that your form is submitting the old fashioned way (not using the ajax submission you have in your JS function).

Try binding the validation to the forms submit event:

$(form).bind("submit",function(){
    if($(this).validate())
       {
           //submit
       }
     else
       {
            return false; 
       }
});