How to restrict use of Leading and Trailing spaces in the textbox using jquery?

Question

I have multiple input fields with different values. I can edit them but cannot be empty (if empty show an alert). When I am editing if I edit them with blank spaces i used trim to not allow that.But,I am able to edit the input with more spaces at the start and end with a word in between.I don't need this.

How to achieve the following ?

a)Should not start with space.

b)No spaces after the word,if i have one word.

<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">

$('.selector').on('blur',function () {
  var current_value = $.trim($(this).val());
  $(this).attr('value',current_value);
  console.log(current_value);
  if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0 ) {
    $(this).focus();
    alert('You cannot use this');
  }
});

My fiddle here

Please include the relevant JavaScript in your question also, as Roko has kindly done on your behalf this time. — David Thomas
– David Thomas, Commented Dec 8, 2015 at 5:00
And it should be in your question, not (only) in the Fiddle. Don't make us chase around the internet for the pleasure of helping you. If your code is hosted externally and that site falls over, dies or is reorganised, then the question becomes nonsensical at best, and is of no use to anyone else in future. — David Thomas
– David Thomas, Commented Dec 8, 2015 at 5:05
@IamRaviteja : Check the answer my me. Is it what you were looking for? — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Dec 8, 2015 at 5:46

pespantelis · Accepted Answer · 2015-12-08 05:03:13Z

1

You should use this

$(this).val(current_value);

instead of this

$(this).attr('value', current_value);

answered Dec 8, 2015 at 5:03

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Raviteja Over a year ago

working fine in my fiddle but not in my real project

Thamilhan Over a year ago

If not working, then explain what problem you are facing @IamRaviteja

Raviteja Over a year ago

@MyWay Sorry! my mistake, I used uppercase letter instead of lower

Ajay Narain Mathur · Accepted Answer · 2015-12-08 05:05:35Z

Check if first index of space is 0 or last index is end of string then show alert.

Add the following Condition:

if($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length -1) ){
       alert('You cannot use this');
    }

Check updated fiddle

or Snippet:

$('.selector').on('blur', function() {
  var current_value = $.trim($(this).val());
  $(this).attr('value', current_value);
  console.log(current_value);
  if ($('.selector[value="' + current_value + '"]').not($(this)).length > 0 || current_value.length == 0) {
    $(this).focus();
    alert('You cannot use this');
  } else
  if ($(this).val().indexOf(" ") == 0 || $(this).val().lastIndexOf(" ") == ($(this).val().length - 1)) {
    alert('You cannot use this too');

  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="selector" value="new">
<input type="text" class="selector" value="old">
<input type="text" class="selector" value="newest">
<input type="text" class="selector" value="oldest">
<input type="text" class="selector" value="older">

Thamilhan · Accepted Answer · 2015-12-08 05:07:08Z

0

See the updated fiddle

$('.selector').on('blur',function () {
    $(this).val($.trim($(this).val()));
    if($(this).val() == "") {
      alert("Empty values not allowed!");
      this.focus();
    }
});

Explanation:
First trim the values, then check if empty. If empty raise the alert and focus the box

answered Dec 8, 2015 at 5:07

Thamilhan

13.3k5 gold badges40 silver badges60 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:28:07Z

0

I would use input pattern attribute:

<input type="text" class="selector" value="new" pattern="^[^\s]+(\s+[^\s]+)*$" />

Regex found in this answer.

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Dec 8, 2015 at 5:08

skobaljic

9,6841 gold badge29 silver badges52 bronze badges

Comments

JGCW · Accepted Answer · 2015-12-08 05:11:36Z

0

To remove spaces at the start and get the value (removes all spaces from left and right edges of the string.):

var value = $.trim($("input").val());

answered Dec 8, 2015 at 5:11

JGCW

1,5291 gold badge13 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to restrict use of Leading and Trailing spaces in the textbox using jquery?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related