Validating my form with Jquery

Question

I'm having a bad time trying to figure out how to validate a form that I am submitting with jquery's post function.

All I want to do is to only submit the form if the 'bill_cost' field has been completed. The form works without the validation code. I am trying to use the jquery live form validation plugin but for some reason its' not working. Please can anyone tell me what's wrong / where I should place the validation code? Thanks.

The form

     <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>

The 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

There is nothing preventing your form post. Move your post code to your validated function.

Edit - Adding code to show how to validate and then submit. Also, I added a type="submit" to the button, because the validation code is auto-hooking into the form submission event.

$(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

Try something like this: Here the validated event calls the $.post, so it only runs when the form validates.

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(); 
             });
    });
});