Question

I have a form that i am validating using jquery the validation plugin. What im trying to do is to have the errors displayed in a seperate div called “error” could anybody help me with this?

The form code is here:

<form name="contactform" id="contactform" method="post" action="/contactform/send_form_email.php">

           <label for="your_name">YOUR NAME</label>
           <input type="text" name="your_name" id="your_name" class="fulltext"/>

           <label for="type">TYPE OF EVENT</label>
           <input type="text" name="type" id="type" class="fulltext"/>

           <label for="guests">GUESTS</label>
           <input type="text" name="guests" id="guests" class="shorttext"/>

           <label for="date">DATE</label>
           <input type="text"  name="date" id="date" class="shorttext"/>

           <label for="phone">PHONE</label>
           <input type="text"  name="phone" id="phone" class="shorttext"/>

           <label for="email">ENTER EMAIL ADDRESS</label>
           <input type="text" value="ENTER EMAIL ADDRESS" name="email" id="email" class="fulltext"/>
           <button type="submit" value="submit">go</button>
           </form>

and the JavaScript is here:

    rules: {
     email: { required: true, email: true,  maxlength: 50 },
     honeypot: { maxlength: 0 }
    }
  });

Any help with this would be greatly appreciated.

Thanks.

Answer 1

Validate plugin mentioned here http://jquery.bassistance.de has two properties errorContainer and errorPlacement which you can use to place/display error at some other location on page. Here is a demo http://jquery.bassistance.de/validate/demo/custom-methods-demo.html. View Source. If you are using same plugin, which I am sure you are using, it should be helpful. A submit handler is required to actually handle the submission of form. Please note the following code

$("#myform").validate({
 submitHandler: function(form) {
   // some other code
   // maybe disabling submit button
   // then:
   $(form).submit();//notice how form object is used, not the **id** of form is used here
   //^ if you dont take care, you will end up in too much recursion error
 }
});

Read this document, http://docs.jquery.com/Plugins/Validation for more.