Проверка завершается неудачно, но jQuery valid() имеет значение true и $.post выполняется

Question

У меня проблемы с проверкой jQuery и сообщениями. Я использую MVC 4, но это не имеет значения. Я сделал источник просмотра, и у меня есть все правильные атрибуты HTML 5.

Вот как я делаю пост, используя 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>

Вот код внутри div для текстового поля электронной почты:

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

Удаляю блок скриптов все работает. В сценарии проверка типа электронной почты не работает должным образом. Я вижу, что валидатор мигает, но это не останавливает прохождение сообщения.

Любая помощь приветствуется! Заранее спасибо!

Должен ли я просто использовать $.Ajax вместо этого?

Вот еще вспышка проверки происходит, если тип кнопки отправить

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

Если я изменю его на кнопку, он не будет мигать или останавливать сообщение.

Answer 1

Существует проблема с плагином jquery, который поставляется с MVC, обрабатывающим типы ввода html5.

Получил последнюю из

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

Работает как шарм!:)

Я не могу быть счастливее.:)

Answer 2

Может быть, ваша форма отправляется старомодным способом (без использования представления ajax, которое есть в вашей функции JS).

Попробуйте связать проверку с событием отправки формы:

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

Answer 3

Я думаю, что ваша проблема может быть в вашем текстовом поле. Чтобы использовать плагин jQuery Validate, вам нужно иметь определенные атрибуты данных, которые устанавливаются автоматически, если вы используете:

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

вместо обычного TextBox метод HtmlHelper

Answer 4

Я никогда не использовал плагин проверки JQuery, но читал документацию по методу form() по адресу http://docs.jquery.com/Plugins/Validation/Validator/form:

Проверяет форму, возвращает true, если она действительна, иначе false. Это ведет себя как обычное событие отправки, но возвращает результат.

Похоже, что метод form() запускает событие submit, и это вызывает публикацию. Может быть, попробуйте:

<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>

Надеюсь, поможет!