Jquery html5 validation with error messages

Question

I need to show the error message based on input error. what I'm doing wrong?

also the error should be displayed when the h5validation adds the class .ui-state-error

if ($(".ui-state-error").is(":visible") == true) { find errors and display input:email

 <section class="errors">
   <p class="email"><span>Please enter a valid Email.</span></p>
   <p class="password"><span>Please re-type your password.</span> Your passwords didn't match.</p>
   <p class="repeat-password"><span>Please re-type your password.</span> Your passwords didn't match.</p>
 </section>

http://jsfiddle.net/hsSru/21/

You're not including the library for h5Validate in the fiddle, are you including it in your file? — Jay Blanchard
– Jay Blanchard, Commented Mar 9, 2012 at 15:34
@Jay Blanchard yes the library is included already on manage resurces — DD77
– DD77, Commented Mar 9, 2012 at 15:36

Eric Hamilton · Accepted Answer · 2012-03-10 03:01:08Z

3

What you're trying to do is built-in to h5Validate. You don't need to do anything special to show and hide your errors, but you do need to give the errors ids instead of classes.

errorAttribute An html attribute that stores the ID of the error message container for this element. It's set to data-h5-errorid by default. Note: The data- attribute prefix is a new feature of HTML5, used to store an element's meta-data. e.g:

<input data-h5-errorid="email" type="text" class="h5-email" required />


<section class="errors">
    <p id="email"><span>Please enter a valid Email.</span></p>
</section>

See new fiddle: http://jsfiddle.net/hsSru/33/

See the documentation: http://ericleads.com/h5validate/

FYI, h5Validate supports both callbacks and an events API, as well as an allValid method.

edited Mar 10, 2012 at 3:01

answered Mar 10, 2012 at 2:53

Eric Hamilton

312 bronze badges

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

Comments

Christofer Eliasson · Accepted Answer · 2012-03-09 15:32:32Z

1

The first thing you need to take a look at is how you call the .live() method. .live() does not take a function as the first parameter, it takes the event you want it to listen for as the first parameter and the function as the second paramter, so that will likely cause you some trouble. Also, since jQuery 1.7, .live() is deprecated in favor of .on().

If you want the function to be called on submit, which is probably the most common, then you should use .submit() instead of .live().

answered Mar 9, 2012 at 15:32

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

8 Comments

DD77 Over a year ago

also the error should be displayed when the h5validation adds the class .ui-state-error

Christofer Eliasson Over a year ago

@DD77 There is no reliable way to listen for DOM modification events, that I know of, so you would probably have to extend the validation-plugin so that it does what you want at the same time as it adds the class. Not familiar with h5validate, so I don't know if you can pass a callback-function for that or something, but I guess that would be available through the documentation in that case.

DD77 Over a year ago

what about to find this? .find('errors')$('<p class="email"><span>Please enter a valid Email.</span></p>');

Christofer Eliasson Over a year ago

@DD77 Well, you could use find() or hasClass() or similar to see if the element has a certain class, but you would still need something to trigger that code to execute. Normally you listen for events like click, mouseover etc. and when such an event fire, you run your code, but there is no such event you could make use of. That leaves you with setInterval(), to run the function every x milliseconds, but you would either have to run it very frequently, or you will end up with a delay where the class is added, and a few seconds later when you run your function the message will be displayed.

DD77 Over a year ago

something like that? if ($(".ui-state-error").is(':visible')) { $(".errors .email").addClass("active"); //make this active } else { $('.errors .email').show(); }

|

Collectives™ on Stack Overflow

Jquery html5 validation with error messages

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related