我不确定为什么要提交此表单。我已经复制了其他示例中的代码并将其替换为我的内容,但即使我已经输入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>
答案 0 :(得分:0)
选择器name
中表单的$("form[name='frmAddCMRow']")
与实际表单的name
frm_rename_commsmatrix
不匹配。因此,jQuery Validate插件未在表单上初始化。
请尝试$("form[name='frm_rename_commsmatrix']")
。