Question

我不确定为什么要提交此表单。我已经复制了其他示例中的代码并将其替换为我的内容，但即使我已经输入return false

，它也会继续提交表单

当选择端口ICMP时，它不会验证其他规则并提交表单。

$("form[name='frmAddCMRow']").validate({
  /*
    showErrors: function(errorMap, errorList) {
      $.each(this.successList, function(index, value) {
        $(value).popover('hide');
      });
      $.each(errorList, function(index, value) {
        var _popover = $(value.element).popover({
          trigger: 'manual',
          placement: 'top',
          content: value.message,
          template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"></div></div></div>'
        });
        _popover.data('bs.popover').options.content = value.message;
        $(value.element).popover('show');
      });
    },
    */
  submitHandler: function() {

    var formdata = $('form').serialize();
    console.log(formdata);

    return false;

  },
  rules: {
    src: {
      required: true,
      messages: {
        required: "Please enter Source IP",
      }
    },
    dst: {
      required: true,
      messages: {
        required: "Please enter Destination IP",
      }
    },
    ports: {
      required: function() {
        return $("form[name='frmAddCMRow'] select[name='protocol']").val() != "ICMP";
      },
      messages: {
        required: "Please enter Ports",
      }
    },
  },
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form id="frm_rename_commsmatrix" name="frm_rename_commsmatrix" method="post" action="">
  <input id="comms_matrix_id" type="hidden" name="comms_matrix_id" value="204">
  <input type="hidden" name="service_id" id="service_id" value="3">
  <div id="myModalForm" class="modal fade bs-example-modal-lg" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">x</button>
          <h4 class="modal-title">Update Form</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger hide"><a href="#" class="close" data-dismiss="alert" aria-label="close">x</a></div>
          <div class="row">
            <input type="hidden" name="id" id="id">
            <input type="hidden" name="status" id="status">
            <div class="col-xs-4">
              <fieldset class="scheduler-border">
                <legend class="scheduler-border">Source</legend>
                <div class="form-group row">
                  <label for="src" class="col-sm-3 col-form-label">Source</label>
                  <div class="col-sm-9">
                    <input type="input" class="form-control" name="src" id="src" placeholder="Source">
                  </div>
                </div>
                <div class="form-group row">
                  <label for="src_desc" class="col-sm-3 col-form-label">Hostname</label>
                  <div class="col-sm-9">
                    <input type="input" class="form-control" name="src_desc" id="src_desc" placeholder="Hostname">
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="col-xs-4">
              <fieldset class="scheduler-border">
                <legend class="scheduler-border">Destination</legend>
                <div class="form-group row">
                  <label for="dst" class="col-sm-3 col-form-label">Dest</label>
                  <div class="col-sm-9">
                    <input type="input" class="form-control" name="dst" id="dst" placeholder="Dest">
                  </div>
                </div>
                <div class="form-group row">
                  <label for="dst_desc" class="col-sm-3 col-form-label">Hostname</label>
                  <div class="col-sm-9">
                    <input type="input" class="form-control" name="dst_desc" id="dst_desc" placeholder="Hostname">
                  </div>
                </div>
              </fieldset>
            </div>
            <div class="col-xs-4">
              <div class="form-group row">
                <label for="protocol" class="col-sm-3 col-form-label">Protocol</label>
                <div class="col-sm-9">
                  <select class="form-control" name="protocol" id="protocol">
                    <option value="IP">IP</option>
                    <option value="IP">IP</option>
                    <option value="TCP">TCP</option>
                    <option value="TCP">TCP</option>
                    <option value="UDP">UDP</option>
                    <option value="UDP">UDP</option>
                    <option value="ICMP">ICMP</option>
                    <option value="ICMP">ICMP</option>
                  </select>
                </div>
              </div>
              <div class="form-group row">
                <label for="ports" class="col-sm-3 col-form-label">Port</label>
                <div class="col-sm-9">
                  <input type="input" class="form-control" name="ports" id="ports" placeholder="Ports">
                </div>
              </div>
              <div class="form-group row">
                <label for="remarks" class="col-sm-3 col-form-label">Remarks</label>
                <div class="col-sm-9">
                  <input type="input" class="form-control" name="remarks" id="remarks" placeholder="Remarks">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success"><i class="fa fa-floppy-o" aria-hidden="true"></i>submit</button>
          <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-ban" aria-hidden="true"></i>cancel</button>
        </div>
      </div>
    </div>
  </div>
</form>

Answer 1

选择器name中表单的$("form[name='frmAddCMRow']")与实际表单的name frm_rename_commsmatrix不匹配。因此，jQuery Validate插件未在表单上初始化。

请尝试$("form[name='frm_rename_commsmatrix']")。

jquery验证阻止表单提交

1 个答案: