Automatically trim email addresses on input to avoid validation error on mobile

[s.prodromos]

Hello Team,

I have had two clients complaining that they can't register.

Apparently most mobile phones uses auto correction / suggestions hence they were tapping on there suggested emails which gives automatically a space at the end, but they were getting the error which turned out to be due to the space at the end.  (Error is replicable on a desktop if you add a space after the email address
[(eg:   test@test.com <--(one space))]

This is some sort of a bug / enhancement request most probably, not sure if any other person is facing it, but surely I have  had other clients who couldn't register and they have simply went out of the page and never visited back especially when I was running facebook sponsored ads.

Any suggestions?

[teseo]

***CORRECTED***

Hi,

There are more pages including email input fields (Contact -Site and advertiser, Share Ad...), and there's no real harm in including this code for any page, so here's what should be a universal version.

Add this at the very bottom of your theme functions.php:
Notes:
1.- Take care not to leave blank lines after this.
2.- If your theme functions.php doesn't end with ?> skip first line of my code.

Code: [Select]

<?php
function cust_trim_email_field() { ?>
        <script type="text/javascript">
            $('#s_email, #email, #contactEmail, #yourEmail').on('keyup', function() {
                $(this).val($(this).val().trim());
            });
        </script>
<?php  }

osc_add_hook('footer', 'cust_trim_email_field', 10);
?>

Regards

[s.prodromos]

Hello Teseo,

Thank you for getting back to me.

This worked indeed, I've just uploaded the file now and noticed it will not accept anymore any kind of spaces after the .com
However this implementation that you mentioned is only for the register page if I am not mistaken.

I tried to make another addition and replacing    if (osc_is_register_page()) { ?>  to be   if (osc_is_login_page()) { ?>
However that didn't load the page afterwards.

Any idea how to add the implementation on to the login page too?

[teseo]

That's because on login page that field is not called "s_email", but "email".

Anyway, there are more pages including email input fields (Contact -Site and advertiser, Share Ad...), and there's no real harm in including this code for any page, so here's what should be a universal version:

Code: [Select]

<?php
function cust_trim_email_field() { ?>
        <script type="text/javascript">
            $('#s_email, #email, #contactEmail, #yourEmail').on('keyup', function() {
                $(this).val($(this).val().trim());
            });
        </script>
<?php  }

osc_add_hook('footer', 'cust_trim_email_field', 10);
?>

Regards

[s.prodromos]

Teseo you rock!
Thank you a lot!

[teseo]

You're welcome. Would you mind changing the title of this thread to something more descriptive such as "Automatically trim email addresses on input to avoid validation error on mobile [Solved]"? Thanks.

Regards

[s.prodromos]

Title updated

[Syed]

Thanks teseo for great piece of code,

1.   Is it fine to include bellow code in my global.js file?

Code: [Select]

$('#s_email, #email, #contactEmail, #yourEmail').on('keyup', function() {
     $(this).val($(this).val().trim());
 });
2.   I have some other fields included on my registration page that need to be trim in the same way, Is it possible to make this code applicable for all text input fields?

Regards

[teseo]

Hi,

Problem is that this code will delete any space on the fly (email addresses don't allow spaces so for that it's fine). If your new inputs are the same (no spaces allowed at all) just add their input ID to the list:

$('#s_email, #email, #contactEmail, #yourEmail, #my_input_1, #my_input_2')

Regards