<form id="form2" class="mfp-with-anim mfp-hide formular"> <p>Обратный звонок</p> <span>Введите ваше имя:</span> <input type="text" name="name" placeholder="Ваше имя" pattern="^[а-яА-ЯёЁa-zA-Z]+$" required="true" /><br /> <span>Введите ваш номер:</span> <input type="text" name="phone" placeholder="Ваш телефон" pattern="^((8|\+3)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required="true" /><br /> <button>Перезвоните мне</button> <input type="hidden" name="text" value="Обратный звонок"> </form>

Everywhere a regular expression works, but not on the iPhone. An empty form is sent.

  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

1 answer 1

You can look at the support of the attribute attribute by browsers and notice that:

Safari supports the pattern attribute, but allows the form to be submitted if the value entered does not match the pattern.

Alternatively, you can pay attention to the h5Validate plugin.

Supported Platforms:

  • PC: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
  • Mobile: iPhone, Android, Palm WebOS

Example of use:

Paste the following code before the closing </body> on any page with an HTML5 form. If it uses validation rules, everything will work as if by magic.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.h5validate.js"></script> <script> $(document).ready(function () { $('form').h5Validate(); }); </script>

Your example using the plugin:

 $(document).ready(function() { $('form').h5Validate({ errorClass: 'error' }); }); 
 .error { background-color: pink; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdn.rawgit.com/ericelliott/h5Validate/master/jquery.h5validate.js"></script> <form id="form2" class="mfp-with-anim mfp-hide formular"> <p>Обратный звонок</p> <span>Введите ваше имя:</span> <input type="text" name="name" placeholder="Ваше имя" pattern="^[а-яА-ЯёЁa-zA-Z]+$" required="true" /> <br /> <span>Введите ваш номер:</span> <input type="text" name="phone" placeholder="Ваш телефон" pattern="^((8|\+3)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$" required="true" /> <br /> <button>Перезвоните мне</button> <input type="hidden" name="text" value="Обратный звонок"> </form>