Check if the name field in a form contains a number using javascript and the onchange event

Question

im the definition of a rookie and i hav no idea what im doing. i have to create a function using javascript to perform a validation on the 'name' field in a form. The check will see if there is anything entered or if the name contains a number. On top of this i have to use a onchange event. I tried searching and i got answers put i saw the answers had jquery code in it and i cant use it in this question. Im clueless on what to do, can someone please help? Here is the form im working with

     <form method="get">
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Name" onChange="" >
        <br>
        <label for="age">Age</label>
        <input type="age" id="age" placeholder="Age">
        <br>
        <label for="location">Location</label>
        <input type="location" id="location" placeholder="Location">
        <br>
        <button type="submit">Submit</button>
    </form>

Clarify what you mean by "name must contain a number". Does this mean it can contain a/n characters as well or must it be all numeric? — ron tornambe, Nov 05 '12 at 01:53
basically if you enter a name it cannot contain a number e.g. "bob21" all that can be accepted is "bob" also if the user were to enter a number "21" it would not be accepted — , Nov 05 '12 at 02:20
Types `age` and `location` are not valid. For age you can use `type=number` instead. Every type that does not exist in the browser is automatically replaced with the text type. — René, Nov 05 '12 at 06:07

score 1 · Answer 1 · edited May 23 '17 at 12:12

Here is a javascript function that takes an input parameter. It will check if the input value has any digit characters in it using regular expression. If it does it sends an alert and then removes all the digit characters (again using regular expression). It will then check if the input value is an empty string and send an alert if it is.

function checkName(input) {

    // Check if input contains a digit
    if (/\d/.test(input.value)) {
        alert('Name contains a number');

        // Remove all digit characters
        input.value = input.value.replace(/\d/gi, '');
    }

    // Check if input is empty
    if (input.value === '') {
        alert('Name is empty');
    }

    return true;
}

Add your function call to the onChange property of the input, passing in this object for the function's variable reference:

    <input type="text" id="name" placeholder="Name" onChange="checkName(this)" >

Here is a demo showing this working:
http://jsfiddle.net/PMKsS/1/

Something to note. This function will only call when the name input value is changed, as that is what the onChange call will do. Therefore the name input will not be checked for being empty when the form submits.

Also, this is worth a read: Why is using onClick() in HTML a bad practice?. It explains about adding javascript event listeners through javascript rather than through an attribute and why doing the other way isn't great. Although it doesn't offer a way to do this in pure javascript.

Solution in pure JavaScript is not (much) harder than a jQuery solution. See https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener — René, Nov 05 '12 at 06:45
Interesting how if you want to pass parameters to the listener function, you have to use an anonymous function. — 3dgoo, Nov 05 '12 at 06:50
The same as for functions like setTimeout. You can either pass a function name (as a string is bad practice) or indeed an anonymous function, which I prefer. In both cases the event is sent along as first parameter. — René, Nov 05 '12 at 09:16

Check if the name field in a form contains a number using javascript and the onchange event

1 Answers1