Question

i am using JQUery Tools - Validation Error Summary

/* adds an effect called "wall" to the validator */
        $.tools.validator.addEffect("wall", function(errors, event) {
                // get the message wall
                var wall = $(this.getConf().container).fadeIn();
                // remove all existing messages
                wall.find("p").remove();
                // add new ones
                $.each(errors, function(index, error) {
                    wall.append(
                        "<p><strong>" +error.input.attr("name")+ "</strong> " +error.messages[0]+ "</p>"
                    );
                });
                // the effect does nothing when all inputs are valid
        }, function(inputs)  {

        });

enter image description here

if u can see the image everything is working fine, what i want is, with changing this code, instead of text-box name i want the Label text to be displayed before the Error MSG.

Thanks in Advance. EDIT :HTML

<tbody style="" class="user_panel" id="customer_info">
  <tr>
    <td valign="top"><label class="label">Contact name:</label>
      <input type="text" value="" name="contact_name" class="" style="width:227px"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><label class="label">Measurement:</label>
      <select value="" data-message="Measurement is required1" required="required" name="measurement" style="width: 231px; border-color: red;">
        <option value="">-select-</option>
        <option value="1">mm</option>
        <option value="2">inches</option>
      </select></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td valign="top"><label class="label">Phone personal:</label>
      <input type="text" value="" data-message="Pers cont. num is required" required="required" name="contact_number_person" class="" style="width: 227px; border-color: red;"></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
Was it helpful?

Solution

Change the your JavaScript under the // add new ones comment to this:

$.each(errors, function(index, error) {
    wall.append(
        "<p><strong>" +error.input.prev().html()+ "</strong> " +error.messages[0]+ "</p>"
    );
});

Instead of printing the name attribute of the input object, it will print the html inside the previous element which is the label

OTHER TIPS

If you add the attribute for to your labels, e.g.

<label class="label" for="contact_name">Contact name:</label>

Then you can have:

wall.append(
                    "<p><strong>" +$("label[for='"+ error.input.attr("name")+"']").text()+ "</strong> " +error.messages[0]+ "</p>"
                );

This addresses the possibility that another element is between the label and the input. Or if you want a label to follow an input.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top