Jqueryを使用してフォームを検証する

Question

jqueryの投稿機能を使用して送信しているフォームを検証する方法がわかりません。

私がしたいのは、 'bill_cost'フィールドが完了している場合にのみフォームを送信することです。フォームはの検証コードなしで動作します。私はjquery live form validation pluginを使用しようとしていますが、何らかの理由でそれが動作していません。誰かが何が間違っているか教えてください/どこで認証コードを置くべきですか？ありがとう。

フォーム

 <form class="form-inline" action="" id="myform" form="" method="post"> 

<!-- Text input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="bill_cost"></label> 
    <div class="col-md-8"> 
    <input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required> 

    </div> 
</div> 


<!-- Button --> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="submit1"></label> 
    <div class="col-md-4"> 
    <button id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button> 
    </div> 
</div> 
</form> 

のjQuery

<script> 
$(document).ready(function(){ 
$("#message").hide(); 
$("#submitButtonId").on("click",function(e){ 
    e.preventDefault(); 

var formdata = $(this.form).serialize(); 
    $.post('../php_includes/insert.php', formdata, 
      function(data){ 
       $("#message").html(data); 
       $("#message").fadeIn(500); 
    $("#message").fadeOut(500); 

       //Validate the form 
     jQuery(function(){ 
       jQuery("#bill_cost").validate({ 
        expression: "if (VAL) return true; else return false;", 
        message: "Please enter the Required field" 
       }); 

       jQuery('.myform').validated(function(){ 

       }); 
      }); 
      //End of validation 


//Reset Form 
$('#myform')[0].reset(); 
      }); 
return false; 

}); 
}); 
</script> 

Answer 1

フォームのポストを防止することは何もありません。ポストコードを有効な機能に移動します。

編集 - 検証して送信する方法を示すコードを追加する。また、検証コードがフォーム提出イベントに自動フックするので、ボタンにtype = "submit"を追加しました。

$(document).ready(function(){ 
    $("#message").hide(); 

    //Define your validation rules. 
    $("#bill_cost").validate({ 
    expression: "if (!isNaN(VAL) && VAL) return true; else return false;", 
    message: "Should be a number" 
    }); 

    //Define the event that will occur when the entire form is validated (on form submission) 
    $('#myform').validated(function(){ 
    var formdata = $('#myform').serialize(); 

    //Post form data 
    $.post('#', formdata, function(data){ 
     //Process post response 
     $("#message").html(data); 
     $("#message").fadeIn(500); 
     $("#message").fadeOut(500); 
    }); 

    //Reset Form 
    $('#myform')[0].reset(); 
    }); 

}); 

Answer 2

はこのような何かを試してみてください：ここではvalidatedイベントが$.postを呼び出して、そのフォームが検証するときにのみ実行されます。

jQuery(function(){ 
 
    $("#submitButtonId").on("click",function(e){ 
 
      e.preventDefault(); 
 

 
      var formdata = $(this.form).serialize(); 
 
      //Validate the form 
 
      jQuery("#bill_cost").validate({ 
 
        expression: "if (VAL) return true; else return false;", 
 
        message: "Please enter the Required field" 
 
      }); 
 

 
      return false; 
 

 
    }); 
 

 
    jQuery('.myform').validated(function(){ 
 
     $.post('../php_includes/insert.php', formdata, 
 
      function(data){ 
 
      $("#message").html(data); 
 
      $("#message").fadeIn(500); 
 
      $("#message").fadeOut(500); 
 

 
      //Reset Form 
 
      $('#myform')[0].reset(); 
 
      }); 
 
    }); 
 
});