[Resolved] Email fields in not type=email?

[Author]

Posts

[Valeriia]

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

[Jamal]

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

[Valeriia]

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

[Jamal]

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.

[Jamal]

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.

[Valeriia]

Great, it worked!

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