HTML5 input text pattern

Question

I'm trying to use a pattern on an html5 input text. This textbox should allow all the characters and number, both lowercase and uppercase and a maxLenght of 16, but NOT the special characters.

i tried this pattern, but it doesn't work (if i miss some character fell free to pointing it out):

[^!\£$%&/()=?^*§#@_:,;.-+-/|]*

HTML

<form>
<INPUT TYPE="TEXT"
       pattern="[^!\£$%&/()=?^*§#@_:,;.-+-/|]*" maxLenght='16' value="">
<input type="submit">
</form>

<span class="result"></span>

JavaScript

$("form").on("submit", function (evt){
  $(".result").html('ok');
  evt.preventDefault;
})

Example here: http://codepen.io/anon/pen/avNKMm?editors=101

any help would be really appreciated.

Thanks a lot.

Can the field be empty? Do you really want to allow spaces/tabs, too? — Wiktor Stribiżew
– Wiktor Stribiżew, Commented Sep 18, 2015 at 9:47
thanks @stribizhev i edited my question with the snippet in the body — Nick
– Nick, Commented Sep 18, 2015 at 10:25

Pranav C Balan · Accepted Answer · 2015-09-18 09:54:40Z

3

Use regex as

[a-zA-Z0-9\s]{0,16}

Demo

$("form").on("submit", function(evt) {
  $(".result").html('ok');
  evt.preventDefault();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <INPUT TYPE="TEXT" pattern="[a-zA-Z0-9\s]{0,16}" maxLength='16' value="">
  <input type="submit">
</form>

<span class="result"></span>

Explanation here

Regular expression visualization

edited Sep 18, 2015 at 9:54

answered Sep 18, 2015 at 9:39

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

1 Comment

Anthony Broadbent Over a year ago

Try just pattern="[A-Za-z]" as the pattern only shows allowed characters

Wiktor Stribiżew · Accepted Answer · 2015-09-18 10:20:12Z

1

Note that you have a typo in maxLenght. Change to maxlength so that it could work correctly.

You should try to use a whitelist approach rather than a blacklist one. Define what you allow:

all the characters and number, both lowercase and uppercase

That means, [a-zA-Z\d] and

and a maxLenght of 16

You should be aware of the fact that pattern attribute regex is anchored by default, so we can safely use {1,16} (a limiting quantifier matching 1 to 16 occurrences of the preceding subpattern).

To disallow empty value, use required attribute.

So, I would recommend:

<INPUT TYPE="TEXT"
   pattern="[a-zA-Z\d\s]{1,16}" required maxlength='16' value="">
             ^^^^^^^^^^^^^^^^^  ^^^^^^^^       ^^^

Updated PEN

$("form").on("submit", function (evt){
  $(".result").html('ok');
  evt.preventDefault;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<INPUT TYPE="TEXT"
       pattern="[a-zA-Z\d\s]{1,16}" required maxlength='16' value="">
<input type="submit">
</form>

<span class="result"></span>

edited Sep 18, 2015 at 10:20

answered Sep 18, 2015 at 9:50

Wiktor Stribiżew

631k41 gold badges502 silver badges632 bronze badges

2 Comments

user663031 Over a year ago

Isn't it maxlength, not maxLength?

Wiktor Stribiżew Over a year ago

@torazaburo: It looks like the case is irrelevant: Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive. But you are right.

Collectives™ on Stack Overflow

HTML5 input text pattern

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related