CODEWITHSUNDEEP
jquery
EamonnMcElroy
EamonnMcElroy

Reputation: 607

Cannot trim whitespace on email input

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,''));
})

Upvotes: 2

Views: 5025

Answers (6)

ith18-dev
ith18-dev

Reputation: 1

by default when you set type = email then the value of the data cell has been cleared of spaces, the problem occurs when there is still space on the interface of the data cell

I replaced type = text and after reassigned it with email in the blur event and it worked

const onBlurEmail = () => {
    const input: any = document.querySelector('#email')
    input.type = 'text'
    input.type = 'email'
}

<a-input
 id="email"
 v-model:value="payload.email"
 type="email"
 @blur="onBlurEmail"
/>

Upvotes: 0

Kris Paulsen
Kris Paulsen

Reputation: 81

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);

Upvotes: 6

VDWWD
VDWWD

Reputation: 35554

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="[email protected]">

<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>

Upvotes: 0

McAuley
McAuley

Reputation: 424

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.

Upvotes: 0

EamonnMcElroy
EamonnMcElroy

Reputation: 607

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.

Upvotes: 2

NepCoder
NepCoder

Reputation: 439

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();
});

Upvotes: 0

Related Questions