0

Is there a JS event that my own custom code can listen for to determine that client-side / browser validation of a form has passed?

i.e. That no messages like this have occurred: "Please fill in this field" because a field was empty.

Please fill in this field

If there such an event that can be listened to then my own JS could handle the POST submission and then replace the form with a thank you message, in-situ / in place on the same page.

What I don't want to do is have my code run whether the form submission input by the user is valid or not. In other words I don't want to display a thank you message if they've not given valid data. That's why I need an event to say validation passed.

This to me is a better solution to say "thank you" rather than redirecting to content that can itself be indexed and accessed "outside" of the form submit situation, even if a module like rabbit_hole is used.

Looking for a Drupal 8 or 9 solution for myself but tagged with 7 to encourage answers for those who also might want an answer but for Drupal 7.

2

Drupal doesn't have a browser-side validation framework as it does with the back-end form validation handlers. The "Please fill..." message is the browser enforcing the required property.

If you'd like to hook into those validation events, you can bind event listeners on specific form elements for invalid events. If you want to take action on a submit click, the checkValidity() method can be executed on form field DOM objects.

See the MDN docs on the constraint validation API for more info.

1
  • +1 and Accepted answer. Wow thank you! So enlightening. Most appreciated. I will explore further what you've outlined. – therobyouknow Nov 10 '20 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.