Display HTML5 client-side validation error bubbles after event.preventDefault

Question

After invalidate the default behaviour of the form I would like to display HTML5 client-side validation error bubbles.

I did try the following code but it does not work.

Any ideas?

validateForm: function (event) {
    event.preventDefault();
    // some code
    console.log(this.$el.find('form')[0]); // it display the form I would like to validate
    this.$el.find('form')[0].checkValidity();
});

@Val using `event.stopPropagation();` I don't need to use checkValidity because the error bubbles is showed. but should I use `event.stopPropagation` instead of `preventDefault` what is the difference in submitting a form? — Lorraine Bernard, Jul 19 '12 at 12:51
@Val I used event.stopPropagation and it submits a form reloading the page. but I don't want this behaviour. so I have to use preventDefault. — Lorraine Bernard, Jul 19 '12 at 12:54
Have you tried em' all at once? like `event.stopPropagation(); event.preventDefault(); return false;` — JKirchartz, Jul 19 '12 at 13:22
possible duplicate of [Triggering HTML5 Form Validation](http://stackoverflow.com/questions/7548612/triggering-html5-form-validation) — robertc, Jul 19 '12 at 13:48

score 2 · Answer 1 · answered Jul 19 '12 at 16:18

Your code about validateForm can be improved in this way:

validateForm: function (event) {
    event.preventDefault();
    // some code
    event.currentTarget.checkValidity();
});

If it does not work the issue will be about how you call validateForm function.

If you are in a Backbone.View, as I suppose since you are using "this.$el", you should write the events object simply in this way:

events: {
    'submit form': 'validateForm'
    // 'click button': 'validateForm' // this way does not work
}

Display HTML5 client-side validation error bubbles after event.preventDefault

1 Answers1