什么是使用jquery插件验证器作为引导模式验证表单的正确方法

Question

我想验证引导模式中的表单，但是当页面加载时插件中的validate函数没有找到因为它已经被Modal类隐藏了。我怎样才能验证形式，然后它与模态消失。 我已经尝试使用验证（）当我点击我的行动打开模式，但我不断收到以下错误信息，当我尝试提交： TypeError：$元素[0]是undefined这里是代码（JS ）我使用验证，当我点击“保存更改”按钮：

$('#SavePortInfo').click(function() { 
      $("#PortNumberForm").validate(); 
       var ValidStatus = $("#PortNumberForm").valid(); 

       if (ValidStatus == false) { 
        console.log('Form no GOOD'); 
       }else 
       { 
        $("#PortNumberForm").submit(); 
       } 

     }); 

这里是我的代码为我的模式

<div id="PortNumberModal" class="modal fade"> 
    <div class="modal-dialog" style="width:60%"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
       <h4 class="modal-title">Port Number Information</h4> 
      </div> 
      <div class="modal-body"> 
       <form class="form-horizontal" id="PortNumberForm" name="PortNumberForm"> 
        <fieldset> 

         <!-- Form Name --> 


         <!-- Prepended checkbox --> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-5">Acknowledge Disconnect of Previous Phone</label> 
          <div class="col-md-2"> 
           <div class="input-group"> 
    <span class="input-group-addon"> 
     <input type="checkbox" class="required"> 
    </span> 
            <input id="VOIP-PORT-5" name="VOIP-PORT-5" class="form-control required" placeholder="" type="text"> 
           </div> 

          </div> 
         </div> 

         <!-- Text input--> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-4B">CIty on Previous Phone Account</label> 
          <div class="col-md-4"> 
           <input id="VOIP-PORT-4B" name="VOIP-PORT-4B" placeholder="CIty on Previous Phone Account" class="form-control input-md required" type="text"> 
           <span class="help-block">Please enter the city from your current telephone account</span> 
          </div> 
         </div> 

         <!-- Text input--> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-4A">The First Line of the Address on my Current Phone Account</label> 
          <div class="col-md-4"> 
           <input id="VOIP-PORT-4A" name="VOIP-PORT-4A" placeholder="placeholder" class="form-control input-md required" required type="text"> 

          </div> 
         </div> 

         <!-- Text input--> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-3">The Name on my Current Phone Account</label> 
          <div class="col-md-4"> 
           <input id="VOIP-PORT-3" name="VOIP-PORT-3" placeholder="placeholder" class="form-control input-md required" required type="text"> 

          </div> 
         </div> 

         <!-- Text input--> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-2">My Current Phone Number</label> 
          <div class="col-md-4"> 
           <input id="VOIP-PORT-2" name="VOIP-PORT-2" placeholder="" class="form-control input-md required" required type="text"> 

          </div> 
         </div> 

         <!-- Text input--> 
         <div class="form-group"> 
          <label class="col-md-4 control-label" for="VOIP-PORT-4-ZIP">The Zip Code of the Address on my Current Phone Account</label> 
          <div class="col-md-4"> 
           <input id="VOIP-PORT-4-ZIP" name="VOIP-PORT-4-ZIP" placeholder="" class="form-control input-md required" required type="text"> 

          </div> 
         </div> 


        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary" id="SavePortInfo">Save changes</button> 
       </form> 
      </div> 
      <div class="modal-footer"> 

      </div> 

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

任何帮助是appreciated.thank你。

Answer 1

你的代码...

$('#SavePortInfo').click(function() { 
    $("#PortNumberForm").validate(); 
    var ValidStatus = $("#PortNumberForm").valid(); 

    if (ValidStatus == false) { 
     console.log('Form no GOOD'); 
    } else { 
     $("#PortNumberForm").submit(); 
    } 
}); 

你并不需要在click处理程序中调用.validate()。 .validate()方法只能在DOM上调用一次，准备好初始化表单上的插件。由于点击提交按钮被自动捕获，所以没有点击处理程序是，通常需要。但是，我看到你有一个type="button"，所以在这种情况下，你需要click处理程序。

只需取出.validate()方法，以便表单验证在第一次单击之前被初始化并准备就绪。此外，以便您不要重复拨打.validate()。由于对.validate()的所有后续调用都被有效忽略，因此每次单击按钮时都会不必要地运行代码。

$(document).ready(function() { 

    $("#PortNumberForm").validate(); // initialize plugin 

    $('#SavePortInfo').click(function() { // capture click and test/submit 
     var ValidStatus = $("#PortNumberForm").valid(); 

     if (ValidStatus == false) { 
      console.log('Form no GOOD'); 
     } else { 
      $("#PortNumberForm").submit(); 
     } 
    }); 

}); 

---

您还缺少name属性您checkbox ...

<span class="input-group-addon"> 
    <input type="checkbox" class="required"> 
</span> 

的jQuery验证插件无法在不包含唯一name属性，因为这是如何元件工作插件可以追踪一切。

<span class="input-group-addon"> 
    <input type="checkbox" name="foo" class="required"> 
</span> 

Answer 2

事实证明这个问题不是在JS中，而是在第一个输入字段（无线电）中。它没有属性名称和ID，因此它打破了验证器。