Ошибка проверки JQueryPlace / submitHandler - PullRequest
Новая
       25

Ошибка проверки JQueryPlace / submitHandler

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

Как мне написать свой js, чтобы ответы от плагина проверки jquery были помещены в поля поля формы?

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>

В настоящий момент 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>

Что такое правильный js, чтобы поместить errorPlacement во входное значение полей формы? Так что, если кто-то не включил свою электронную почту, ответ «это поле обязательно для заполнения» появится внутри входного значения для электронной почты. В настоящее время он возвращается после ввода. Спасибо.

1 Ответ

1 голос
/ 05 марта 2012

Валидация предлагает опцию errorPlacement, которая предназначена именно для этой цели.

Я написал это быстро для вас, используя утилиту jQuery UI position (так что вам нужно будет включить jQuery UI, чтобы моя версия работала): 

  //in your $.validate options, add this
  errorPlacement: function(error, element) {
      error.insertAfter( element).position({
          my:'right top',
          at:'right top',
          of:element          
      });
   }

Примечание. Я также определил этот CSS: 

label.error { color: red; position:absolute; }​

Смотрите это в действии здесь: http://jsfiddle.net/ryleyb/Z64Tv/

...