This question is closely related to: http://stackoverflow.com/questions/29759459/how-to-use-custom-validators-of-github-com-1000hz-bootstrap-validator
I'm basically trying to get the custom option to perform some extra validation on a field (beyond the usual data-minlength, required, etc).
The validator works fine under normal circumstances - I've included a test case to demonstrate what I'm trying to do. It never gets to execute the console.log('pwc...'); line.
I'd appreciate any pointers.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div>
<div id="s1">
<form id="s1Form" data-toggle="validator">
<input data-pwc="pwc" data-error="Please enter a valid password." data-minlength="6" maxlength="32" id="password" placeholder="Password *" value="123456" required>
<button id="btn"></button>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/validator.js"></script>
<script>
$(document).ready(function() {
$('#btn').on('click', function(e) {
e.preventDefault();
$('#s1 #s1Form').validator({
custom: {
pwc: function(el) {
// never gets executed:
console.log('pwc.....');
// tests here, if error then raise error and return false
}
}
});
if ($('#s1Form').validator('validate').has('.has-error').length) {
console.log('error');
return false;
}
console.log('proceed...');
});
});
</script>
</body>
</html>