Display native validation message in JavaScript

Question

I'm currently developing a form which will be powered by HTML5 features and jQuery. One of the things I've been tasked with is ensuring that the native "Please fill in this field" message is still available to browsers which natively support validation.

My setup looks like so:

|----------|
|   FORM   |
|----------|
===BUTTON===

The form has several parts to it, and so the button is global across them all. The form then slides to the next section if complete.

Here is what I have now, this correctly fires the button event to the form and triggers a submit event.

$(".next").click(function() {
    var $incoming = $(".nextPart #" + (currentSlide));
    var incomingID = $incoming.data("cardid");
    var partCode = "form-" + incomingID;

    $("form[name='" + partCode + "']").trigger("submit");
});

$("form").bind('submit', function(event) {
    var goForth = true;

    if(!event.currentTarget.checkValidity()) goForth = false;

    if(!goForth) return false;

    /* Do some stuff with progress bar and more things */

    return true;
});

However, even though the form submit fails, there is no validation message. Is there a way to pragmatically fire this on an element, or have I done something stupid?

For clarification, this is a screenshot of the validation message I am on about. enter image description here

event.currentTarget is a DOM node -- have you given it the checkValidity property ? — treecoder
– treecoder, Commented Jul 19, 2011 at 12:43
No, but when I used console.log() it displayed that as a property. — James
– James, Commented Jul 19, 2011 at 12:45
is that property a function -- typeof event.currentTarget == 'function' — treecoder
– treecoder, Commented Jul 19, 2011 at 12:46
false and console.log(typeof event.currentTarget); reports an object — James
– James, Commented Jul 19, 2011 at 12:48

treecoder · Accepted Answer · 2011-07-19 12:52:35Z

1

instead of event.currentTarget.checkValidity -- do this...

function checkValidity(elem) {
 // check validity here
 // retun true/false
}

and then in your submit handler do this...

if(checkValidity(event.currentTarget)) { ...

Also, it is generally NOT a good idea to trigger native browser events -- trigger is good for custom events -- if you need to submit the form you can call the submit() method of the form object like this..

$("form[name='" + partCode + "']").get(0).submit();

answered Jul 19, 2011 at 12:52

treecoder

45.5k23 gold badges71 silver badges96 bronze badges

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

2 Comments

James Over a year ago

This doesn't really help me in showing the validation message, I'm capable of manually validating myself, but since there is no way of doing what I want, in the format I have, I'll accept your answer.

James Over a year ago

I've actually unaccepted your answer because the way I fixed this wasn't really linked to what you suggested.

James · Accepted Answer · 2011-07-21 10:17:33Z

As I described in my first post, I was using a click event on a button which was in a global scope. This was then sending a submit action to the form which, although was sending the form to be submitted, it wasn't firing the bubble event (whatever the hell that is) on the elements.

To fix this, I wrapped all of my slides in one form instead of multiples. I kept my submit button outside of the slides, so it still acted as a global navigation item.

Removing the click event from this button and changing the type of it to submit now gets the bubble displaying.

Not the best fix, since the bubble should be able to be trigged without having to submit the form, however, I guess with HTML5 validation, you can define the parameters for what is accepted and what isn't.

Collectives™ on Stack Overflow

Display native validation message in JavaScript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related