I noticed such a bug or not a bug that in safari, when you click "send" with empty fields, it does not display prompts such as "Fill this field", standard prompts that each browser has in its own way. How to fix this problem or what to read to fix?

<form class="callback" <p>Оставьте заявку и мы вам перезвоним в течении 15 минут.</p> <input type="text" name="Имя" placeholder="Ваше имя..." required> <input type="text" name="Телефон" placeholder="Ваш телефон..." required> <select name="Услуга"> <option value disabled selected>Выбрать услугу</option> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> <option>Вариант 4</option> <option>Вариант 5</option> </select> <button class="button button-white">Отправить</button> </form>
  • one
    Safari does not support the required attribute, only use third-party js plugin to validate the form, or do your own checking for js - Vadim Leshkevich
  • Well, I understood about it, but if I add my own hints, it will be my + standard ones, how can I remove the standard ones? - YourDeveloper
  • one
    Support caniuse.com/#search=required (versions that already have support for required 10.1 Safari and 10.3 iOS Safari). stackoverflow.com/questions/23261301/… . - soledar10

1 answer 1

You can use the usual form validation which returns false otherwise. and yes name in Russian is better not to give

 $('.callback').on('submit', function(){ if ($('input[name=name]').val() == '' || $('input[name=num]').val() == '') { alert('Вы не ввели имя или номер телефона') return false; } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="callback"> <p>Оставьте заявку и мы вам перезвоним в течении 15 минут.</p> <input type="text" name="name" placeholder="Ваше имя..." > <input type="text" name="num" placeholder="Ваш телефон..." > <select name="Услуга"> <option value disabled selected>Выбрать услугу</option> <option>Вариант 1</option> <option>Вариант 2</option> <option>Вариант 3</option> <option>Вариант 4</option> <option>Вариант 5</option> </select> <button class="button button-white">Отправить</button> </form>