Validate input with Jquery

Question

I am trying to do something like this code below but have so far not being successful.

function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
    return true;
} // restrict numerical values only

The code above only allows for numerical characters, and when a user push any other key apart from the Numerical ones, it does not appear on the text box.

This is exactly what I want too but the scenario is different, I don't want the user to enter zero (0) as their first character.

e.g. 0909 wrong but instead 909

I have being able to achieve this thus far

$(".input-xlarge").keyup(function () {
    var textInField = this.value;

    if (textInField.length == 1) {
        if (textInField == 0) {
            showError('error?');
        }
    }
});

but instead a message should be shown to the user, the input should be ignored just like the first code.

Amir Popovich · Accepted Answer · 2014-05-08 06:27:17Z

3

Look at the fiddle, this "blocks" the text box for only valid input via js.

HTML:

<input id='numeric' type='text'/>

JS:

$('#numeric').keydown(function(e){
    if(e.keyCode == 8) // allow backspace - add more chars here
    {
        return;
    }
    else if(e.keyCode < 48 || e.keyCode > 57 || (e.keyCode == 48 && $(this).val() == '')) // non numeric + beginning zero
    {
        e.preventDefault();
    }
});

Fiddle

edited May 8, 2014 at 6:27

answered May 8, 2014 at 6:21

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

1 Comment

Amir Popovich Over a year ago

The KeyDown event is triggered when the user presses a Key. The KeyUp event is triggered when the user releases a Key.

iConnor · Accepted Answer · 2014-05-08 06:15:01Z

1

This would work,

$(".input-xlarge").keyup(function (evt) {
    var textInField = this.value;
    if (textInField.length == 1) {
        if (textInField == 0) {
            alert('number should not start with zero');
            $(evt.target).val("")
        }
    }
});

edited May 8, 2014 at 6:15

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

answered May 8, 2014 at 6:12

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

3 Comments

iConnor Over a year ago

To improve your answer, you could explain why this would work.

BlackPearl Over a year ago

this works but the zero (0) appears before being deleted automatically. I needed it not to appear on the textbox at all.

Naeem Shaikh Over a year ago

Then just remove the alert, It will delete zero as soon as key is up

Dave · Accepted Answer · 2014-05-08 06:17:28Z

1

$( ".input-xlarge" ).keyup(function(e) {
  var textInField = this.value; 
  if (textInField.length == 1){
    if (this.value.length == 0 && e.which == 48 ){
      alert('cannot start with zero')
      return false;
   }
  }
});

refer this jsfiddle

answered May 8, 2014 at 6:17

Dave

4,4363 gold badges27 silver badges38 bronze badges

Comments

iConnor · Accepted Answer · 2014-05-08 06:20:03Z

1

Try this code:

$(".input-xlarge").keyup(function (event) {
    var textInField = this.value;

    if (textInField.substr(0, 1) == '0') {
        event.preventDefault();
        alert("should not start with zero');
    }
});

By doing this, whenever your user input 0 as the first letter, then it won't be showed and will alert an error message.

edited May 8, 2014 at 6:20

iConnor

20.2k14 gold badges66 silver badges98 bronze badges

answered May 8, 2014 at 6:16

Bla...

7,2887 gold badges30 silver badges47 bronze badges

1 Comment

Bla... Over a year ago

Ah, don't use keyup, instead use keydown.. because during keyup event your character already input into the field..

Collectives™ on Stack Overflow

Validate input with Jquery

4 Answers 4

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related