Question

I’m using bassistance validation plugin for jQuery.

To hold the form clear I place only one letter as Errormessage after the invalid field (for example "F" for invalid formatting). Now I want to give the user an option for a detailed errormessage in a special div (#errordetails) by clicking on letter.

$(".contactForm").validate({
    rules ....
}),

...

I want to place something like that:

$("label.error").click(function() {
    alert("The Errormessage was clicked ...");
})

Where do I have to place this code?

In $(document).ready() the events don’t work. Click events for other elements are working fine, but not events for the $("label.error")

My HTML after validation:

<div class="formField cf">
  <label for="contactGeburt">Geb.datum *
    <span style="font-size: 10px; color: #999">&nbsp;(dd.mm.jjjj)
    </span>
  </label>
  <input type="text" maxlength="10" id="gebdatum" name="gebdatum" class="textField datum error">
  <label for="gebdatum" generated="true" class="error">
    <span class="errorvalue">P
    </span>
  </label>
</div>

And here is the jQuery Part

$(document).ready(function() {
  $(".contactForm").validate({
      rules: {
        gebdatum: {
          required: true,
          dateDE: true
        }
      },
    }),

    //This does not work
    $(function() {
      $("label.error").click(function() {
        alert("The Errormessage was clicked ...");
      });
    });

  // This works - H1 is also on the document ;-)
  $(function() {
    $("h1").click(function() {
      alert("H1 was clicked ...");
    });
  });
});

I’ve tested the (valid) code, but it doesn’t work. I’ve started the demo page from bassistance:

http://jquery.bassistance.de/validate/demo/

I paste this function:

$("label").click(function() {
  alert("The Label was clicked ...");
});

And run the code (console). On clicking the labels from the textfields the alertmessage was shown. After clicking on "submit"-button the errorlabels (red) do not react on the event but the labels for the input fields show the alertbox.

So I run the code from the console again (after the errors are on the screen) and now the alterbox was shown.

So I think, the event must be placed in the validate-event from the form but I don’t know the right syntax.

Here is a link to JSFiddle with all resorces included: http://jsfiddle.net/frank79/HVEXm/

Answer 1

I’ve got the solution:

$(".contactForm").delegate("label", 'click', function() {
    alert("A Label was clicked....");
}).validate({
    rules: {
        gebdatum: {
            required: true,
            dateDE: true
        }
    }
})

My label didn’t exist when calling the click-handler.