Where is the content of the pop up bubble in my form validation coming from?

Question

I use the Clientside Validation module for my webforms.

I get a "Please enter an email address" pop up bubble next to the email text field when an incorrect email is entered. I am not quite sure where this is coming from.

I would prefer this functionality instead:

Submitting the form with an empty email field displays a different error message to when an invalid email is entered eg. http://validation7.ubu001.attiks.com/node/1?utm_medium=atix&utm_source=cv7b

Can anyone shed some light about it?

Answer 1

In our instance we used clumsyfingers's code but with parsing fix:

novalidate cannot be "1". It has to be either:

• no value
• empty value
• value = attribute name

like so:

function mymodule_form_alter(&$form,&$form_state,$form_id) {

  if(strstr($form_id,'webform') !== FALSE) {  
    // prevent html5 validation, i.e. on input type="email" fields  
    form['#attributes']['novalidate'] = 'novalidate';  
  }

}

CSE HTML validator was returning this message:

The "novalidate" attribute for the "form" element has an invalid value "1". This is a boolean (true or false) attribute. The presence of a boolean attribute represents true and absense of the attribute represents false. Setting a value is not necessary, but if a value is set, then it must be an empty string or be a case-insensitive match for the attribute's name. NOTE: Never use the values "true" and "false".

Answer 2

Know this was asked a little while ago, but started investigating and found a "solution". Apparently when Webform has a form component with type "Email" it sets the input type to "email". On browsers IE8+ and modern browsers (Chrome, FF) there is an automatic, browser-side verification on these fields. It's nothing to do with the script. It seems to be an html5 "feature", see https://stackoverflow.com/questions/9399528/disable-form-validation-in-browser.

Two options:

1. Don't use the "Email" type in Webforms. This kind of breaks the ability to use form values as "To" or "From" emails in the Webform Emails feature, so it's not great.

2. Add the novalidate rule to the <form> generated by Webform. I do so via a custom hook:

   function mymodule_form_alter(&$form,&$form_state,$form_id) {
   
     if(strstr($form_id,'webform') !== FALSE) {  
       // prevent html5 validation, i.e. on input type="email" fields  
       form['#attributes']['novalidate'] = '1';  
     }
   
   }
   

This is just if you want to remove it. Now you can use Webform clientside validation module to set custom messages. Or you can style like here: https://stackoverflow.com/questions/5713405/how-do-you-style-the-html5-form-validation-messages

Answer 3

Client-side validation in this context means you let the browser check the validity of form elements. And every browser then comes with its own pop-ups you don't really have much control about. So, yeah, maybe you should get rid of this module first ^^ And then make use of Drupal's Form API and for example use #element_validate

---

I stumbled upon this post while looking for a way to disable client-side form validation in Drupal 8. My problem was when I use $form['#attributes']['novalidate'] = 'novalidate' (like suggested in on of the other answers) then the novalidate attribute gets added to the form wrapper instead of to the form itself. This doesn't prevent client-side validation. Form elements still validate in the browser.

Finally solved it by adding the following JS globally:

$('form').attr('novalidate', 'novalidate');