jQuery Validation - Hide Error Message_问答_开发者

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 t开发者_StackOverflowo 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 can also use this code:

jQuery.validator.messages.required = "";

$("selector").validate();

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).

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>

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
});

jQuery Validation - Hide Error Message

精彩评论

关注公众号

热门标签

图文推荐

jQuery Validation - Hide Error Message

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：