Question

我正在尝试验证引导模式中的表单，但是当加载页面时，插件中的validate函数找不到表单，因为它已被Modal类隐藏。如何在模式消失之前验证表单。我尝试使用validate（）当我点击我的操作打开模态但我在尝试提交时不断收到以下错误消息： TypeError：$ element [0]未定义以下是我点击“保存更改”按钮时用于验证的代码（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();
    }
});

您无需在.validate()处理程序中调用click。 .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 Validate插件无法处理不包含唯一name属性的元素，因为此插件会跟踪所有内容。

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

Answer 2

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

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

2 个答案: