After the 3.17 update, we noticed two strange things about the 'email' type field in webform:

  • The class 'webform-component-email' suddenly changed to 'webform-component-webform_email', messing up stylesheets of multiple of our websites
  • The input type of the html element created for the field changed from 'text' to 'email'. I believe this isn't even a valid input element type, and now firefox shows red borders around the input elements.

See the screenshots.

What is the reasoning behind this?

CommentFileSizeAuthor
#12 webform_email_class.patch675 bytesquicksketch
webform_bug.jpg79.13 KBbvanmeurs
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

quicksketch’s picture

Priority: Critical » Normal

Input type=email is an HTML 5 element. That part's intentional. See #908958: Use HTML5 type="email" for e-mail field input type.

If you're interested in turning of HTML5 elements, we plan on making an option over here: #1375708: Provide a site-wide setting for utilizing HTML5 elements

The class 'webform-component-email' suddenly changed to 'webform-component-webform_email', messing up stylesheets of multiple of our websites

That was not intentional. We should be able to fix that pretty easily.

bvanmeurs’s picture

Thanks for your reply. The input type 'email' seems to work, so it's fine by me.

You can change the class name back if you like. We have updated all of our stylesheets to support both classes.

Regards,
Bas

smirlo’s picture

Version: 7.x-3.17 » 6.x-3.17

I've got two problems since 3.17 version.
1. All our input fields of type "email" have a red border around them in Firefox.
2. E-mail is now always mandatory, even if I set it as optional in the field settings. I cannot submit the forms unless I add an e-mail address.

quicksketch’s picture

@smirlo: Do you have other Webform-related modules (perhaps Webform Validation or AJAX Forms) installed on your site? Do you get the red border around the field before you even submit it?

bvanmeurs’s picture

quicksketch, this seem to be a browser feature of Ffox (latest version) and not in the stylesheets. I have the same issue.

I think it's not a good idea to use these html5 fields as it is still a volatile standard and browsers may not implement them properly.

tthenne’s picture

First of all, I'm all about HTML5 so thank you guys for thinking a head and being up to web standards.

My issue seems to be that I am not even getting an input field to display in the webform if it is type email. I don't know if the browser is not rendering it because it doesn't recognize it or if this is a preprocess function within the module. I'm using the latest version of chrome and firefox and IE9 and none of those browsers show any type of input for an email.

quicksketch’s picture

auroraenterprise fixed his problem in #1482520: Input of Type email is not rendering at all.

quicksketch, this seem to be a browser feature of Ffox (latest version) and not in the stylesheets. I have the same issue.

I don't have this problem in Firefox. In Firefox I DO get a red border if I start typing an address that is not valid. Leaving the field blank removes the red border, as does entering a valid e-mail address. Even though Firefox is causing the red border, it's probably a module that is triggering Firefox's behavior.

The HTML5 elements aren't going away, but we're planning to make them optional via a setting in #1375708: Provide a site-wide setting for utilizing HTML5 elements

bvanmeurs’s picture

Thanks quicksketch, I know why Firefox showed the red border. Using scripts, we added 'enter your e-mail address' automatically in the input field. Ffox showed a red border because the input is not a valid e-mail address.

smirlo’s picture

Ahh, that's my problem as well. I also have a "Enter your e-mail address here"-text inside the input field and Firefox thinks "Hey, that's not a valid e-mail address".

When I submit the form without entering an e-mail address I get a small popup saying "Please enter an e-mail address", which is nowhere in the code as far as I can see - also Firefox?

@quicksketch I get the red border before I submit. No, no such modules, so it's probably Firefox itself.

quicksketch’s picture

Category: bug » support

When I submit the form without entering an e-mail address I get a small popup saying "Please enter an e-mail address", which is nowhere in the code as far as I can see - also Firefox?

Yes, that's also Firefox.

If you'd like to use a placeholder text in the field, I suggest using the "placeholder" attribute in HTML5, with a shim to provide the same functionality for older browsers. I'd like to provide native support for the placeholder attribute plus a shim in Webform, but that's a separate request from this issue.

chernetsky’s picture

I've found solution about red border for input type='email' in FF:

input:required {
    box-shadow:none;
}
input:invalid {
    box-shadow:0 0 3px red;
}

or something similar

quicksketch’s picture

Status: Active » Fixed
FileSize
675 bytes

This quick fix prevents the class name from becoming "webform_email". Committed to both branches.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

leanderl’s picture

Thanks! This helped me along the way!