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 wi
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
You can also use this code:
jQuery.validator.messages.required = "";
$("selector").validate();
Use the Validator errorPlacement option with an empty function:
$("selector").validate({ errorPlacement: function(error, element) {} });
This effectively places the error messages nowhere.
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!
I also wanted to hide the error messages and to turn my input
fields and textarea
red, on error.
Here's a small example :
http://jsfiddle.net/MFRYm/51/
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>
Easiest solution with only CSS:
label.valid {
display: none;
}