CODEWITHSUNDEEP
javascriptregexhtmlvalidation
Manos Kounelakis
Manos Kounelakis

Reputation: 3161

Pattern attribute for not accepting numbers

I am trying to learn reqular expressions and apply it to my form using pattern attribute. I have a form which asks for email,firstName ,lastName and password.What I want to do is to prevent lastName and firstName from containing digits. So here is my code:

<form action="foo.php" method="post">
    <label for="email">Email</label>
    <input type="email" required class="form-control" id='email-input'>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" required class="form-control" id='first-name-input' pattern="[^0-9]" title="First name cannot contains any digits">
    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" required class="form-control" id='last-name-input' pattern="[^0-9]" title="Last name cannot contains any digits">
    <label for="password">Password</label>
    <input type="password" required class="form-control" id='password-input'>
    <input type='submit' class='btn btn-success pull-right' value='Complete registration' style="margin-top:0.3em">
</form>

However I I fill in all my inputs even If I don't type any number(just fill in a real name) int the First Name and the Last Name input I get an error saying: Please match the requested format. I would like an explanation. To better understand what I want to do here is an example:

If input for first-name is foo it will not throw an error.

If input is foo1 or 1 or 1foo it will throw an error

Upvotes: 1

Views: 4641

Answers (4)

woldendans
woldendans

Reputation: 80

As specified in the MDN doc:

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset.

If you know any other regex style, consider that HTML input pattern are always surrounded by ^ and $.

Thus, your current expression matches any word with only one character not being a digit. Writing [^0-9]+ will be valid for anything with at least one character and no digit in it.

Upvotes: 1

Mayank Raj
Mayank Raj

Reputation: 1624

Ahh, the reason for the error is simple. The regex you wrote is correct such that is does not matches to a character between 0-9. What youre missing is that it is set to match to a single character. Use the + keyword to specify one or more characters

[^0-9] : Match single character not between 0-9

[^0-9]+ : Match one or more characters not between 0-9

If you want more precise control over the numbers of characters allowed

[^0-9]{1,5} : Will allow minimum 1 and maximum 5 characters

<form action="foo.php" method="post">
    <label for="email">Email</label>
    <input type="email" required class="form-control" id='email-input'>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" required class="form-control" id='first-name-input' pattern="[^0-9]*" title="First name cannot contains any digits">
    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" required class="form-control" id='last-name-input' pattern="[^0-9]*" title="Last name cannot contains any digits">
    <label for="password">Password</label>
    <input type="password" required class="form-control" id='password-input'>
    <input type='submit' class='btn btn-success pull-right' value='Complete registration' style="margin-top:0.3em">
</form>

Upvotes: 5

prasanth
prasanth

Reputation: 22500

Because you are adding the required attribute .it will not permit the empty input

Example for your own error throw 

function check(){
if(document.getElementsByTagName('input')[0].value.match(/[0-9]/g))
{
console.log('please enter alphapet only')
}

}
<input type="text">
<button onclick="check()">check</button>

Upvotes: 0

Wiktor Stribiżew
Wiktor Stribiżew

Reputation: 626923

The HTML5 pattern requires a full string input. If you need to accept values not containing digits, you need to match a string with no digits inside. Add * after each [^0-9] to match 0 or more non-digit chars (anchors are added by default by the engine itself):

<form action="foo.php" method="post">
    <label for="email">Email</label>
    <input type="email" required class="form-control" id='email-input'>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" required class="form-control" id='first-name-input' pattern="[^0-9]*" title="First name cannot contains any digits">
    <label for="lastName">Last Name</label>
    <input type="text" name="lastName" required class="form-control" id='last-name-input' pattern="[^0-9]*" title="Last name cannot contains any digits">
    <label for="password">Password</label>
    <input type="password" required class="form-control" id='password-input'>
    <input type='submit' class='btn btn-success pull-right' value='Complete registration' style="margin-top:0.3em">
</form>

Note: you may also use pattern="\D*" to shorten it a bit. \D matches a non-digit character.

Upvotes: 1

Related Questions