jQuery validation error message placement

Question

Ok so I am using the jQuery validation plugin to check for errors on a simple form. Everything is working except the error placement. I am trying to get my error messages placed into a SPAN element just after the INPUT that contains an error. For some reason the code below is placing the error message in what seems to be a whole new LABEL element. Any idea what I am doing wrong here?

my html

    <form action="" id="contact" method="POST">
       <p>
         <label for="name">Name:</label>
         <input type="text" name="name" id="name" class="text proper"/><span class="errMsg"></span>
       </p>
       <p>
         <label for="email">* Email:</label>
         <input type="text" name="email" id="email" class="required email text"/><span class="errMsg"></span>
       </p>
       <p>
         <label for="extra">*Question:</label>
         <textarea name="onlyText" id="onlyText" class=""></textarea><span class="errMsg"></span>
       </p>

       <button type="submit" id="send">Send Now</button>
       <div id="results"></div>
    </form>

my jQuery

    <script>
      jQuery(document).ready(function($){           
        $.validator.addMethod("regex",function(value, element, regexp) {
         var check = false;
         var re = new RegExp(regexp);
         return this.optional(element) || re.test(value);
        },
          "No special Characters allowed here. Use only upper and lowercase letters (A through Z; a through z), numbers and punctuation marks (. , ; ? ' ' \" -  ~ ! @ $ % ^ & * (     ) _ + / < > { } )"
        );
        $("#contact").validate({
         rules: {
            onlyText:{
              required: true,
              maxlength: 8000,
              regex: /^[0-9A-Za-z\s`~!@$%^&*()+{}|;'",.<>\/?\\-]+$/
            },
            name:{
              required: false,
              maxlength: 75,
              regex: /^[0-9A-Za-z\s`~!@$%^&*()+{}|;'",.<>\/?\\-]+$/
           }
         } , 
          errorPlacement: function(error, element) {
          error.appendTo( element.next() );  //* THIS IS WHERE I AM HAVING TROUBLE WITH
     });
     });
   </script>

You have a few errors in your javascript, so I attempted some cleanup here: jsfiddle.net/XNQVr — Robb
– Robb, Commented Oct 29, 2013 at 20:19

omma2289 · Accepted Answer · 2013-10-29 20:21:33Z

9

You can avoid the hassle and use the errorElement and errorClass options to have the plugin add the correct element for you:

$("#contact").validate({
    errorElement: 'span',
    errorClass: 'errMsg',
    rules: {
            onlyText:{
              required: true,
              maxlength: 8000,
              regex: /^[0-9A-Za-z\s`~!@$%^&*()+{}|;'",.<>\/?\\-]+$/
            },
            name:{
              required: false,
              maxlength: 75,
              regex: /^[0-9A-Za-z\s`~!@$%^&*()+{}|;'",.<>\/?\\-]+$/
           }
         } 
    });

answered Oct 29, 2013 at 20:21

omma2289

54.7k8 gold badges66 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Austin Over a year ago

Thank you so much. You have no idea how long I have been trying to figure that out!

omma2289 Over a year ago

@Austin You're welcome, don't forget to upvote/accept this answer if it was helpful to you

rogMaHall · Accepted Answer · 2013-10-29 20:21:10Z

6

The jQuery Validation plugin (link to validate()) gives you the option to specify what tag you want to use for the error message:

errorElement: "span"

Without specifying this option, validate() will default to a label.

answered Oct 29, 2013 at 20:21

rogMaHall

6914 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery validation error message placement

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related