8

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?

Nagaraj S
  • 13,316
  • 6
  • 32
  • 53
b-m-f
  • 1,278
  • 2
  • 13
  • 29

4 Answers4

13

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.

Community
  • 1
  • 1
Mior
  • 821
  • 8
  • 16
  • Nice idea, but may not support older browsers. – Michael Giovanni Pumo Apr 23 '15 at 12:40
  • 1
    Supported in Chrome 5+, IE10+, FF4+, Opera9.6+, Not supported in Safari. – Patrick Apr 23 '15 at 12:47
  • @MichaelGiovanniPumo A polyfill should take care of older browsers, – Panagiotis Kanavos Apr 23 '15 at 12:48
  • as Panagiotis said there are polyfills like http://modernizr.com/ to help you with that. – Mior Apr 23 '15 at 12:50
  • @Mior Right... javascript is the only way to guarantee that this validation will work regardless of browser. – Patrick Apr 23 '15 at 12:52
  • Seems to be from http://blog.staffannoteberg.com/2012/03/01/html5-form-validation-with-regex/ Doesnt help me. For email just use type="email" – b-m-f Apr 23 '15 at 12:56
  • While the linked example is for eMail, you can edit the regex used within to fit your needs. This plus polyfills is as close to a "HTML-only" solution as you will get. – wonderb0lt Apr 23 '15 at 13:04
  • 1
    Yes sure. Unfortunately Regex like "\p{L}" does not work. "[a-zA-Z]" will break in many languages. But if there is not a better alternative I will have to stick with it I guess. – b-m-f Apr 23 '15 at 13:13
7

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>
ElChiniNet
  • 2,778
  • 2
  • 19
  • 27
Ash Win
  • 115
  • 1
  • 10
0

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.

ElChiniNet
  • 2,778
  • 2
  • 19
  • 27
Patrick
  • 7,512
  • 7
  • 39
  • 50
  • I do not want to do the validation in JavaScript. I would like to keep it in the HTML and get the neat Browser Support like a Message on wrong input. – b-m-f Apr 23 '15 at 13:00
  • You either need to do it using javascript on the client side or some sort of server side code. HTML5 has the pattern attribute for text boxes but like I have said... it is only supported by modern browsers... anyone using an older browser like IE9 will not validate properly. – Patrick Apr 23 '15 at 13:03
  • Thats okay for me. Support for older browsers is not a priority. – b-m-f Apr 23 '15 at 13:11
  • Then try Mori's pattern attribute with my regular expression '^\\d+$' that might work for what you are trying to do. – Patrick Apr 23 '15 at 13:14
  • This seems to be the Regex Pattern for Multiple Digits with a Backslash in the front? – b-m-f Apr 23 '15 at 13:21
  • Try ^[0-9]*$ it all depends on the RegEx engine... not all engines are built the same and I'm not familiar with the regex engine for the pattern attribute. – Patrick Apr 23 '15 at 13:34
  • http://stackoverflow.com/questions/8808590/html5-number-input-type-that-takes-only-integers – Patrick Apr 23 '15 at 13:35
  • Ah okay. The problem I have is to not allow numbers but only letters. For numbers, type="number" should work. But thanks for trying to help me :) – b-m-f Apr 23 '15 at 13:37
  • oh... my apologies... I missed the fact that you didn't want numbers... I thought you wanted only numbers. – Patrick Apr 23 '15 at 13:38
0

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.

Community
  • 1
  • 1
Pavel Kučera
  • 119
  • 10