Question

我知道这里已经提出了这个问题，并且有很多例子我都遵循这个例子：EXAMPLE但对我来说验证不起作用。有人可以告诉我我做错了什么。在我的主页上，如果我点击一个添加按钮，它会显示一个像这样的引导模式：

   $(document).on("click", ".homepageAdd", function () {
              $('#modal-dialog').modal("show");
          });

单击添加按钮后，将出现他的模态，其中包含3个输入字段。

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header btn-add">
            <h4 class="modal-title " id="myModalLabel">Add</h4>
        </div>
        <div class="modal-body">
            <form id="validation">
                <div class="col-md-3">
                    <strong>Name:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control ref" type="text" required name="name" /><br />
                </div>
                <div class="col-md-3">
                    <strong>SName:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control address" type="text" required name="sname" /><br />
                </div>
                <div class="col-md-3">
                    <strong>Address:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control postcode" type="text" required name="address" /><br />
                </div>

            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary AddButton">Add</button>

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

在我的Jquery中，我正在验证这样的字段：但是当我点击Add按钮时没有任何反应？

  $('.AddButton').click(function () {
        $('form').validate({
            rules: {
                name: {
                    required: true
                },
                sname: {
                    required: true
                }

            },
            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorElement: 'span',
            errorClass: 'help-block',
            errorPlacement: function (error, element) {
                if (element.parent('.input-group').length) {
                    error.insertAfter(element.parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
      });

其他验证方法没问题。

Answer 1

它不起作用，因为您在表单validate后实例化submit插件。它应该在加载模态时完成，如下所示：

$(document).on("click", ".homepageAdd", function () {
    $('#modal-dialog')
        .on('show.bs.modal', function (e) {
            $('form').validate({
                rules: {
                    name: {
                        required: true
                    },
                    sname: {
                        required: true
                    }
                },
                highlight: function (element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorElement: 'span',
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        })
   .modal("show");
});

如果验证失败，则表单的submit事件将被停止，或者如果表单根据您提供的规则有效，则允许继续。

Answer 2

好的，我认为这是问题所在：

$（ '＃模态-对话框'）模态（ “播放”）。模态对话框不是ID而是类，请尝试以下代码，希望这次它可以工作：

模态代码

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header btn-add">
            <h4 class="modal-title " id="myModalLabel">Add</h4>
        </div>
        <div class="modal-body">
            <form id="validation">
                <div class="col-md-3">
                    <strong>Name:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control ref" type="text" required name="name" /><br />
                </div>
                <div class="col-md-3">
                    <strong>SName:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control address" type="text" required name="sname" /><br />
                </div>
                <div class="col-md-3">
                    <strong>Address:</strong>
                </div>
                <div class="col-md-9">
                    <input class="form-control postcode" type="text" required name="address" /><br />
                </div>

            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary AddButton">Add</button>
        </div>
    </div>
  </div>
</div>

jQuery代码：

$(function() {
    $('form').validate({
        rules: {
            name: {
                required: true
            },
            sname: {
                required: true
            }

        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

    // You need to add the following event handler to the ".AddButton" button

    $('.AddButton').click(function () {
        $('form').submit();
    });

    $(document).on("click", ".homepageAdd", function () {
        $('#mymodal').modal("show");
    });
});

Jquery如何验证输入字段

2 个答案: