AJAX Jquery Комментарий Форма Ответ - PullRequest
Новая
       18

AJAX Jquery Комментарий Форма Ответ

0 голосов
/ 27 февраля 2012

Я создаю всплывающую форму комментария jquery ajax, используя плагин проверки jquery. Почему ajax работает по-разному для поля комментариев и полей для имени и адреса электронной почты? Когда пользователь начинает вводить текст в поле комментария, ajax-ответ «это поле обязательно для заполнения» удаляется. Я хотел бы, чтобы это также происходило с полями имени и электронной почты, но они остаются до тех пор, пока пользователь не нажмет кнопку «Отправить». Как заставить поля имени и адреса электронной почты вести себя как поле комментария?

Вот js, управляющий событием: 

  <script>
    $(document).ready(function() {
        $('#commentForm').validate({
            submitHandler: function(form) {
                $.ajax({
                    type: 'POST',
                    url: 'process.php',
                    data: $(this).serialize(),
                    success: function(returnedData) {
                        $('#commentForm').append(returnedData);
                    }
                });         
                return false;
            }
        });
    });
  </script>

Форма HTML настроена так: 

<form class="cmxform" id="commentForm" method="POST" action="">
   <p>
     <label for="cname">Name</label>
     <input id="cname" type="text" name="name" size="60" class="required" minlength="2" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <input id="cemail" type="text" name="email" size="60"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <input id="curl" type="text" name="url" size="60"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <textarea id="ccomment" type="text" name="comment" cols="72" rows="8"  class="required"></textarea>
   </p>
   <p>
     <div id="button2"><input class="submit" id="submit_btn" type="submit" value="Send Email"/></div>
   </p>
</form>

Спасибо.

1 Ответ

0 голосов
/ 12 марта 2012

Я решил эту проблему, используя функцию errorPlacement в jQuery. Не указание errorPlacement для этих элементов вызвало конфликт в моем js.

Вот способ, которым я решил свою проблему: 

$('#commentForm').validate({
    submitHandler: function(form) {
        $.ajax({
            type: 'POST',
            url: 'process.php',
            data: $(this).serialize(),
            success: function(returnedData) {
                $('#commentForm').append(returnedData);
            }

        });
        return false;
    },
    errorPlacement: function(error, element) {
        error.insertAfter(element).position({
            my: 'right top',
            at: 'right top',
            of: element
        });
        error.fadeOut(3000);
    },
});
...