jQuery validation click event for error message

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/

VLAZ · Accepted Answer · 2022-12-25 16:12:58Z

2

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.

edited Dec 25, 2022 at 16:12

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

answered Dec 22, 2011 at 8:37

Frank 79

311 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alessioalex · Accepted Answer · 2011-12-12 10:41:28Z

0

You should place your code inside jQuery's document ready function, like so:

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

answered Dec 12, 2011 at 10:41

alessioalex

63.8k16 gold badges158 silver badges123 bronze badges

Comments

JMax · Accepted Answer · 2011-12-13 08:41:41Z

0

Here is your original code:: http://jsfiddle.net/2EwUK/

When clicking on the JSLint button on the top, the webapp will raise you some syntax errors in your code.
You shouldn't use multiple $(function() { }); inside $(document).ready() because it is the very same code

Here is an updated one: http://jsfiddle.net/mwLWR/1/ and it works. Thanks to the comment, I've also added a reference to the validation plugin.

edited Dec 13, 2011 at 8:41

answered Dec 13, 2011 at 8:16

JMax

26.7k12 gold badges74 silver badges89 bronze badges

1 Comment

Irvin Dominin Over a year ago

Can you try to include validate from a CDN (es. ajax.aspnetcdn.com/ajax/jquery.validate/1.9/…) ?

Steve Pugh · Accepted Answer · 2011-12-22 09:06:51Z

0

The .click() method can only bind a function to the click event of an element that's in the DOM at the time the method is called.

As the error labels are added to the DOM later they aren't affected.

Use the .live() or in jQuery 1.7+ .on() method instead.

$("label").live("click", function() {
    alert("A Label was clicked....");
});

answered Dec 22, 2011 at 9:06

Steve Pugh

1,0081 gold badge10 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery validation click event for error message

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related