Disable zero as first letter in <input>

Question

Below code disables 0 as the first character in #foo.
However, you can bypass this by typing 123, then drag to select 123

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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/

Answer 5

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.

Answer 6

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