FormIt Phone Validation

[todd.b]

I’ve been trying (unsuccessfully) to validate a 10-digit phone number format (xxx-xxx-xxxx). Initially I tried using the HTML 5 input[type="tel"] field but it didn’t play well with FormIt when it came to submitting the form (constant errors). Then I tried using a standard input[type="text"] field with regex but I couldn’t get that to work either.

Surely there must a simple way to validate the format.

[halftrainedharry]

@todd.b

Then I tried using a standard input[type="text"] field with regex but I couldn’t get that to work either.

What exactly did you try?

---

I think something like this should work:

[[!FormIt? 
   ...
   &validate=`phone:regexp=^/\A\s*\d{3}-\d{3}-\d{4}\s*$/^`
]] 
<form action="[[~[[*id]]]]" method="post">
   <input type="text" name="phone" value="[[!+fi.phone]]"> 
   ...
</form>

[todd.b]

Thanks @halftrainedharry, that worked.

Ugh, I was so close. I was missing a /.

One other question: where does the error message come from? I already have an error message I want to use.

[halftrainedharry]

@todd.b

where does the error message come from?

Do you mean the error message for this specific field?

You could use something like this:

[[!FormIt? 
   ...
   &validate=`phone:regexp=^/\A\s*\d{3}-\d{3}-\d{4}\s*$/^`
   &phone.vTextRegexp=`format must be xxx-xxx-xxxx`
]] 
<form action="[[~[[*id]]]]" method="post">
   [[!+fi.error.phone]]
   <input type="text" name="phone" value="[[!+fi.phone]]"> 
   ...
</form>

For more details see this part of the FormIt documentation.