フォームの検証と成功

Question

フォームに情報を入力せずに送信すると、エラーメッセージがすぐに表示されてから消えます。エラーメッセージがなく、検証が成功した場合にのみフォームが消えてしまいます。私は、成功のためにifステートメントを使う必要があるかもしれないと思います。あなたのjsFiddleのオフに基づいて、このコードは動作しますhttps://jsfiddle.net/ywhpdLen/3/

が、あなたのjsFiddleは動作しません： -

これまでのところ、私はこの持っている。ここhttps://jsfiddle.net/wnmLmcm8/

$(document).ready(function() { 

    $("form").submit(function (e) { 
    e.preventDefault(); 
    $.ajax({ 
     type: this.method, 
     url: this.action, 
     data: { 
     name: $('#name').val(), 
     email: $('#email').val() 
     }, 
     success: function() { 
     $('#emailform').fadeOut("slow"); 
     } 
    }); 
    }); 

    $("form").validate({ 
    rules: { 
     email: { 
     required: true, 
     email: true, 
     remote: "http://localhost:3000/inputValidator" 
     } 
    } 
    }); 
}); 

Answer 1

はあなたのjsFiddleの作業バージョンです。私は自分の開発環境にローカルでコードをプルする必要がありました。

ポップアップは、テキストフィールドをクリックするまで保持されます。

デフォルトの ".validate（）"拡張を使用して入力要素&に "required"を追加すると、ジョブが実行されます。あなたはそれをカスタマイズするために探しているなら、私は非常以下、コメントパーhttps://jqueryvalidation.org/documentation/

<div id="emailform"> 
    <form method="post" action="form.php"> 
     <hr> 
     <label for="name">Name</label> 
     <br> 
     <input type="text" name="name" id="name" class="NewsLetter1" required/> 
     <br> 
     <label for="email">Email</label> 
     <br> 
     <input type="text" name="email" id="email" class="NewsLetter2" required/> 
     <input type="submit" value="Submit"> 
     <hr> 
    </form> 
</div> 

<script> 
    $(document).ready(function() { 

     $("form").submit(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       type: this.method, 
       url: this.action, 
       data: { 
        name: $('#name').val(), 
        email: $('#email').val() 
       }, 
       success: function() { 
        $('#emailform').fadeOut("slow"); 
       }, 
       failure: function (ex) { 

       } 
      }); 
     }); 

     $("form").validate(); 
    }); 

</script> 

を見てお勧めします：あなたのAJAX呼び出しがまだ起こっているとform.submit（）がオフに発射されたように見えます。 form.submit（）呼び出しを削除してvalidate呼び出しに含めることができます。

$("form").validate({ 
    submitHandler:function(form){ 

      $.ajax({....}) 
    } 

    }); 

Answer 2

問題に実行する場合、それはのようなハンドラを提出して...

$(document).ready(function() 
{ 
    $("form#sub_form").validate({ 
     rules: { 
      UserName: "required", 
      Useremail: { 
       required: true, 
       email: true 
      }, 
      Userpwd:{ 
       required: true, 
       minlength:8 
      }, 
      Con_Userpwd:{ 
       required:true, 
       equalTo:"#reg-pass" 
      }, 
      contact:{ 
       required:true, 
       minlength:10 
      } 
     }, 
     messages: { 
      UserName: "Please specify your name", 
      Useremail: { 
       required: "We need your email address to contact you", 
       email: "Your email address must be in the format of name@domain.com" 
      }, 
      Userpwd:{ 
       required: "Enter Your Password", 
       minlength:"Please Enter minimum 8 digit password" 
      }, 
      Con_Userpwd: { 
       required:"Please re-enter your password", 
       equalTo:"Password not matched" 
      }, 
      contact:{ 
       required:"Phone Number Required", 
       minlength:"Minimum 10 Digits Required" 
      } 
     }, 
     submitHandler: function(form) { 
      var msg = $("form#sub_form").serialize(); 
     $.ajax({ 
        type: "POST", 
        url: "register_checkout.php", 
        data: msg, 
        success: function (html) { 
                   $(".popup").delay(5000).fadeOut(1500); 
          setTimeout(function(){window.location='one-page-checkout.php'},3000); 
          //return false; 
         } 
         else 
         { 
          $("#reg_message").slideUp(); 
          $("#reg_message").slideDown().html(html); 

         } 
        } 
       } 
      ); 

Answer 3

がsubmitHandler

検証プラグインの

$("form").validate({ 
    rules: { 
     email: { 
     required: true, 
     email: true, 
     remote: "http://localhost:3000/inputValidator" 
     } 
    }, 
    submitHandler:function(form){ 

      $.ajax({....}) 
    } 

    }); 

にあなたのAJAXを入れてみてくださいくださいがためdebug:true

Answer 4

を使用しますインスタントソリューションの使用が必要 "https://jsfiddle.net/et7qcrye/

<input type="text" name="name" id="name" class="NewsLetter1" required/>