Menu
I am using jquery validation plug-in for validating the form inputs. I am able to validate the input and error message is shown properly. But the issue is , the element is not highlighted with red color. I have analysed and found the issue is with has-error class.
The error class is only set when I am putting the form-controls inside a div with class form-group. Otherwise has-error class is not at all set . Please advice on this.
Thanks.
JS and HTML :
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="bootstrap.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script>
// When the browser is ready...
$(function() {
// Setup form validation on the #register-form element
$("#register-form").validate({
// Specify the validation rules
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
// Specify the validation error messages
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
highlight: function (element, errorClass) {
$(element).closest('.form-control').addClass('has-error');
//$(element).addClass('has-error');
},
unhighlight: function (element, errorClass) {
$(element).closest(".form-control").removeClass("has-error");
},
submitHandler: function(form) {
cosole.log("valid >>"+form.isValid());
form.submit();
},
});
});
</script>
</head>
<body>
<h1>Register here</h1>
<!-- The form that will be parsed by jQuery before submit -->
<div>
<form action="" method="post" id="register-form" novalidate="novalidate">
<label>First Name</label><input class="form-control" type="text" id="firstname" name="firstname" /><br />
<label>Last Name</label><input class="form-control" type="text" id="lastname" name="lastname" /><br />
<label>Email</label><input class="form-control" type="text" id="email" name="email" /><br />
<label>Password</label><input class="form-control" type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"> <button type="submit" name="customName" id="UpdateButton" value="MySubmit" class="btn btn-sm btn-bitbucket"> <i id="setHubTypeTag" class="demo-icon icon-cw-1 fa-fw" style="font-size:1.3em;"> </i> Update</button></div>
</form>
<div>
<script>
$(document).ready(function () {
$('#UpdateButton').click(function () {
console.log("test");
});
});
</script>
</body>
</html>
929
You need to override some defaults in the plugin:
$.validator.setDefaults({
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);
}
}
});
The error class is only set when I am putting the
form-controlsinside adivwith classform-group. Otherwisehas-errorclass is not at all set.
Nothing is happening because your DOM traversal strategy seems to be incorrect (based on the markup shown in the OP).
$(element).closest('.form-control').addClass('has-error');
The element represents the input element being validated. The closest method is looking for the "closest" element with the form-control class. However, in your markup... the element itself contains the form-control class, therefore nothing is being targeted at all.
Try this...
$(element).addClass('has-error');
which will add the has-error class to the element itself.
Since the plugin automatically adds and removes the error class from the element being validated, it does not seem like you even need the highlight and unhighlight over-rides. Simply change the default error class to has-error instead of trying to use highlight and unhighlight.
$("#register-form").validate({
errorClass: "has-error",
....
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
