I'm using the jQuery Validation plugin and want to disable the or element/container it creates to display the error 'message'.
Basically, I want the input element with the error to have the error class but NOT create an additional element containing the error message.
Is this possible?
I have just thought of a CSS workaround, but it doesn't really fix the fact that the element is still being created?
<style>
label.simpleValidationError {display: none !important; }
</style>
Use the Validator errorPlacement option with an empty function:
$("selector").validate({ errorPlacement: function(error, element) {} });
This effectively places the error messages nowhere.
You could set the showErrors option to a function that only performs element highlighting:
$("selector").validate({
showErrors: function() {
if (this.settings.highlight) {
for (var i = 0; this.errorList[i]; ++i) {
this.settings.highlight.call(this, this.errorList[i].element,
this.settings.errorClass, this.settings.validClass);
}
}
if (this.settings.unhighlight) {
for (var i = 0, elements = this.validElements(); elements[i]; ++i) {
this.settings.unhighlight.call(this, elements[i],
this.settings.errorClass, this.settings.validClass);
}
}
}
});
That relies heavily on the validation plugin's internals, though, so it's probably not safe. The best would be for the plugin to expose a defaultHighlightElements() method the same way it does for defaultShowErrors(), but it's not the case (yet).
You can also use this code:
jQuery.validator.messages.required = "";
$("selector").validate();
I also wanted to hide the error messages and to turn my input fields and textarea red, on error.
Here's a small example :
and fully working code in case jsfiddle breaks ;)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript' src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<style type='text/css'>
.error {
border: 1px solid red;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$( "#email_form" ).validate({
rules: {
email: {
required: true,
email: true
}
}, highlight: function(input) {
$(input).addClass('error');
},
errorPlacement: function(error, element){}
});
});//]]>
</script>
</head>
<body>
<form name="form" id="email_form" method="post" action="#">
<div class="item" style="clear:left;">
<label>E Mail *</label>
<input id="femail" name="email" type="text">
</div>
Type invalid email and press Tab key
</form>
</body>
</html>
I also had the same issue. I didn't want error messages, just the highlights of the form inputs that needed attention.
The messages were already empty like <?php $msj='""';?> but still created the error elements/containers after the labels..
So to quickly stop this from happening I edited the jquery.validate.js file by commenting out the only line which states label.insertAfter(element); around line 697 +/-..
It's just a noob's workaround ;) but it did it!
As I am using CSS to style the label.valid, label.error in jquery validate, this button cleared all the errors and left and data in the form fields in tact.
<button onclick="$('label.error').css('display', 'none');return false;">Clear Error </button>
Easiest solution with only CSS:
label.valid {
display: none;
}
Possibly a far simpler and semantically preferable solution would be to use css
label.error {
position:absolute;
left:20000px;
top:0;
}
input.error {
border:red 1px;
}
No JS required, easier to manage and someone with a screen reader will actually have some indication that they have missed something
I had a project that developed by another validation library, I wanted to add validate library to use its features for check the form is valid or not (used validation library doesn't have that feature)
My soloution was : I just added validate library by its CDN
and use validate feature on click :
$(document).on('click','#buttonID',function(){
var form = $( "#formID" );
form.validate();
console.log(form.valid());
});
and tried to hide error messages that raised by jquery validate by adding CSS code:
label.error{
display: none!important;
}
You can add an onfocus and an onkeyup that would remove the error message.
$("selector").validate({
onkeyup: false,
onfocusout: false
});
