Question

我正在尝试使用jQuery插件Validate实现一些表单验证，但无法开始工作。表单从

调用

<!-- Div for Add Row Modal Box  -->
   <div id="dialog-form" title="Create new user">
      <p class="validateTips">Some form fields (*) are required.</p>

     <form id="addForm" title="Add New Record">&nbsp;<br/>
       <fieldset>
        <label for="fname">First Name:</label><input type="text" id ="fname" name="FName_val" maxlength="12" size="12"  placeholder="*" required class="input_style" rel="0" /><br /><br />
        <label for="lname">Last Name:</label><input type="text" id ="lname" name="LName_val" maxlength="45" size="12" placeholder="*" required class="input_style" rel="1" /><br /><br />
        <label for="etype">Equipment Type:</label><input type="text" id ="etype" name="Equipment_Borrowed_val" maxlength="50" placeholder="*" required size="14" class="input_style" rel="2" /><br /><br />
        <label for="stag">Service Tag:</label><input type="text" id ="stag" name="Service_Tag_val" maxlength="6" size="6"  class="input_style" rel="3"/><br />
        <label for="input_select"><br />
         Equipment Status:</label> <select name="Borrwd_Rsn_val" id="input_select" rel="4">
               <option value="Borrowed" selected="selected">Borrowed</option>
               <option value="In for Repair">In for Repair</option>
               <option value="Replacement" >Replacement</option>
               <option value="Returned" >Returned</option>
               <option value="Other">Other</option>
             </select>
         <br />
         <br />
         <label for="dtaken">Date Taken:</label><input type="text" id ="dtaken" name="Date_Taken_val" autocomplete="on" placeholder="dd/mm/yy" class="input_style" rel="5"/><br /><br />

         <label for="ereturn">Expected<br/>Return Date:</label><input type="text" id ="ereturn" name="Exp_Date_Return_val" placeholder="dd/mm/yy" autocomplete="on" class="input_style" rel="6" /><br />
          <br />
          <br/>
         <label for="comments"></label><textarea id ="comments" name="Comments_val" placeholder="Add Comments Here" maxlength="255" cols="40" rows="4"  wrap=HARD class="input_style" rel="7"></textarea>
          <br />
          <br />
        </fieldset>
       </form>
    </div> 
    <script>
   $(document).ready(function() {

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

   </script>

然后我想按下＆＃34;添加行＆＃34;来自jQuery对话框按钮的按钮：

buttons: {
         "Add a Row": function() {
             var dTable = $('#the_table').DataTable();
             //Use DataTables API row.add() method to add row client-side
             dTable.row.add([
                $('#fname').val(),
                $('#lname').val(),
                $('#etype').val(), 
                $('#stag').val(),
                $('#input_select').val(),
                $('#dtaken').val(),
                $('#ereturn').val(),
                $('#comments').val()       
              ]).draw();

              //Ajax for server-side portion of the add row

              var form = $( "#addForm" );
              form.validate();
              alert( "Valid: " + form.valid() );

              if(form.valid()) {
                //ajax here

               $.ajax({
                  url: "addData.php",
                  method: "POST",
                  data: { FName_val :  $('#fname').val(),
                          LName_val :  $('#lname').val(),
                          Equipment_Borrowed_val : $('#etype').val(),
                          Service_Tag_val : $('#stag').val(),
                          Borrwd_Rsn_val : $('#input_select').val(),
                          Date_Taken_val : $('#dtaken').val(),
                          Exp_Date_Return_val :  $('#ereturn').val(),
                          Comments_val :  $('#comments').val() 
                         },
                  success: function(result){
                   }     
                });
               dialog.dialog( "close" );
             }
            },

从阅读文档和示例中，一旦我点击进出名字字段，我就会收到警告，而不输入任何说明即使没有“对话框”按钮中的代码来处理提交也需要至少两个字符的内容。控制台中没有任何错误，也没有任何错误。在没有表单中的提交按钮的情况下，有人可以看到我可能缺少的关于如何实现此验证的内容。谢谢......

更新：每个建议的更正代码仍然不行。

Answer 1

然后你需要调用.valid（） http://jsfiddle.net/ar4m2q9s/8/

http://jqueryvalidation.org/valid/

buttons: {
         "Add a Row": function() {
            var form = $( "#addForm" );
            form.validate();
            var isValid = form.valid();
            console.log("Page Valid: " + isValid)

            if(isValid)
            {
               //all other button code here.
            }

}

验证不与Dialog Modal一起使用的jQuery插件

1 个答案: