2016-09-29 19 views
0

フォームの検証は正しく機能していますが、値を送信するとprocess.phpファイルには送信されません。送信ボタンをクリックしている間は何も起こっていません。私を助けてください。私はjqueryを初めて使っています。Jqueryの検証は正常に機能していますが、フォームは送信されません。

 <script> 
      $("#myform").validate({ 
       debug: true, 
         errorClass:'error help-inline', 
         validClass:'success', 
         errorElement:'span', 
         highlight: function (element, errorClass, validClass) { 
         $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

         }, 
         unhighlight: function (element, errorClass, validClass) { 
           $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
         }, 
       rules: { 
        name: "required", 
        city: "required", 
        age: "required", 
        email: { 
          required: true, 
          email: true 
        }, 

        phone: "required", 

        }, 
       messages: { 
        name: "name required", 
        city: "city required", 
        age: "age required", 
        email: { 
         required: "email required", 
         email: "wrong format" 
        }, 

        phone: "10 digit mobile" 


       }, 
       submitHandler: function(form) { 
       form.submit(); 
       } 
      }); 
     </script> 
    <!-- html code for the form is --> 
       <form class="common" id="myform" method="post" action="process.php"> 
        <div class="block2"> 
         <div class="textclass"> 
          <input type="text" class="required " name="name" id="name" placeholder="Name*" required /> 
         </div> 
        </div> 
        <div class="block3"> 
         <div class="textclass"> 
          <input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/> 
         </div> 
        </div> 
        <div class="block4"> 
         <div class="textclass"> 
          <input type="text" class="required city " name="city" id="city" placeholder="City*" required/> 
         </div> 
        </div> 
        <div class="block6"> 
         <div class="textclass"> 
          <input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/> 
         </div> 
        </div> 
        <div class="block8"> 
         <div class="textclass"> 
          <input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/> 
         </div> 
        </div> 
        <div class="submitclass"> 
         <input type="submit" id="submit" value="submit" name="submit"> 
        </div> 
       </form> 
+0

だけ、 submitHandlerこれらの行を削除します機能(フォーム){ form.submitを(); } – JYoThI

答えて

1

フォームにname = "submit"またはid = "submit"がないことを確認してください。送信ボタンの名前とIDを削除するか、他のものに変更してください。それは動作します...テスト済み... id="submit"またはname = "submit"を持つ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
<script> 
    $(document).ready(function(){ 
     $("#myform").validate({ 
       debug: true, 
         errorClass:'error help-inline', 
         validClass:'success', 
         errorElement:'span', 
         highlight: function (element, errorClass, validClass) { 
         $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 

         }, 
         unhighlight: function (element, errorClass, validClass) { 
           $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
         }, 
       rules: { 
        name: "required", 
        city: "required", 
        age: "required", 
        email: { 
          required: true, 
          email: true 
        }, 

        phone: "required", 

        }, 
       messages: { 
        name: "name required", 
        city: "city required", 
        age: "age required", 
        email: { 
         required: "email required", 
         email: "wrong format" 
        }, 

        phone: "10 digit mobile" 
       }, 
       submitHandler: function(form) { 
        alert('submitted'); 
        console.log(form) 
       form.submit(); 
       } 
      }); 
    }) 

     </script> 
    <!-- html code for the form is --> 
       <form class="common" id="myform" method="post" action="process.php"> 
        <div class="block2"> 
         <div class="textclass"> 
          <input type="text" class="required " name="name" id="name" placeholder="Name*" /> 
         </div> 
        </div> 
        <div class="block3"> 
         <div class="textclass"> 
          <input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/> 
         </div> 
        </div> 
        <div class="block4"> 
         <div class="textclass"> 
          <input type="text" class="required city " name="city" id="city" placeholder="City*" required/> 
         </div> 
        </div> 
        <div class="block6"> 
         <div class="textclass"> 
          <input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/> 
         </div> 
        </div> 
        <div class="block8"> 
         <div class="textclass"> 
          <input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/> 
         </div> 
        </div> 
        <div class="submitclass"> 
         <input type="submit" value="submit" > 
        </div> 
       </form> 
+0

ありがとうございます。私が望むように働いています。ありがとう – Ravin

+0

あなたが提案したようにサブミット名を削除しました。しかし、どのように私はprocess.phpでアクションを実行するために提出のためのチェックを適用することができます。 – Ravin

+0

process.phpファイルのチェックインを追加しますか? –

0

が有効な形式ではありません。私はちょうどそれらを置き換え、それをチェックアウトします。

$("#myform").validate({ 
 
       debug: true, 
 
         errorClass:'error help-inline', 
 
         validClass:'success', 
 
         errorElement:'span', 
 
         highlight: function (element, errorClass, validClass) { 
 
         $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass); 
 

 
         }, 
 
         unhighlight: function (element, errorClass, validClass) { 
 
           $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
 
         }, 
 
       rules: { 
 
        name: "required", 
 
        city: "required", 
 
        age: "required", 
 
        email: { 
 
          required: true, 
 
          email: true 
 
        }, 
 

 
        phone: "required", 
 

 
        }, 
 
       messages: { 
 
        name: "name required", 
 
        city: "city required", 
 
        age: "age required", 
 
        email: { 
 
         required: "email required", 
 
         email: "wrong format" 
 
        }, 
 

 
        phone: "10 digit mobile" 
 

 

 
       }, 
 
       submitHandler: function(form) { 
 
        alert('your form is WORKING NOW'); 
 
        console.log(form) 
 
       form.submit(); 
 
       } 
 
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> 
 
<form class="common" id="myform" method="post" action="process.php"> 
 
        <div class="block2"> 
 
         <div class="textclass"> 
 
          <input type="text" class="required " name="name" id="name" placeholder="Name*" required /> 
 
         </div> 
 
        </div> 
 
        <div class="block3"> 
 
         <div class="textclass"> 
 
          <input type="email" class="required email " name="email" id="email" placeholder="E-Mail*" required/> 
 
         </div> 
 
        </div> 
 
        <div class="block4"> 
 
         <div class="textclass"> 
 
          <input type="text" class="required city " name="city" id="city" placeholder="City*" required/> 
 
         </div> 
 
        </div> 
 
        <div class="block6"> 
 
         <div class="textclass"> 
 
          <input type="text" class="" name="age" id="age" placeholder="Enter Age*" pattern="[0-9]{2}" required/> 
 
         </div> 
 
        </div> 
 
        <div class="block8"> 
 
         <div class="textclass"> 
 
          <input type="text" class="required number phone" name="phone" id="phone" pattern="[0-9]{10}" placeholder="Phone No.*" required/> 
 
         </div> 
 
        </div> 
 
        <div class="submitclass"> 
 
         <input id="submit-btn" name="submit-btn" type="submit" value="submit"> 
 
        </div> 
 
       </form>

関連する問題