Как отправить данные после проверки формы с помощью jQuery?

У меня есть простая форма регистрации адреса электронной почты следующим образом:

<form action="" id="newsletterform" method="get">
      <input type="text" name="email" class="required email" id="textnewsletter"  />
      <input type="submit" id="signup" />
</form>

Вот что я хочу сделать:

  • Проверьте форму, чтобы найти пустую строку или неверно заполненный адрес электронной почты, который пользователь нажимает отправить или нажимает ввод.
  • Если произойдет что-то из вышеперечисленного (пустая строка и т. Д.), Я бы хотел сгенерировать ошибку, чтобы сообщить пользователю.
  • Затем, как только пользователь заполняет правильно сформированный адрес электронной почты и нажимает кнопку «Отправить» (или введите), я хочу, чтобы форма отправляла адрес электронной почты туда, куда я указываю код jQuery, а затем генерирую небольшое «Спасибо за регистрацию уведомления», все без перезагрузки браузера.

Я просмотрел слишком много уроков, и мои глаза на этом этапе сильно болят, поэтому, пожалуйста, не указывайте мне какие-либо URL-адреса (я, скорее всего, был там).

Если бы кто-то мог представить основные принципы того, что делать, это было бы очень ценно.

10.12.2008 18:21:12
3 ОТВЕТА
РЕШЕНИЕ

Во-первых, пожалуйста, убедитесь, что вы делаете все свои проверки на стороне сервера. Мне нравится, когда мои формы работают без какого-либо JavaScript. Я предполагаю, что вы сделали так много.

**** ОРИГИНАЛЬНЫЙ ОТВЕТ ***

Затем измените ваш элемент «submit» на элемент кнопки. На OnClick элемента button, запустите функцию JavaScript, которая проверяет. Много примеров того, как это сделать, как вы знаете.

Если проверка не пройдена, отправьте оповещения. Если это успешно, используйте JavaScript для отправки формы.

**** NEW, ИНСТРУМЕНТ С ИСПОЛЬЗОВАНИЕМ ОТВЕТА ***

Вы также можете использовать JQuery как (orip указывает), и это плагины, чтобы сделать это. Они выполняют большую часть тяжелой работы. Пожалуйста, убедитесь, что мои комментарии рассказывают правильную историю. этот код также выполняет AJAX.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Load JQuery on your page -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- Load JQuery validation sytles and (rules?) on your page -->
    <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.css" type="text/css" media="screen" />
    <!-- Load JQuery validation plugin on your page -->
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
    <!-- Load JQuery form plugin on your page -->
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/svn/trunk/plugins/form/jquery.form.js"></script>
  <script type="text/javascript" language="javascript">
    //Wait until the document is loaded, then call the validation.  Due to magic in JQuery or the plugin
    //  this only happens when the form is submitted.
  $(document).ready(function(){
        //When the submit button is clicked
        $("#signup").click(function() {
            //if the form is valid according to the fules
            if ($("#newsletterform").valid()) {
                //Submit the form via AJAX
                $('#newsletterform').ajaxForm(function() { 
                    //this alert lets me know the submission was successfull
                    alert("Thank you!"); }); 
                }
            })
  });
  </script>
    <!-- Just some styles -->
    <style type="text/css">
            * { font-family: Verdana; font-size: 96%; }
            label { width: 10em; float: left; }
            label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
            p { clear: both; }
            .submit { margin-left: 12em; }
            em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>  
</head>
<body>
    <form action="" id="newsletterform" method="get">
        <!-- The classes assigned here are where the validation rules come fome.  
        This is required, and it must be an email -->
        <input type="text" name="email" class="required email" id="textnewsletter"  />
        <input type="submit" id="signup" />
    </form>
</body>
</html>

Это не самый трудный код, который вы могли бы написать, но он послужит примером.

7
10.12.2008 19:58:11
Спасибо за ответ. Служба MY Newsletter обеспечит проверку на стороне сервера, так что это не проблема. Примеры кода были бы отличными!
Keith Donegan 10.12.2008 18:35:10
Я украл это почти оптом со страницы, на которую указал Орип.
MrChrister 10.12.2008 18:57:56
Святая Моли, спасибо! Быстрый вопрос, где бы я заполнил URL для обработки формы в JQuery (например, получить адрес электронной почты)?
Keith Donegan 10.12.2008 21:17:07
Он основан на действии формы.
MrChrister 11.12.2008 00:42:21

Используйте плагин проверки jQuery .

С ним вам не нужно изменять свою форму - она ​​будет отправлена ​​только в том случае, если проверка прошла успешно. Это может сэкономить вам много времени и сложности.

Редактировать:

Чтобы предотвратить перезагрузку страницы, либо воспользуйтесь submitHandlerопцией плагина " ", чтобы представить себя:

$('#myform').validate({
   // ...
   submitHandler: function() { alert("submitted"); }
});

или используйте плагин jQuery Form, который преобразует отправку вашей формы в отправку AJAX - плагин валидации интегрируется с ним.

4
10.12.2008 19:09:01
Спасибо за вашу помощь, orip. Я попробовал, подтвердил это нормально, но я не могу заставить форму отправить без перезагрузки страницы?
Keith Donegan 10.12.2008 18:58:01
Ну, я могу хорошо .. но, как я уже сказал, я хочу отправить форму без перезагрузки браузера, вот прекрасный пример того, чего я пытаюсь достичь: vouchercodes.co.uk - смотрите новостную рассылку под навигацией, спасибо
Keith Donegan 10.12.2008 19:04:56

Спасибо за вашу помощь, ребята.

У меня есть решение, которое работает идеально, как я хочу (пришлось нанять кого-то :) - Anywho, для всех, кто нуждается в этом, вот вы:

$(document).ready(function () {
      $('#textnewsletter').click(function () 
      {
            if($('#textnewsletter').val()=='Your email address')
                  $(this).attr("value",'');
      });

      $('form#newslattersub').submit(function () 
      {
            if(!isEmail($('#textnewsletter').val() ))
            {
                  $('p.idmsg').html('<span class="error">Please enter a valid email             address</span>').hide().fadeIn("slow");

                }
                else{
                    $.post($('form#newslattersub').attr('action'), { email:$('#textnewsletter').val() },function(data){
                        $('p.idmsg').html('<span class="success">Thanks for signing up! Please check your email for confirmation!</span>').hide().fadeIn("slow");
                         //alert("server return " + data);
                    });


                }
                return false;


            });

        });
0
11.12.2008 17:16:39