I'm doing a validation form using HTML5 and its own tags to validate the fields. I'm using the PATTERN , which limits the character type. But it does not work ... Fields are not being blocked. "Code", only numbers and "Name", only letters.
Code:
<!DOCTYPE html>
<form>
Codigo: <input type="text" required="required" name="number" pattern="[0-9]"></input>
Nome: <input type="text" required="required" name="text" pattern="[a-z]"></input>
</form>
How to solve this?
Validation does not block fields, it just marks their status as invalid. If you change the invalid field style, this will be visible:
input:invalid {
background: red;
color: #fff;
}<form>
Codigo: <input type="text" required="required" name="number" pattern="[0-9]">
Nome: <input type="text" required="required" name="text" pattern="[a-z]">
</form> Notice that the rules you've placed are for 1 number in the first field, and 1 letter (lowercase) in the second. If you want to validate multiple numbers and letters you would need to change regular expressions to [0-9]+ and [a-z]+ .