Skip Navigation

[Résolu] Email fields in not type=email?

Ce fil est résolu. Voici une description du problème et la solution proposée.

Problem:
The user changes an email input from type=text to type=email to leverage browser validation. But, then the field does not handle the backspace key to delete a string.

Solution:
This is a bug that we will be fixing in an upcoming release. Use the patch in this reply as a workaround https://toolset.com/forums/topic/email-fields-in-not-typeemail/#post-1996047

This support ticket is created Il y a 3 années. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+00:00)

Marqué : 

This topic contains 5 réponses, has 2 voix.

Last updated by Valeriia Il y a 3 années.

Assisted by: Jamal.

Auteur
Publications
#1995047

Hello,

I was surprised to find out that when I select "email" as field type when creating custom fields it does not reflect into this field being rendered in front-end as type="email".

I am now trying to simplify the default Toolset validation (and make it available in the language that is set in the browser) by adding "required" via jQuery after the form is loaded.

I am also changing the field type from "text" to "email" as your default configuration surprisingly allows to submit not valid email addresses even then the field type is set as "email" in the settings.

But I am running into an issue when after changing the field type to "email", Backspace is not working in this field anymore. It is impossible to delete what you typed unless you use Delete instead of Backspace which does not make sense for website visitors.

Here is my code, if it can help to understand somehow:

<script>
    jQuery(document).ready(function() {
        var $ = jQuery;
        $('input[name="wpcf-name"]').attr('required', 'required');
        $('input[name="wpcf-email"]').attr('required', 'required').attr('type', 'email');
    });
</script>

I tried to find a solution online but could not find anybody with a similar issue whatsoever.

Can you advise please?

Thank you

#1995257

Jamal
Supporter

Languages: Anglais (English ) Français (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello and thank you for contacting the Toolset support.

I run a small test on a clean install and I could not reproduce the backspace issue, it might be caused by a browser extension. Can you deactivate all browser extensions and try again.

I have also set the fields as required and added your custom Javascript code and it works as expected. Check it here hidden link
You can log in as an administrator using this URL hidden link

#1995799

Hello Jamal,

Thanks for looking into the issue.

I tested the link you gave me and it has the same behavior as I described - backspace is not working in the email field.

I tested it in: Chrome, Mozilla, Opera, Brave.

All the extensions on Chrome and Brave are off, Opera and Mozilla are fresh, had no extensions from the beginning.

I am on Windows. I have a report from another tester on Mac that they have the same result in their OS.

It only works in my Android phone.

Are you sure you understood the issue? Are you able to delete data from the email field using Backspace keyboard button?

Thank you

#1996047

Jamal
Supporter

Languages: Anglais (English ) Français (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello and thank you for your feedback. I wasn't able to reproduce the issue on chrome, but I was able to reproduce it on Firefox.

I'll escalate this to our 2nd Tier for further debugging, but, I can't make any promises, maybe he or the devs won't fix this because we already generate the email field as type="text".
You can still implement validation on the field, by setting it on the field configuration. Check this screenshot hidden link
When we set validation on the field, it will be validated on the frontend even if it is a type="text" input field.

I'll get back to you as soon as possible.

#1997495

Jamal
Supporter

Languages: Anglais (English ) Français (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello again,

We are intentionally blocking the Backspace key in several form fields. Our 2nd Tier is escalating this to the developers, so it can be fixed in an upcoming release. He is offering a patch for you so you can benefit from this without waiting for any upcoming Toolset Forms release.
Please download a zipped version of main.js from hidden link
And overwrite the existing file at cred-frontend-editor/vendor/toolset/toolset-common/toolset-forms/js/

I tested it on the test site and it works as expected.

I hope this helps. Let me know if you have any questions.

#1997563

Great, it worked!

Thanks a lot and send my thanks to your 2nd Tier 🙂

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.