Как отправить данные после проверки формы с использованием jQuery? - PullRequest
Новая
       16

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

4 голосов
/ 10 декабря 2008

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

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

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

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

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

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

Ответы [ 3 ]

7 голосов
/ 10 декабря 2008

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

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

Затем измените свой элемент submit на элемент button. На 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>

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

4 голосов
/ 10 декабря 2008

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

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

Edit:

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

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

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

0 голосов
/ 11 декабря 2008

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

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

$(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;


            });

        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...