CODEWITHSUNDEEP
javascriptjquery
taesu
taesu

Reputation: 4580

Disable zero as first letter in <input>

Below code disables 0 as the first character in #foo.
However, you can bypass this by typing 123, then drag to select 123 and putting 0. (or ctrl+a on input)

Is there a way to block this scenario?

 $('input#foo').keypress(function(e){ 
  if (this.value.length == 0 && e.which == 48 ){
   return false;
   }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo" />

Upvotes: 9

Views: 12906

Answers (7)

Sean Wessell
Sean Wessell

Reputation: 3510

I would handle the input, propertychange, and paste events. Then use regex to match for anything that begins with 0 and replace the current value with the value minus the leading 0.

http://jsfiddle.net/SeanWessell/5qxwpv6h/

$('input ').on('input propertychange paste', function (e) {
    var val = $(this).val()
    var reg = /^0/gi;
    if (val.match(reg)) {
        $(this).val(val.replace(reg, ''));
    }
});

Bug fix reported by Kevin/Updated per recommendations of canon:

http://jsfiddle.net/SeanWessell/5qxwpv6h/2/

$('input').on('input propertychange paste', function (e) {
    var reg = /^0+/gi;
    if (this.value.match(reg)) {
        this.value = this.value.replace(reg, '');
    }
});

Upvotes: 14

James Jithin
James Jithin

Reputation: 10555

Accept only numeric values not prefixed by zero. Supports Ctrl + A:

var escapeKeys = [8, 46];
$('input#foo').keyup(function (e) {
    if ($.inArray(e.keyCode, escapeKeys) != 0) {
        if ((this.value + String.fromCharCode(e.keyCode)).match(/^[1-9][0-9]*$|^$/) != null) {
            this.lastValidValue = this.value + String.fromCharCode(e.keyCode);
        } else if (this.lastValidValue) {
            this.value = this.lastValidValue;
        } else {
            this.value = "";
        }
    } else {
        this.lastValidValue = this.value;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo" />

Upvotes: 1

keune
keune

Reputation: 5795

This could work:

$('input#foo').keyup(function(e) {
    if((this.value+'').match(/^0/)) {
        this.value = (this.value+'').replace(/^0+/g, '');
    }    
});

The only thing that could bother you with this solution is that zero is displayed for a second and then deleted, since we are using keyup event.

A quick demo

Upvotes: 2

DinoMyte
DinoMyte

Reputation: 8868

Here's the fixed version : 

<input id="foo" />

$('input#foo').keyup(function(e){ 
     if(this.value.substring(0,1) == "0")
     {
        this.value = this.value.replace(/^0+/g, '');             
     }         
});

jsfiddle : http://jsfiddle.net/ewmb1yq9/4/

Upvotes: 2

Mike Horstmann
Mike Horstmann

Reputation: 588

You could add a "submit" event to validate whether it's entered or not, regardless of how it could have gotten there:

$( "form" ).submit(function( event ) {
  if ( $( "input:first" ).val() != 0 ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<p>Type 'Anything but 0' to validate.</p>
<form action="javascript:alert( 'success!' );">
  <div>
    <input type="text">
    <input type="submit">
  </div>
</form>
<span></span>

jQuery's working is example is last on page here (https://api.jquery.com/submit/)

NOTE: The most important part will be to add the "event.preventDefault()" action, because that will keep the form from accidentally submitting.

Upvotes: 0

Ozan
Ozan

Reputation: 3739

If you want to catch the changes to the input's value (including the changes made by dragging part of the text for example), you can watch the input event. 

$('input#foo').on("input", function(){
  alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="foo" />

Upvotes: 0

zacran
zacran

Reputation: 865

I think you're looking for the keydown jQuery event as opposed to the keypress event. Here's some move info on the difference between the two. Try regex to get rid of leading zeroes:

$('input#foo').keydown(function(e){ 
    this.value = this.value.replace(/^0+/, '');
});

Upvotes: 2

Related Questions