Проверьте, заполнены ли все обязательные поля в конкретном div
У меня есть некоторые поля формы, которые динамически генерируются из базы данных. Есть входы, флажки, переключатели, текстовые поля и выбор. Все поля находятся в родительском div с ID dynamic-form-fields. Некоторые поля имеют атрибут required.
Это многоступенчатая форма, поэтому каждый «шаг/страница» должен быть проверен, прежде чем переходить к следующему шагу. Так что форма не отправляется.
Как я могу проверить, заполнены ли все обязательные поля в div dynamic-form-fields?
Вот как выглядит мой HTML-код:
<input type = "text" name = "dff[]" placeholder = "Name" required>
<input type = "text" name = "dff[]" placeholder = "Date of Birth">
<input type = "text" name = "dff[]" placeholder = "Email" required>
<input type = "radio" name = "gender" value = "Male" required>
<input type = "radio" name = "gender" value = "Female" required>
<select name = "pet">
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "bird">Bird</option>
</select>
<button id = "check">Check</button>
<script>
document.getElementById("check").onclick = function () {
if () {
alert('error please fill all fields!');
}
};
</script>
Как видите, некоторые поля обязательны для заполнения, а некоторые нет. Каждый раз он разный, поэтому решение должно быть динамичным. Существуют также различные типы ввода, такие как выбор, радио, флажок, текст и т. д. Как я могу убедиться, что каждое поле «требуется» внутри идентификатора div dynamic-form-fields заполнено?
Что я пробовал:
Может быть, что-то вроде этого, но как мне получить каждый тип ввода (текст, радио, флажок, выбор и т. д.) Под идентификатором div dynamic-form-fields?
$('#dynamic-form-fields input:required').each(function() {
if ($(this).val() === '')
alert('error please fill all fields!');
});
@CodeManiac Привет, я видел твой ответ, я обновил вопрос. Это многоэтапная форма, поэтому ваша предыдущая форма не будет работать, поскольку я на самом деле не отправляю форму. Это foreach цикл внутри div dynamic-form-fields.
Почему бы не просто <form validate>?
если это многошаговая форма, то, что вы должны сделать, это проверить значения только до шага, а не все значения, и при отправке вы должны проверить все значения,
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
document.getElementById("check").onclick = function() {
let allAreFilled = true;
document.getElementById("myForm").querySelectorAll("[required]").forEach(function(i) {
if (!allAreFilled) return;
if (!i.value) allAreFilled = false;
if (i.type === "radio") {
let radioValueCheck = false;
document.getElementById("myForm").querySelectorAll(`[name=${i.name}]`).forEach(function(r) {
if (r.checked) radioValueCheck = true;
})
allAreFilled = radioValueCheck;
}
})
if (!allAreFilled) {
alert('Fill all the fields');
}
};<div id = "myForm">
<input type = "text" name = "dff[]" placeholder = "Name" required>
<input type = "text" name = "dff[]" placeholder = "Date of Birth">
<input type = "text" name = "dff[]" placeholder = "Email" required>
<input type = "radio" name = "gender" value = "Male" required>
<input type = "radio" name = "gender" value = "Female" required>
<select name = "pet" required>
<option value = "">Select a pet</option>
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "bird">Bird</option>
</select>
</div>
<button id = "check">Check</button>Но есть проблема, select не работает и тоже radio не работает
Я исправил поле выбора, которое будет работать на радио, и обновите здесь @pixie123 для выбора, вам нужно иметь невыбранное значение по умолчанию без какого-либо значения, чтобы заставить его работать
Хорошо, спасибо! но проблема в том, что у меня даже нет value. Как я могу заставить это работать, если это так: <option selected disabled>Select a pet</option>
Я исправил это и для радио, пожалуйста, проверьте. Дайте мне знать, если возникнут какие-либо другие проблемы
Радио не работает: jsfiddle.net/n6b1oxrv, а также select с опцией без значения не работает: jsfiddle.net/n6b1oxrv/1
Посмотрите на эту скрипку. Кажется, я забыл обновить свой ответ jsfiddle.net/02hoa3d7. Я тоже обновил свой ответ. Извините за это.
Нет проблем, все работает, спасибо. Но как насчет того, чтобы выбрать опцию по умолчанию <option selected disabled> и она обязательна? Смотрите это: jsfiddle.net/b9Lfyc6h должен выдать ошибку, так как нужно выбрать select.
Использовать отключено при выборе, а не при выборе
В редакторе фрагментов есть кнопка "Аккуратный". Пожалуйста, используйте его.
Готово @Andreas, спасибо за ваше предложение, я использовал vscode для форматирования
Действительно отличный ответ, спасибо @BlackMamba
Спасатель жизни!!
Вы можете проверить, доступен ли атрибут required или нет, как,
$('#dynamic-form-fields').each(function() {
var hasRequired = $(this).attr('required');
if (typeof hasRequired !== "undefined" && hasRequired !== false) {
// This is required inputs.
}
}
Ссылка: Связь
Вы можете сохранить отдельные проверки в зависимости от типа ввода, учтите следующее:
var isEmpty = false;
$("#check").on('click', function() {
isEmpty = false
$('input[type=text]:required').each(function() {
if ($(this).val() === '')
isEmpty = true;
});
var radioSelected = false;
//$('input[name=gender]:required').each(function() {
$('input[type=radio]:required').each(function() {
if ($(this).is(':checked'))
radioSelected = true;
});
if (!radioSelected)
isEmpty = true;
if ($("[name=pet]").val() == "")
isEmpty = true;
//if (!$(".cb").is(":checked"))
// isEmpty = true;
if (isEmpty)
alert('error please fill all fields!');
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" name = "dff[]" placeholder = "Name" required>
<input type = "text" name = "dff[]" placeholder = "Date of Birth">
<input type = "text" name = "dff[]" placeholder = "Email" required>
<input type = "radio" name = "gender" value = "Male" required>
<input type = "radio" name = "gender" value = "Female" required>
<select name = "pet" required>
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "bird">Bird</option>
</select>
<!--<input type = "checkbox" class = "cb" required />-->
<button id = "check">Check</button>@pixie123 рад, что помог
извините, но select и checkbox не работают при добавлении и необходимости
Вы можете использовать :invalid, чтобы сделать это.
Демо:
$('#check').on("click", function(){
let valid = true;
$('[required]').each(function() {
if ($(this).is(':invalid') || !$(this).val()) valid = false;
})
if (!valid) alert("error please fill all fields!");
else alert('valid');
})<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" name = "dff[]" placeholder = "Name" required>
<input type = "text" name = "dff[]" placeholder = "Date of Birth">
<input type = "text" name = "dff[]" placeholder = "Email" required>
<input type = "radio" name = "gender" value = "Male" required>
<input type = "radio" name = "gender" value = "Female" required>
<select name = "pet" required>
<option selected disabled>Select a pet</option>
<option value = "dog">Dog</option>
<option value = "cat">Cat</option>
<option value = "bird">Bird</option>
</select>
<button id = "check">Check</button>Можете ли вы привести пример?
Отредактировал мой ответ. Пожалуйста, проверьте.
Проголосовал. Проверка атрибута «:invalid» — простое и отличное решение. Вместо этого я использовал атрибут «:valid». Для проверки электронной почты я определил тип ввода = «электронная почта» и позволил браузеру проверить, является ли введенное значение электронной почтой или нет. Позже использовал это при проверке формы validForm = $("#email").is(':valid');
Вы добавляете их в div или они поставляются в div из базы данных?