Jquery表单验证不起作用？

Question

我希望有人可以用我一直在建立的一些jquery脚本来帮助我。该脚本工作并成功地将一些表单数据发布到mysql数据库。

我有的问题是我试图实现表单验证，但我无法验证工作，我怀疑我正确放置一个括号不正确的地方。我在这里发布的脚本可以工作，但表单验证不会。任何帮助不胜感激。

$(document).ready(function() { 
$("#your_results").hide(); 
$("#your_data").hide(); 
$("#submitButtonId").on("click", function(e) { 
    $('#gauge').empty(); 
    e.preventDefault(); 

    //Validate the input 

    $(function() { 
     $("#myform").validate({ 
}); 

     //Post the form if field has been completed 

     var formdata = $('#myform').serialize(); 
     $.post('php_includes/insert.php', formdata, 
      function(data) { 

       //Reset Form 

       $('#myform')[0].reset(); 
       fetchRowCount(); 
      }); 

     return false; 
    }); 
}); 

//Fetch data from server 

function fetchRowCount() { 
    $.ajax({ 
     url: 'php_includes/server.php', 
     dataType: "json", 
     success: function(data) { 
      $("#rows").html(data.rows); 
      $("#min").html(data.min); 
      $("#max").html(data.max); 
      $("#mean").html(data.total); 
      $("#last").html(data.last_entry); 

      //Show gauge once json is received from server 

      var gage = new JustGage({ 
       id: "gauge", 
       value: data.total, 
       min: data.min, 
       max: data.max, 
       title: "Sample Data" 


      }); 
      $("#your_results").fadeIn("slow"); 
      $("#your_data").fadeIn("slow"); 
      //Scroll to Gauge 
      $('html, body').animate({ 
       scrollTop: $('#results').offset().top 
      }, 'slow'); 
      $("#gauge").fadeIn(slow); 

     } 

      }); 
       } 
      }); 

myForm的

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

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


       </div> 
      </div> 
</form> 

结果显示在这里

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-12 text-center"> 
<!-- RESULTS HERE --> 
<div id="your_results"></div> 
<!-- .GAUGE HERE --> 
<div id="gauge" class="300x260px"></div> 

Answer 1

如果你正确地缩进代码的问题将变得明显：

$(function() { 
    $("#myform").validate({}); 

    //Post the form if field has been completed 

    var formdata = $('#myform').serialize(); 
    $.post('php_includes/insert.php', formdata, 
     function(data) { 

      //Reset Form 

      $('#myform')[0].reset(); 
      fetchRowCount(); 
     }); 

    return false; 
}); 

你包装一下你的验证功能在一个 $(handler)（一个JQuery对象，当传递一个函数时，变成了$(document).ready(handler);的简写。所以你在文档准备好的时候运行你的验证，而不是当你点击你的提交按钮时。