Cannot trim whitespace on email input

Question

I was trying to trim trailing whitespace on an email input but believe there is an issue with trim being applied to email inputs. Can anyone explain why this is the case or whether I am incorrect in my assumptions. This code when applied works on the password field but not on the email field.

EDIT:

It is a Ruby on Rails application but the HTML created is like so:

View:

<input class="mandatory form-control form-control" id="user_email" maxlength="250" name="user[email]" required="required" type="email">
<input class="mandatory form-control form-control" id="user_password" maxlength="20" name="user[password]" required="required" type="password">

JQuery:

$('input').blur(function()
{
    this.value=$(this).val().trim();
});

I have also tried this but still no luck. It strips whitespace between text but still wont remove trailing whitespaces:

$('input[type=email]').on('blur', function () 
{
    $(this).val($(this).val().replace(/ /g,''));
})

Please pase some code here. It would help us to find the issue in your code, and solve it. — Ravi Shankar Bharti, Aug 11 '16 at 15:56
I have tried this on JSFiddle as well but the functionality doesn't seem to work on either. On my application it definitely is working on password and when i edit the code so the email input is just standard text input it works as well. — EamonnMcElroy, Aug 11 '16 at 16:04

score 6 · Answer 1 · answered Nov 04 '20 at 20:08

When querying the value using emailField.value or $(emailField).val(), the value is already trimmed. From the spec:

The value sanitization algorithm is as follows: Strip newlines from the value, then strip leading and trailing ASCII whitespace from the value.

Also, it doesn't update the displayed value if it is set to the same value. So we need to change the value and then change it back:

var trimmedValue = emailField.value;
emailField.value = '';
emailField.value = trimmedValue;

Or, with jQuery:

var trimmedValue = $(emailField).val();
$(emailField).val('').val(trimmedValue);

This is the correct answer and explains what is going on. – Adam Jimenez Dec 04 '20 at 13:16 — Adam Jimenez, Dec 04 '20 at 13:16

score 2 · Answer 2 · answered Aug 12 '16 at 10:25

2

Best approach I have found is:

$(function()
{
  $('input[type=email]').on('keypress', function(e)
  {
    if (e.which == 32)
      return false;
  });
});

All other approaches lead to strange behavior for input type email that lead to spaces still being presented. This approach stops the space appearing and because an email shouldnt have any spaces it works as hoped.

answered Aug 12 '16 at 10:25

EamonnMcElroy

587
6
20

any clue how to reproduce this approach also for mobile devices keyboards? – Sam Provides Oct 16 '19 at 11:46
1

this isn't going to work on pasted values – Adam Jimenez Dec 04 '20 at 13:13

NepCoder · Answer 3 · 2016-08-11T16:21:22.623

0

Sorry I posted the wrong information earlier. Here is a working js code.

$('#user_email').bind('input', function()
{
    this.value=$(this).val().trim();
});

You can also use blur

$('#user_email').blur('input', function()
{
    this.value=$(this).val().trim();
});

edited Aug 11 '16 at 16:21

answered Aug 11 '16 at 16:03

NepCoder

429
4
16

1

Please read the very beginning of the question: "I was trying to trim trailing whitespace on an email input". The words trim, trailing and whitespace give an indication that I am not looking to remove all whitespace. – EamonnMcElroy Aug 11 '16 at 16:06
@EamonnMcElroy Sorry about that. I posted a new answer. Let me know if it works for you – NepCoder Aug 11 '16 at 16:21
@EamonnMcElroy Did this answer your issue? If so, please mark it as a answer. thank you – NepCoder Aug 11 '16 at 20:23
Still not covering it. Try it out yourself. When you press space it wont add a space but when you click out and back again the space you entered is present. As I said it is strange behavior which is why basic answers dont seem to cover it. – EamonnMcElroy Aug 12 '16 at 10:21

McAuley · Answer 4 · 2018-01-14T03:14:06.073

I used the jquery version of 'trim' for this same type of field, and other fields and I was able to get all of them trimmed properly for Bootstrap (ver 3.xx) purposes. First, I set a class on all the fields that need leading and ending whitespace trimmed (but not 'internal' whitespace, like in "Van Camp"). Call it 'nowhite' for this example. So I set 'nowhite' as a class on whatever fields I want this to happen on in the form, like so:

enter code here
<div class="form-group">
         <input type="text" class="nowhite form-control" name="firstn" id="firstn" data-error="Must Enter First Name" required>
           <div class="help-block with-errors"></div>
</div>
<div class="form-group">
         <input type="text" class="nowhite form-control" name="lname" id="lname" data-error="Must Enter Last Name" required>
           <div class="help-block with-errors"></div>
</div>

In my jquery script, I have this: enter code here

$('.nowhite').focusout(function(e) {
    $(this).val(  $.trim($(this).val())) ;
});

I use it on a number of forms that have fields that are required and need something other than whitespace. I like it because it's short and seems intuitive.

score 0 · Answer 5 · answered Oct 09 '19 at 13:00

I had the same problem. Although the spaces were trimmed, the updated value from the input type=email was not put back in it's input control. However it does work if you put in a different value first and then put the trimmed value back.

<input type="text" value="VDWWD">
<input type="email" value="mail@domain.nl">

<script>
    $('input').bind('focusout', function () {
        var value = $(this).val().trim();

        //check for type=email and put dummy value in input
        if ($(this).prop('type') === 'email') {
            $(this).val('dummyvalue');
        }

        $(this).val(value);
    });
</script>

Cannot trim whitespace on email input

5 Answers5

Linked