Disable HTML5 Form Validation on Webforms

HTML5 is alive and well in the Drupal community, including the Webform module (7.x-4.x). One change made in release 7.x-4.8, was to add the HTML5 'required' attribute to a form field when its component is required. This allows HTML5-compatible browsers to provide client-side validation, which is generally a good thing; however, it's not always wanted. It is possible to add a 'novalidate' attribute to the form element. This will instruct browsers to ignore HTML5 validation.

Here's the 'BUT' part. It's possible, BUT Webform doesn't provide this option in the UI. In fact, the maintainers are opposed to it because it's unnecessary, bloat, and represents an edge case; "We strive to add only the most essential features to webform to prevent feature bloat. You can add no-validate by modifying the form in a custom module." Fortunately, hook_form_alter() makes it easy to go the custom module route:

<?php
/*
 * Implements hook_form_alter().
 */

function MY_MODULE_form_alter(&$form, $form_state, $form_id) {
  if(
strstr($form_id,'webform') !== FALSE) { 
   
// Prevent html5 validation.
   
$form['#attributes']['novalidate'] = '';
  }
}
?>

In the code above, we're keying off the form ID - anything that contains 'webform' - because in this use case we want to disable HTML5 validation for all webforms. If you want to be more targeted, then individual form IDs could be used, as well.

Add new comment