Обязательный атрибут html5 для запуска события jquery

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

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

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

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

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


javascript forms html jquery required
person Chetan    schedule 17.08.2015    source источник
comment
недопустимые поля html получают псевдокласс :invalid, возможно, вы могли бы что-то с этим придумать?   -  person user3154108    schedule 17.08.2015
comment
Спасибо за быстрый ответ. Но извините, это не работает с атрибутом required. :invalid работает, если мы вводим неверные данные в поле типа abc внутри type="email". Ссылка- davidwalsh.name/demo/valid-pseudo-class.php   -  person Chetan    schedule 17.08.2015
comment
Как только обязательное поле пытается быть отправлено или теряет фокус, не имея значения, оно действительно получает псевдокласс :invalid рядом с псевдоклассом :required. Что имеет смысл, потому что обязательное поле без значения недействительно.   -  person user3154108    schedule 17.08.2015

Ответы (2)


arrow_upward
3
arrow_downward

Посмотрите, как с помощью псевдокласса :invalid выбирается необходимое поле:

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>

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

person user3154108    schedule 17.08.2015
comment
Спасибо! Это сработало. У меня есть все элементы :invalid, и я могу перебирать их. Спасибо еще раз :-) - person Chetan; 17.08.2015

arrow_upward
0
arrow_downward

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

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

person Raghav Simlote    schedule 18.08.2015