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

Question

我正在尝试验证引导模式中的表单，但是当页面加载时，插件中的验证功能找不到该表单，因为它已被 Modal 类隐藏。我如何在表单消失之前验证表单。 当我单击操作以打开模式时，我尝试使用 validate()，但是当我尝试提交时，我不断收到以下错误消息： TypeError: $element[0] is 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>

任何帮助表示赞赏。谢谢。

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

});

---

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

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

jQuery Validate 插件无法处理不包含唯一 name 属性的元素，因为这是该插件跟踪所有内容的方式。

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

Answer 2

原来问题不在于 JS，而在于第一个输入字段（收音机）。它没有属性名称和 ID，因此它破坏了验证器。