Validate a phone number in your form
Add phone-number feedback to an existing HTML field with form.js, keeping the input editable and country context explicit.
Working example
HTML + form.jsSet up ParseAPI
Use a public API key restricted to your website. Keep secret keys on your server.
Get an API key ↗Mark your phone field
Add phone-number feedback to a signup or contact form with one script include and data-parse="phone". Keep your existing label, field name, and styles.
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.1.0" defer></script>
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel"
data-parse="phone" data-parse-country="US"
placeholder="(415) 555-2671" required>Use your domain-restricted public key in the include's data-key attribute; data-parse-version="2.1.0" selects the API contract. Include it once. The tel input offers the phone keyboard without turning the number into a numeric value or losing leading zeroes.
Supply the country you know
This example accepts US national numbers such as (415) 555-2671, using data-parse-country="US". Set another two-letter country when your form already has that context. Do not infer a phone number's country from the visitor's IP or browser language.
An international number such as +44 20 7946 0018 carries its own calling code and takes precedence over the fixed country. If your form accepts only international entry, remove the country attribute and ask for the leading + and calling code. A national number without country context stays unchecked and asks for that context.
Keep the person's entry
The script checks a complete-looking number after a typing pause or when the field loses focus. Partial entries receive a local hint after leaving the field; a hint is not an API verdict. Formatting stays as the person entered it.
When the API explicitly returns valid: false, the default preset uses native form validation to ask for a correction. Editing the number clears the old feedback and cancels its pending request. A missing or malformed answer leaves it unchecked.
Your form keeps control of submission. The script does not wait for a pending lookup, and an unavailable request does not add a submission block. Native required still applies. Validate the submitted value again on your server, together with its country context.
Know what was checked
Phone validation checks the numbering plan. It does not establish that a number is connected, can receive an SMS, or belongs to the person entering it. Use your own confirmation flow when ownership matters.
For your own acceptance rules, set data-parse-validation="manual". The Phone reference covers custom integrations and returned formats you can use on your backend.
Complete example
Use the complete implementation as a reference when adding this feature to your app. It includes the validation and failure handling around the calls above.
View and copy the complete source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Validate a phone number in your form</title>
<style>
:root { color-scheme: light dark; --bg:#fff; --ink:#152029; --muted:#5e6b75; --line:#d9e2e7; --field:#f6f9fa; --accent:#007c91; --error:#b42335; }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --bg:#0b1015; --ink:#eff7fa; --muted:#94a6b2; --line:#2c3942; --field:#121b23; --accent:#67e8f9; --error:#fda4af; } }
:root[data-theme="dark"] { color-scheme:dark; --bg:#0b1015; --ink:#eff7fa; --muted:#94a6b2; --line:#2c3942; --field:#121b23; --accent:#67e8f9; --error:#fda4af; }
:root[data-theme="light"] { color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; padding:24px; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,sans-serif; }
main { max-width:540px; margin:0 auto; }
label { display:block; margin-bottom:8px; font-size:14px; font-weight:600; }
input { display:block; width:100%; min-width:0; min-height:44px; padding:13px 14px; border:1px solid var(--line); border-radius:8px; background:var(--field); color:var(--ink); font:inherit; font-size:16px; }
input::placeholder { color:var(--muted); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
input[data-parse-status="invalid"] { border-color:var(--error); }
.parse-hint { margin:6px 0 0; color:var(--muted); font-size:.875em; line-height:1.4; overflow-wrap:anywhere; }
.parse-hint[data-parse-status="invalid"] { color:var(--error); }
@media (max-width:380px) { body { padding:18px; } }
</style>
</head>
<body>
<main>
<!-- example:form -->
<script src="https://cdn.parseapi.com/v1/form.js" data-key="YOUR_PUBLIC_API_KEY" data-parse-version="2.1.0" defer></script>
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel"
data-parse="phone" data-parse-country="US"
placeholder="(415) 555-2671" required>
<!-- /example:form -->
</main>
</body>
</html>
Try the complete example on your computer
Replace YOUR_PUBLIC_API_KEY in the HTML with your public key and add localhost to its allowed domains. Serve the download folder over HTTP:
python3 -m http.server 8000Open localhost:8000/validate-phone-field.html. Add your website's hostname to the key when using the feature there.
For every field and parameter, see Phone API reference.