Проверяйте обязательные поля при обходе каждого поля ввода

Question

У меня есть некоторые динамически генерируемые элементы управления вводом HTML. Некоторые элементы управления имеют обязательный атрибут. Когда я пересекаю эти поля, я хочу сфокусировать пустое поле и проверить. Но я хочу избежать скрытого поля. Я должен добавить только проверить обязательный атрибут. Также хочу избежать скрытого поля. это код, который я пробовал.

$("input , select, textarea").each(function() {
     var element = $(this)
     if (element.val() == "")
           $(this).focus()
           return false
 });

Answer 1

Ответ

Из-за того, как работает валидация - особенно в Chrome, вам необходимо обойти обычную валидацию формы. Для этого вам нужно установить атрибут novalidate для тега form и затем предоставить пользовательскую проверку для вашего события submit.

почему?

По умолчанию Chrome проверяет форму перед отправкой, что является отличной идеей, но, к сожалению, на практике этот процесс не выполняется, поскольку он не позволяет элементам hidden находиться в форме. Фактически он выдает ошибку ( недопустимый элемент управления формы с именем = '' не может быть сфокусирован ). Не вдаваясь в то, что я лично думаю об этом недостатке дизайна, это может быть неприятным препятствием, о котором вы не знаете, пока не столкнетесь с ним.

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

---

Пример:

$( "form" )
	.on( "submit", function( e ) {
	e.preventDefault();
	let hidden_required = [],
		invalid_form = false;
	$( "form" )
		.children( "input:text, select, textarea" )
		.each( function( i, ele ) {
		let prop = ele.tagName === "textarea" ? "textContent" : "value";
		if ( ele.required && ele[ prop ] == "" ) {
			if ( ele.classList.contains( "hidden" ) ) {
				ele.required = false;
				hidden_required.push( ele );
			} else {
				ele.focus();
				invalid_form = true;
			}
		}
	} );
	if ( !invalid_form ) {
		// do ajax submit
		alert( "valid form" );
	} else {
		// do alert or whatever
	}
	hidden_required.forEach( function( ele ) {
		ele.required = true;
	} );
	return false;
} );

.hidden {
visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form novalidate>
<input /><br>
<input required /><br>
<textarea></textarea><br>
<input class="hidden" required>
<input class="hidden">
<input type="submit"  value="submit">
</form>

Answer 2

Вы можете использовать функцию attr, чтобы получить подробную информацию о теге input вашего HTML, например: $(this).attr('hidden') вернет значение атрибута текущего входного тега.

Проверьте скрипку для рабочего примера.