Becky Becky - 6 months ago 22
HTML Question

Validate error message styling

I am trying to get the jQuery Validate error class to display a certain way, but am having difficulty getting it to work. I am wanting the validation messages to appear directly under my inputs. Right now they appear under my inputs, however the entire input jumps down to the next line.

The inputs set naturally like this:

Name -- Number -- Email

I want the message to appear like this:

Name -- Number -- Email

Message -- Message -- Message

Right now it is doing:

Name

Message

Number

Message

Email

Message

The HTML looks like this:

<form action="" method="POST" id="contact-form1">
<input type="text" class="contact-input show-input" name="name" id="name" placeholder="Name *">
<input type="text" class="contact-input show-input" name="number" id="number" placeholder="Phone Number *">
<input type="text" class="contact-input show-input" name="email" id="email" placeholder="Email *">
<input type="text" class="contact-input hidden-input" placeholder="Company Name">
<input type="text" class="contact-input hidden-input" placeholder="Title">
<input type="text" class="contact-input hidden-input" placeholder="Referral">
<textarea class="contact-message" rows="10" name="message" id="message" placeholder="Your Message*"></textarea>
<input type="submit" value="Submit" id="contact-submit">
</form>


I tried wrapping divs around each input, but this put each input on a new line in a block format.

Here is a fiddle to see what this is doing: Fiddle

What am I doing wrong?

UPDATE:

submitHandler: function(form) {

var name = $("#name").val();
var number = $("#number").val();
var email = $("#email").val();
var message = $("#message").val();
/*var company_name = $("#company_name");
var title = $("#title");
var referral = $("#referral");*/
//var targeted_popup_class = jQuery(this).attr('data-popup-open');

$.ajax({
url: "map-send.php",
type: "POST",
data: {
"name": name,
"number": number,
"email": email,
"message": message
/*"company_name": company_name,
"title": title,
"referral": referral*/
},
success: function(data) {


In the code above you will see items commented out. These are the non-validated items. For some reason when I take away the comment tags my page dies. No errors, it just freezes when I submit the page. I tried taking the variables outside of the validate tags, but it still did not help. Do you know why this would kill the page?

Answer

Look at the documentation:

  1. You cannot set the onfocusout option to true. It over-rides the internal function of the plugin thereby breaking it. It can only be set to false to disable this option or an over-riding function. Otherwise, leave this option out to keep the onfocusout behavior, which is active by default.

  2. You're missing a .val() on some of your input values so you're trying to pass the entire jQuery object instead of just its value. However, instead of trying to manually specify each value within your .ajax() function, use jQuery .serialize() to pass the data string for the whole form.

    data: $("#contact-form1").serialize(),
    

    and anyplace within the submitHandler function, you can use the passed form argument variable...

    data: $(form).serialize(),
    
  3. Use the errorElement and errorPlacement options to determine how/where the error messages appear in the DOM.

    • errorElement defaults to label (inline element) and you could change this into a div (block-level element) or any element you may need. The default is shown below as an example.

      errorElement: 'label', // default
      
    • errorPlacement defaults to inserting the error message just after the input element. In your case, your structure causes this to wrap, thereby breaking your layout. If you want the messages to appear someplace else in the DOM, then you need to write a new errorPlacement function. The default is shown below as an example.

      errorPlacement: function(error, element) {
          error.insertAfter(element); // default
      },
      

Your root problem is that you have not designed your form layout with the error messages in mind. You need to start over and make a layout that can accomodate the error message elements in the exact position you desire. Then these two custom jQuery Validate functions can dynamically create and insert the error message elements in your desired position.

Proof of concept example:

HTML

<form>
    <div class="input">
        <input type="text" name="name" />
    </div>
    <div class="input">
        <input type="text" name="number" />
    </div>
    ....

JavaScript

$("#contact-form1").validate({
    errorElement: 'div',
    errorPlacement: function(error, element) {
        error.insertAfter(element);  // default
    },
    rules: { ....

DEMO: https://jsfiddle.net/ng3a9xwz/


EDIT:

Inspecting the live DOM reveals...

<form novalidate="novalidate">
    <div class="input">
        <input type="text" name="name" class="error" />
        <div for="name" class="error">Please enter your name</div>
    </div>
    ....

errorElement: 'div' puts the error message into a div and the default errorPlacement inserts this new div immediately after the input element. Design your layout (CSS & HTML) to properly accommodate these options. You can use the markup from the live DOM for layout testing purposes.