Tagged: , , ,

Viewing 1 reply thread
  • Author
    Posts
    • May 21, 2014 at 9:37 pm #1743
      kjprince
      Member

      Has anyone found a way to add a phone number input that validates the entry?

      I tried using the attributes parameter and adding the HTML5 type="tel" but it’s overridden.

      I ended up adding the maxcharacters attribute but that’s not gonna work too well. I suppose I could validate with jQuery but that’s also messy.

    • May 22, 2014 at 9:54 am #1744
      Steve
      Keymaster

      @kjprince– The HTML5 pattern element will validate a text box using a regular expression. For an international phone number, like +99(99)9999-9999, you would use this in the attributes array:
      'pattern' => '[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}'

      If the user doesn’t enter the proper format, they will receive the standard HTML5 error message: “Please match the requested format”. So you may want to include the format in the field description or placeholder.

      You can also change the HTML5 message with a bit of javascript.

      <script type="text/javascript">
  var telField = document.getElementById("ID_OF_FIELD");
telField.setCustomValidity(telField.value + " That is not a properly formatted phone number! Please try again.");
</script>

      Here’s an awesome article that explains it in more detail >

      Let us know if this works for you.

  • Author
    Posts
Viewing 1 reply thread
  • You must be logged in to reply to this topic.