jQuery如何验证输入字段

user3812613 发表于 Dev

用户名

我知道这里已经问过这个问题了，这里有很多例子我在关注这个例子：例子但是对我来说验证是行不通的。有人可以建议我我在做什么错。在我的主页上，如果我单击添加按钮，它将向我显示一个引导程序模式，如下所示：

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

其他验证方法也可以。

穆罕默德·阿夫塔布·乌丁

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

$（'＃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");
    });
});