html5 required attribute to fire jquery event

Question

Я делаю форму, в которой я использую атрибут required на его элементах. Теперь рассмотрим следующую ситуацию:

Форма делится на две вкладки: General Details и Additional Details. Поэтому, отправляя форму, если я оставляю нужное поле пустым на заметной вкладке, пользователь может просмотреть сообщение. Но предположим, что пользователь находится на первой вкладке, а ошибка появляется на второй вкладке, тогда пользователь не может просмотреть всплывающее окно ошибки, и он не знает, почему форма не отправляется.

Я ищу способ, которым может быть запущено событие jQuery, всякий раз, когда возникает ошибка атрибута.

В этом случае я могу запрограммировать отображение вкладки, на которой происходит ошибка.

Обратите внимание, что я знаю, что могу использовать проверку формы на основе JS/jQuery, но главное, что эта форма генерируется Grails, а обязательное поле автоматически применяется в зависимости от базы данных. Поэтому я не могу использовать проверку JS на основе формы.

Answer 1

Посмотрите, как выбирается требуемое поле с: недействительный класс псевдо:

jQuery(document).ready(function(){ 
 

 
    jQuery('button').on('click',function(){ 
 
    jQuery('input:invalid').css('background-color', '#F00'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="required test"> 
 
    <input type="text" required="required" /> 
 
    <button>click</button> 
 
</form>

Вы могли бы просто проверить для видимости полей, и если не дано пройти до родительской вкладки , дайте родительской вкладке класс, который отмечает метку вкладки как содержащую что-то недействительное.

Answer 2

Один из способов - использовать кнопку отправки и вызывать метод myValidationFunction() JavaScript как действие. (action="myValidationFunction();").

Другой способ - использовать кнопку и вызвать метод myValidationFunction() JavaScript, как на событии Click этой кнопки. После этого внутри myValidationFunction() вы можете использовать метод checkValidity() для проверки правильности формы сразу или определенного элемента и запуска вашего настраиваемого кода для перехода на конкретную вкладку, если есть ошибка, чтобы показать пользователю. function myValidationFunction() { if ($('#myInput')[0].checkValidity()) { // code to move to the particular tab } }