javascript - Jquery如何验证输入字段

Question

我知道这里有人问过这个问题，并且有很多例子，我正在关注这个例子:EXAMPLE但对我来说，验证不起作用。有人可以建议我做错了什么。在我的主页上，如果我点击一个添加按钮，它会显示一个像这样的 Bootstrap 模式:

   $(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 中，我正在验证这样的字段:但是当我单击“添加”按钮时没有任何反应？

  $('.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

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

$('#modal-dialog').modal("show"); modal-dialog 不是一个 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");
    });
});