Currently, my focus is on developing a form that prompts the user to choose between "USA" or "International" via radio buttons. The input field for telephone numbers should then adapt its requirements based on the selected country - either a 10-digit US number or an international phone number with a distinct format.
To enforce validation, I am leveraging native HTML attributes such as required along with a regex pattern. Presently, I have integrated placeholder, pattern, and title attributes tailored for a US phone number.
<form>
<div>
<fieldset>
<legend>Country</legend>
<p>
<input type="radio" name="country" id="usa" value="usa" required />
<label for="usa">USA</label>
</p>
<p>
<input type="radio" name="country" id="int" value="int" required />
<label for="int">International</label>
</p>
</fieldset>
</div>
<div>
<label for="telephone">Telephone</label>
<input
type="tel"
name="tel"
id="tel"
placeholder="123 456 7890"
required
pattern="(?:\d{1}\s)?\(?(\d{3})\)?-?\s?(\d{3})-?\s?(\d{4})"
title="A valid US 10 digit phone number is required."
/>
</div>
<button id="submit" type="submit">Submit</button>
</form>
My query pertains to the implementation of placeholder, pattern, and title for international numbers.
One approach could involve creating separate div elements in the HTML for each scenario and toggling their visibility using JavaScript upon radio button selection. Alternatively, I can retain the current HTML structure and use JavaScript to dynamically insert the relevant HTML or attribute values specific to international selections. However, I am exploring more efficient methods that are inclusive of scenarios where JavaScript may be disabled or unavailable.