Simple jquery validation - custom position error message placement

Question

I am using jquery validate plugin to validate number in a form , how can i place the returned error message under the input button , i am unable to achieve,

Here is my image with the issue and what i need,pls check - https://i.sstatic.net/LsRko.png

Please suggest me how to put the error message in a custom Div under the button instead of default underneath.

Here is my code:

<section id="contact" class="content">
            <div class="container">
                <h2>Contact Form Demo</h2>
                <div class="row">
                    <div class="span12 contact-form">

                        <form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form">
                          <!--<?php $formKey->outputKey(); ?> -->
                          <fieldset>  

                              <div class="control-group">
                                <label class="control-label" for="inputPhone">Phone</label>
                                <div class="controls">
                                  <input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp; area code">
                                </div>
                              </div>


                              <div class="control-group">
                                <div class="controls">
                                  <button type="submit" value="Send" class="btn" id="btn-place">Send!</button>
                                </div>
                                <div >place here</div>
                              </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </section>

        <!-- javascript -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>



        <script>

            // contact form validation
            $(document).ready(function(){

             $('#contact-form').validate(
                 {
                  rules: {
                    name: {
                      minlength: 3,
                      required: true
                    },
                    email: {
                      required: true,
                      email: true
                    },
                    phone: {
                      minlength: 11,
                      required: false,
                      number: true
                    },
                    subject: {
                      minlength: 3,
                      required: true
                    },
                    message: {
                      minlength: 20,
                      required: true
                    }
                  },
                            highlight: function(label) {
                    $(label).closest('.control-group').addClass('error');
                  },
                  success: function(label) {
                    label
                      .text('OK!').addClass('valid')
                      .closest('.control-group').addClass('success');
                  }
                 });

                // contact form submission, clear fields, return message,script no shown here

        </script>

Try to limit your code to the relevant bits (in this case you probably only need to show us the rules for phone) — Ryley
– Ryley, Commented Jun 25, 2013 at 20:41

Ryley · Accepted Answer · 2014-05-26 20:10:56Z

20

All you need to do is specify the errorLabelContainer in your options and specify the div you want the errors to go into:

$('#contact-form').validate({
     //all your other options here
        errorLabelContainer: '#errors'
});

Then just make sure you specify that your place here div has the id errors like this:

<div id="errors"></div>

See a working example here: http://jsfiddle.net/ryleyb/aaEFQ/ (note that I also specified the wrapper option, which you'll probably want if there are multiple errors).

edited May 26, 2014 at 20:10

answered Jun 25, 2013 at 20:44

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

3 Comments

CodeGeeek Over a year ago

I Tackled the issue in a Different manner using: errorPlacement

CodeGeeek Over a year ago

Can you suggest me how to ajax POST LATER only after VALIDATION ?

Ryley Over a year ago

use the submitHandler option of Validate - it is only triggered when the form is valid.

Jakuje · Accepted Answer · 2015-11-21 14:17:33Z

-1

errorPlacement: function(error, element) {
  if((element.attr('name') === 'color[]')){
    error.appendTo("div#errors");  
  }
  else if(element.attr('name') === 'font[]' ){
    error.appendTo("#font-error");  
  }
  else{
    element.before(error);
  }
}

edited Nov 21, 2015 at 14:17

Jakuje

26.2k12 gold badges72 silver badges80 bronze badges

answered Nov 21, 2015 at 13:51

farhan Asad

1

3 Comments

farhan Asad Over a year ago

color[]' or font[] is the name of checkboxes div#errors or #font-error is div where u want to show your custom error message

Teepeemm Over a year ago

You should edit that information into the post, not leave it as a comment.

Kevin Brown-Silva Over a year ago

Welcome to Stack Overflow! While this answer is probably correct and useful, it is preferred if you include some explanation along with it to explain how it helps to solve the problem. This becomes especially useful in the future, if there is a change (possibly unrelated) that causes it to stop working and readers need to understand how it once worked.

Collectives™ on Stack Overflow

Simple jquery validation - custom position error message placement

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related