CODEWITHSUNDEEP
htmlinput
b-m-f
b-m-f

Reputation: 1328

HTML input do not allow numbers

Right now I have an input field like this:

<input class="form-control" type="text"/>

But it stills allows the input of numbers.

I want names to be input and want to display an error message when the string contains a number. How can I achieve this?

Upvotes: 9

Views: 71178

Answers (4)

Patrick
Patrick

Reputation: 7712

You have several options....

Regardless of the options, you will be using regular expressions in some way shape or form.

You can do it on the client side using JavaScript...

function Validate () {

  var inputValue = document.getElementById("test").value;
  var reg = new RegExp('^\\d+$');
  var test = reg.test(inputValue);
  
  //--Do something with test--
  console.log(test);
  
}
<input id="test" class="form-control" type="text" />
<button onClick="Validate()">Validate</button>

If it is just plain HTML with no server side code you will need to use JavaScript.

EDIT

And as far as I know this is supported in all browsers that support JavaScript regardless of version.

Upvotes: 0

Ash Win
Ash Win

Reputation: 115

This should help you to type only characters:

$(function() {

  $('#txtNumeric').keydown(function (e) {
  
    if (e.shiftKey || e.ctrlKey || e.altKey) {
    
      e.preventDefault();
      
    } else {
    
      var key = e.keyCode;
      
      if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
      
        e.preventDefault();
        
      }

    }
    
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <b>Enter Text:</b>
  <input type="text" id="txtNumeric" />
</div>

Upvotes: 7

Mior
Mior

Reputation: 831

You can use native HTML5 field validation

like e-mail validation (fiddle): <input type="text" title="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

For your specific case you can use regexp like pattern="[a-zA-Z]*" (fiddle)

When you submit form it became highlighted with red border to show you validation error. In different browser it will behave slightly different.

I don't think there is standard way to override every default styling, however there are browser specific ways to do this (here).

For some style you can have css hooks in place for changes see here

Edit: updated fiddle.

Upvotes: 13

Pavel Kučera
Pavel Kučera

Reputation: 117

no input alows just text:

http://www.w3schools.com/html/html_form_input_types.asp

... you can try js + action on input like onkeydown

http://www.w3schools.com/jsref/event_onkeydown.asp

and validate by regEx (just letters)

Regex to match only letters

can better control what happens when good or bad validation. Only the alert or change color etc.

Upvotes: 0

Related Questions