Прежде чем я даже напишу свою проблему, я хочу заявить, что я прочитал множество сообщений StackOverflow об этом, и я все еще сталкиваюсь с той же проблемой. В основном, независимо от того, сколько способов я изменяю свой код, моя форма все равно отправляется без предварительной проверки, чтобы увидеть, заполнена ли каждая область. Это мой код.

 <form id="contact" method="post" action="E-mail-form.php" name="EmailFromMyWebsite">

                <label for="name">Name</label> <br>
                <input type="text" name="name" class="required" placeholder="Your Name" title=" (Your name is required)"> <br />

                <label for="email">E-mail</label> <br>
                <input type="email" name="email" class="required email" placeholder="Name@email.com" title=" (Your email is required)"> <br />

                <label for="message">Message/Comment</label> <br>
                <textarea name="message" class="required" placeholder="Leave a brief message" title=" (Please leave me a brief message)"></textarea> <br />

                <input type="button" name="submit" id="submit" value="Send Message" />
            </form>

$(document).ready(function(){
$('#contact').validate({
    rules: {
        name: {required: true},
        email: {required: true},
        message: {required: true}
    },
    submitHandler: $(function(form){

        $("#submit").on('click', function(){
            var formData = $('#contact').serialize();
            $.ajax({
                type:"POST",
                data:formData,
                url:"E-mail-form.php",
                done: function(data){
                    $('#contact').html('<p>Your message has been sent. I will reply to you shortly.</p>');
                },
                fail: function(data) {
                    $('#contact').html('<p>Sorry there was a problem your message was NOT sent.</p>');
                }
            });
            return false;

        });
    })
});
});

Теперь я думаю, что первое, что кто-то заметит, это то, что у меня есть функция для отправки, но я попытался ее удалить, и моя форма просто не отправляется даже с помощью submitHandler. Я думаю, что именно здесь возникает проблема, потому что, когда я смотрю на другие форумы с этой проблемой, я не понимаю, что заставляет форму на самом деле отправляться без этого. Любая помощь или объяснение были бы очень полезны.

1
London804 21 Сен 2013 в 20:56
Где разметка для формы?
 – 
Sparky
21 Сен 2013 в 21:47
Извините, что только что добавил.
 – 
London804
21 Сен 2013 в 21:52

1 ответ

Лучший ответ

Цитировать ОП:

"Теперь я думаю, что первое, что кто-то заметит, это то, что у меня есть функция для отправки, но я попытался удалить ее, и моя форма просто не отправляется даже с помощью submitHandler. Я думаю, что здесь возникает проблема, потому что Когда я смотрю на другие форумы с этой проблемой, я не понимаю, почему форма на самом деле отправляется без этого. Любая помощь или объяснение были бы очень полезны ».

Вам нужно более внимательно изучить синтаксис этих рабочих примеров вместо того, чтобы вставлять случайные обработчики событий. Помещать обработчик click внутри submitHandler, который запускается только после нажатия кнопки, не имеет абсолютно никакого смысла.

Форма отправляется без обработчика click, потому что плагин jQuery Validate уже имеет встроенный. Даже если вы не использовали опцию обратного вызова submitHandler, плагин автоматически захватит событие click кнопки ( пока это type="submit" ) и обработайте ее соответствующим образом. Однако в этом случае вам все равно нужно определить обратный вызов submitHandler, потому что ему принадлежит ваш .ajax().

Итак, удалите обработчик click.

Кроме того, в вашем коде есть синтаксические ошибки:

submitHandler: $(function(form){
  // your ajax           
})  

Вы не помещаете $() вокруг своей функции обратного вызова.

Это просто:

submitHandler: function(form) {
    // your ajax
}

Или с вашим кодом ...

submitHandler: function (form) {
    var formData = $(form).serialize();  // <- use the "form" argument here
    $.ajax({
       ....
    });
    return false;
}

И, наконец, ваша кнопка должна иметь type="submit", чтобы плагин мог ее захватить.

<input type="submit" name="submit" id="submit" value="Send Message" />

Рабочий ДЕМО : http://jsfiddle.net/x4h8L/

2
Sparky 21 Сен 2013 в 23:04
Я ценю ваш вклад и благодарю вас за помощь, но ваш сценарий не работает на моем сайте. Похоже, он не стреляет, это проблема, которая у меня была все время. Когда я нажимаю кнопку «Отправить», ничего не происходит, и когда я смотрю на ваш скрипт, я не понимаю, как работает SubmitHandler, потому что он не привязан ни к какому событию. Поэтому изначально я добавил $ ("# submit"). On ('click', function () {var formData = $ ('# contact'). Serialize ();
 – 
London804
21 Сен 2013 в 22:11
@ London804, см. Мой отредактированный ответ, обновленный вашей разметкой. Ваша кнопка не была захвачена плагином, потому что это не type="submit". ( почему важно включать ваш HTML в OP .) Даже если я не видел вашу разметку и не дал решение, просто сравните мой рабочий jsFiddle с кодом вашего сайта, чтобы найти проблему.
 – 
Sparky
21 Сен 2013 в 22:21
По-прежнему не работает, теперь он проверяет, но ничего не делает при отправке. Но я заметил, что что-то не должно быть var forData = $ ('# contact'), а не 'form', поскольку contact - это заголовок формы, и это то, что я хочу сериализовать?
 – 
London804
21 Сен 2013 в 22:26
Приносит извинения, видимо, он работает, но я не справляюсь: function (data) {$ ('# contact'). Html ('

Ваше сообщение отправлено. Я отвечу вам в ближайшее время.

'); Чтобы появиться на моем экране. }
 – 
London804
21 Сен 2013 в 22:28
@ London804, в данном случае аргумент функции, form, представляет ваш #contact, поэтому $(form).serialize() то же самое.
 – 
Sparky
21 Сен 2013 в 22:28