使用 jquery 插件验证器验证具有 as bootstrap 模态的表单的正确方法是什么

Question

我正在尝试验证 bootstrap 模态框内的表单，但是当加载页面时，插件中的验证函数找不到该表单，因为它已被模态框隐藏 class。我如何在表单随模态消失之前验证表单。当我单击操作以打开模式时，我尝试使用 validate() 但当我尝试提交时，我不断收到以下错误消息： TypeError: $element[0] 未定义 这是我在单击 "Save changes" 按钮时用来验证的代码 (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

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

Answer 2

您的代码...

$('#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 验证插件无法处理不包含唯一 name 属性的元素，因为这是此插件跟踪所有内容的方式。

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

使用 jquery 插件验证器验证具有 as bootstrap 模态的表单的正确方法是什么

What is the proper way to validate a form with as bootstrap modal using jquery plugin validator

jquery

modal-dialog

jquery-validate

twitter-bootstrap