2

html5検証で検証されたフォームがあり、AJAXで送信された後、入力フィールドがリセットされ、機能しています。

私の問題は、有効な送信後、メッセージが送信され、入力がクリアされることですが、html5 検証では空のフィールドが正しくないフィールドとしてアウトラインされます。

HTML:

 <form method="post" action="mailer.php" class="contact-form" id="cform">
     <input type="text" name="name" placeholder="Name" required />
     <input type="text" name="phone"  placeholder="Phone" required />                       
     <input type="email" name="email" placeholder="Email" required />                       
     <textarea name="message" placeholder="Message" required></textarea>
     <input type="submit" class="submit-btn" id="submit-btn" value="Send your message" />
     <div id="success"></div>
 </form>

Jクエリ:

 $('#submit-btn').click(function(){
     if($("#cform")[0].checkValidity()) {

         $.post("mailer.php", $("#cform").serialize(),  function(response) {
             $('#success').html(response);
             $("#cform")[0].reset();
         });
         return false;

     } else console.log("invalid form");
 });
4

2 に答える 2

1

デフォルトの送信動作を停止する必要があります。

 $('#submit-btn').click(function(e){
     e.preventDefault();
     // ...
 }

type="button"または、の代わりに使用することもできますtype="submit"。

于 2013-09-09T08:18:26.447 に答える