CODEWITHSUNDEEP
htmlzurb-foundation
Codecat
Codecat

Reputation: 2241

Why does my Foundation Abide pattern not work?

I have the following HTML for making sure password length is over 8 characters:

<label>Password <small>required</small>
    <input type="password" name="password" id="password" required pattern=".{8,}">
</label>
<small class="error">Your password must be at least 8 characters long.</small>

This works. However, if in a different field I use the pattern [a-zA-Z]+, like this:

<label>Username <small>required</small>
    <input type="text" name="username" required pattern="[a-zA-Z0-9]+">
</label>
<small class="error">Username must consist out of letters or numbers only.</small>

It will allow everything. If I change the pattern in the username field to .{8,}, it will only allow inputs that are over 8 characters in length, as expected. Why does the pattern for the username field not work?

The documentation states that this is the correct way to do it:

<label>Your name <small>required</small>
  <input type="text" required pattern="[a-zA-Z]+">
</label>
<small class="error">Name is required and must be a string.</small>

Upvotes: 0

Views: 447

Answers (1)

Codecat
Codecat

Reputation: 2241

The fix is to wrap the pattern in line begin and end characters, like such:

<input type="text" name="username" required pattern="^[a-zA-Z0-9]+$">

Maybe this is a bug in Foundation that needs to be reported on their Github?

Upvotes: 1

Related Questions