Validation error message not showing properly

Question

I don't know how to explain it. so just check out below image. Jquery Validation error.

I am using charishma Admin theme. Downloaded from here: https://github.com/usmanhalalit/charisma

I am using jquery.validate.1.11.1.js. Your any effort will be appreciated. Thanks in advance..!! Update:

I have seen the added element is label. It seems proper for textbox and select but for checkbox and radio it shown like the abaove as the size of this elements are smaller than textbox and select. see below code is generated:

<div class="control-group">
  <label class="control-label">Checkboxes</label>
  <div class="controls">
    <label class="checkbox inline">
      <div class="checker" id="uniform-tnc">
        <span>
          <input type="checkbox" value="option1" name="tnc" id="tnc" style="opacity: 0;" class="alert-error">
          <label for="tnc" class="alert-error">Agree to our terms and conditions to register with us.</label>
        </span>
      </div> Option 1
    </label>
  </div>
</div>

This is fine for all other input type except checkbox and radio. For these It should be like below :

<div class="control-group">
  <label class="control-label">Checkboxes</label>
  <div class="controls">
    <label class="checkbox inline">
      <div class="checker" id="uniform-tnc">
        <span>
          <input type="checkbox" value="option1" name="tnc" id="tnc" style="opacity: 0;" class="alert-error">
        </span>
      </div> Option 1
      <label for="tnc" class="alert-error">Agree to our terms and conditions to register with us.</label>
    </label>
  </div>
</div>

Check that the markup generated is equal to the expected markup in the theme. Use web inspector or Firebug to find which rules are incorrectly applied. — Eirik Hoem, Apr 10 '13 at 13:36
Compare your markup with the expected markup, use inspection tool :) — Dhaval Marthak, Apr 10 '13 at 13:38
Looks like the width of the element is set very small, so the text breaks into multiple lines. Try adding `white-space:pre` to the formatting of the element containing the error message. — CBroe, Apr 10 '13 at 13:48
@Prash278 have you tried setting a width for label? LIke Agree to our terms and conditions to register with us. — arjuncc, Apr 11 '13 at 05:01
@arjucc No I am not setting any style inline. I have also checked css class it does not contains attribute of width. — Prash278, Apr 11 '13 at 06:27

score 1 · Answer 1 · answered Apr 11 '13 at 15:18

I do not see any of your code for the jQuery Validate plugin in your OP. I suggest that you create a full and concise demo of your problem, and show the demo in your OP.

By default, the jQuery Validate plugin simply inserts a label element immediately after the input element with the error. In the case of radio and checkbox types, the label is inserted immediately after the first in the group.

Since this label is getting crammed, there are three ways to fix this...

1) Edit your layout's HTML & CSS so that you have more room for the label.

2) Edit the callback functions/options of the jQuery Validate plugin to place the label differently when the element is a radio or checkbox.

3) Some combination of 1 & 2.

score 1 · Accepted Answer · answered Apr 12 '13 at 06:03

I got the solution by adding errorPlacement parameter to validate. below is the solution:

errorPlacement: function(error, element) {
  if (element.attr("name") == "tnc")
    error.appendTo($('#lbl-tnc'));
  else
    error.insertAfter(element);
}

And I changed the HTML as below:

<label class="checkbox inline" for="tnc" id="lbl-tnc">
  <input type="checkbox" name="tnc" id="tnc">I Agree to <a href="#">Terms & Conditions</a>
</label>

Validation error message not showing properly

2 Answers2