Jump to content

optional form field validation with patterns


Go to solution Solved by cyberRobot,

Recommended Posts

 

<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?

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 by Psycho

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.

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.

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 by michaellunsford
  • Solution

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">

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 by michaellunsford

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.