optional form field validation with patterns

[michaellunsford]

 

<input type="text" maxlength="5" name="zip" value="Zip Code" pattern="(\d{5})?" />

 

So, if the zip code is filled, it should be a five digit number. If it's not filled it's optional. The above RegEx is forcing everyone to enter a zip code. Can HTML do this, or am I going to have to script it?

[Psycho]

I'm not sure how widely accepted the pattern tag is. Also, you definitely wouldn't want to rely upon it since a malicious user could easily circumvent it.

 

But, this seems to work for what you are asking:

 

pattern="[\d]{5}|.{0}"

 

Not sure if this is the most efficient method. It's kind of a hack IMO. Basically looks for 5 digits OR any character matched 0 times. I did some limited testing it out and got the expected results.

Edited June 10, 2014 by Psycho

[Jacques1]

Not sure what the .{0} is supposed to do. The pattern for “nothing” is simply ... no pattern. And why the brackets around \d? The \d itself is a character class.

 

The pattern of the OP already solves the problem. What makes you two think it doesn't? It accepts either an empty string or exactly 5 digits.

 

Note, however, that you normally need to use anchors to match the beginning and end of the string. If you just write, say, \d{2}, then this matches any string which includes two digits following each other. If you want a string which only consists of two digits, you need ^\d{2}$. In your case, however, it's not needed since the pattern corresponds with the maximum input length.

[Psycho]

The pattern of the OP already solves the problem. What makes you two think it doesn't? 

 

He said it didn't. Since he was posting here for help stating that it wasn't allowing an empty value, I took him at his word.

 

 

 

Not sure what the .{0} is supposed to do

I stated that the expression I provided was a hack. With the assumption that the original expression didn't work, I tested this modified one to verify it returned the requested results.

[michaellunsford]

Sorry for the delay in replying. Phpfreaks notifications suddenly started going to the junk folder. ???

 

Anyway, you guys are both right. The ^/d{5}$ works fine. EXCEPT I was setting value="Zip Code" (it's not a five digit number, and it's not blank).

 

That field has a javascript on it that blanks on focus or submit. Unfortunately, Firefox won't fire the submit script if the RegEx doesn't match. Sooo.....

 

Is it possible to have a default value in an input field that doesn't match the RegEx? I'm thinking to just go all javascript and dump the pattern idea.

Edited June 12, 2014 by michaellunsford

[cyberRobot]

You could use a form field label instead:

<label>Zip Code: <input type="text" maxlength="5" name="zip" value="" pattern="(\d{5})?" /></label>

It looks like you're using XHTML, so this next suggestion may not work. But you could also use HTML 5's placeholder attribute:

<input type="text" maxlength="5" name="zip" value="" pattern="(\d{5})?" placeholder="Zip Code">

[michaellunsford]

ah hah! I knew there was a solution. I had searched for "default value" and a few other things -- the term "placeholder" escaped me for the moment.

 

the space is pretty tight, so I had wanted to avoid the label. the placeholder is exactly what I was looking for.

 

I am using HTML 5, btw. Validator says it's good. Why did you think I'm still on XHTML? 5 no longer requires closing the attribute?

Edited June 12, 2014 by michaellunsford

[cyberRobot]

I am using HTML 5, btw. Validator says it's good. Why did you think I'm still on XHTML?

 

The self-closing <input> tag:

 

...pattern="(\d{5})?" />

 

Note the space and slash at the end.

[michaellunsford]

must have missed my edit -- does input no longer need to be closed in 5? It validates...

[cyberRobot]

To be honest, I don't have a definitive answer. I just remember needed to add slashes to the end of tags like <input>, <br>, etc. when making the switch from HTML 4 to XHTML. The slash was added to conform to XML standards. Since we're going back to an HTML standard, I just assumed the slash was no longer needed with HTML 5.

[michaellunsford]

Odd. Checked a few places and it looks like you're right. It's an old habit of mine: if you open it, close it. Don't know that I can ever go back to the old HTML 4 methods.