我对jquery和bootstrap很新。我已经尝试了所有可以找到的东西。我的场景：当用户点击“提交”时，引导验证器会验证页面，如果一切正常，那么它会在我的代码隐藏中调用一个方法。我还需要合并自定义验证器。
问题是，当我点击“提交”时，验证发生但消息是灰色而不是红色。当我输入必填字段时，它会随复选框变为绿色。 但是，如果我删除其中包含自定义验证器的'validator（）'部分，则屏幕工作正常，但我显然没有自定义验证器。
我尝试了所有不同的场景，但无法让它发挥作用。任何见解或帮助将不胜感激！
我的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test2</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css" />
<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/colors.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js"></script>
<!-- /core js files -->
<!-- Bootstrap Validator -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<script src="http://1000hz.github.io/bootstrap-validator/dist/validator.min.js"></script>
<!-- /bootstrap validator -->
</head>
<body>
<!-- Main navbar -->
<div class="navbar navbar-inverse">
<h1 class="text-center">
<asp:Label ID="lblOrganizationName" runat="server" /></h1>
</div>
<!-- /main navbar -->
<!-- Page container -->
<div class="page-container">
<!-- Page content -->
<div class="page-content">
<!-- Main content -->
<div class="content-wrapper">
<!-- Content area -->
<div class="content">
<div class="row">
<form runat="server" id="frmNewAccount">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">Account Information</h5>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name: <span class="text-danger">*</span></label>
<input type="text" autofocus name="fldMainFirst" class="form-control" maxlength="15" placeholder="First Name" tabindex="1" runat="server" id="txtAccount1First" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name: <span class="text-danger">*</span></label>
<input type="text" name="fldMainLast" class="form-control" maxlength="20" placeholder="Last Name" tabindex="2" id="txtAccount1Last" runat="server" />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Secondary First Name:</label>
<input type="text" name="fldSecondaryFirst" class="form-control" maxlength="15" placeholder="Secondary First Name" tabindex="3" id="txtAccount2First" runat="server" data-secondarycompareprimary="" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Secondary Last Name: </label>
<input type="text" name="fldSecondaryLast" class="form-control" maxlength="20" placeholder="Secondary Last Name" tabindex="4" id="txtAccount2Last" runat="server" data-secondarycompareprimary="" />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-primary" id="btnSubmit" runat="server" tabindex="20" type="submit">Add Account</button>
<button class="btn btn-primary" id="btnSubmitAfterValidation" runat="server" style="display: none" type="button" onserverclick="ValidateAndSaveForm">Add Account</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- /content area -->
</div>
<!-- /main content -->
</div>
<!-- /page content -->
</div>
<!-- /page container -->
</body>
<script>
$("#btnSubmit").click(function () {
var validator = $('#frmNewAccount').data('bootstrapValidator');
validator.validate();
if (validator.isValid()) {
$("#<%=btnSubmitAfterValidation.ClientID%>").click();
}
});
$('#frmNewAccount').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtAccount1First: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your first name'
}
}
},
txtAccount1Last: {
validators: {
stringLength: {
min: 2,
},
notEmpty: {
message: 'Please supply your last name'
}
}
},
}
})
$('#frmNewAccount').validator({
custom: {
equals: function ($el) {
var matchValue = $el.data("equals")
if ($el.val() !== matchValue) {
return "Hey, that's not valid! It's gotta be " + matchValue
}
},
secondarycompareprimary: function () {
var fldFirstMain = $.trim($('#txtAccount1First').val());
var fldLastMain = $.trim($('#txtAccount1Last').val());
var fldFirstSecondary = $.trim($('#txtAccount2First').val());
var fldLastSecondary = $.trim($('#txtAccount2Last').val());
if (fldFirstMain == fldFirstSecondary && fldLastMain == fldLastSecondary) {
return "Primary & Secondary Names cannot be the same"
}
}
},
})
</script>
</html>
答案 0 :(得分：0)
试试这个样本小提琴
<form id="myform">
<input type="text" name="field1" />
<br/>
<input type="text" name="field2" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
$(document).ready(function () {
$('#myform').validate({ // initialize the plugin
rules: {
field1: {
required: true
},
field2: {
required: true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
.error {
//border: 2px solid #f00;
color:red;
}