CODEWITHSUNDEEP
javascriptjqueryhtmlinputalert
Raviteja
Raviteja

Reputation: 3479

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

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

Upvotes: 2

Views: 1960

Answers (5)

JGCW
JGCW

Reputation: 1529

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

Upvotes: 0

skobaljic
skobaljic

Reputation: 9614

I would use input pattern attribute:

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

Regex found in this answer.

Upvotes: 0

Thamilhan
Thamilhan

Reputation: 13293

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

Upvotes: 0

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

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

Upvotes: 0

pespantelis
pespantelis

Reputation: 15372

You should use this

$(this).val(current_value);

instead of this

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

Upvotes: 1

Related Questions