Menu icon Foundation
Abide phone field validation

I have an optional phone field I need to validate for numbers and dashes only. I do not want to validate for strictly US phone format, as there are sometimes users from other countries.

My custom abide pattern is not working and I cannot figure out why.
At the bottom of the page, after the jquery and foundation js calls I have this:

$(document).foundation({
abide: {
patterns: {
user_phone: /^[0-9-]*$/
}
}
});

The form field code is included below.

If I enter letters in the field a validation error occurs, which is correct. However, if I enter "444" or "444-555-2222" this also triggers a validation error. All other field validations on the form are working ok, so I know abide is doing it's thing. What am I missing here?

<input type="text" name="contact_phone" id="contact_phone" pattern="user_phone">
            

         

abidevalidation

I have an optional phone field I need to validate for numbers and dashes only. I do not want to validate for strictly US phone format, as there are sometimes users from other countries.

My custom abide pattern is not working and I cannot figure out why.
At the bottom of the page, after the jquery and foundation js calls I have this:

$(document).foundation({
abide: {
patterns: {
user_phone: /^[0-9-]*$/
}
}
});

The form field code is included below.

If I enter letters in the field a validation error occurs, which is correct. However, if I enter "444" or "444-555-2222" this also triggers a validation error. All other field validations on the form are working ok, so I know abide is doing it's thing. What am I missing here?

<input type="text" name="contact_phone" id="contact_phone" pattern="user_phone">
            

         

J D Douglas gave the most helpful answer for this post
J D Douglas over 5 years ago

Yes. I definitely have the data-abide attribute in the form tag.

As I said, all the other field validations in the form are working. It is only the custom pattern that is validating incorrectly. I have also tried putting the pattern within the field tag. e.g. pattern="[0-9-]*$" That does not work either.

Forgot to mention I am using Foundation 5. I basically copied some of the sample code from the abide how-to page - in the Custom Named Patterns section.

http://foundation.zurb.com/docs/components/abide.html

Rafi Benkual over 5 years ago

Did you include the data-abide attribute?

This should help, the label will turn red if it's not validated.
HTML
<form class="custom" data-abide>
<label>Phone Number</label>
<input type="text" pattern="mobile_number" required>
</form>

Working example: (click edit pen to see code) http://cdpn.io/HyoFL

J D Douglas over 5 years ago

Yes. I definitely have the data-abide attribute in the form tag.

As I said, all the other field validations in the form are working. It is only the custom pattern that is validating incorrectly. I have also tried putting the pattern within the field tag. e.g. pattern="[0-9-]*$" That does not work either.

Forgot to mention I am using Foundation 5. I basically copied some of the sample code from the abide how-to page - in the Custom Named Patterns section.

http://foundation.zurb.com/docs/components/abide.html

sankhabanerjee over 4 years ago

Hi I checked your problem and find a solution which working fine for mine to use the pattern like

please check I think this will work.
HTML
<input type="phone" required pattern="number" placeholder="Enter your phone number">