Если флажок установлен и поля для ввода не пусты, измените класс кнопки
Я пытаюсь объединить checkbox is checked с функцией keyup, которая дает информацию при записи в поля required.
Я почти сделал это, проблема в том, что если оба условия true (поля не пусты и флажок установлен), submit меняется class только при активации функции keyup. Поэтому, если я запишу поля и затем проверю, checkbox не сработает, потому что последней вещью была проверка. Если я сначала поставлю галочку, а затем заполню inputs, это сработает, потому что последнее, что было keyup. Я пробовал с keyup и change, но это не работает для меня, потому что это не для изменений, если только флажок установлен: отмечен. Вы можете увидеть в прямом эфире здесь. Обязательные входные данные: «nota media», «titular» и флажок.
$('input').on('keyup', function() {
var fields = $(".ss-item-required").find("select, textarea, input").serializeArray();
$.each(fields, function(i, field) {
if ((!field.value) && ($("#customCheck1").is(':checked'))) {
alert(field.name + ' is required');
} else {
$('.btn-inscripcion').removeClass( "disabled" );
}
});
});
HTML:
<form id = "form-inscripciones" style = "width: 100%;">
<div class = "form-group-row align-items-center">
<div class = "container" style = "max-width: 600px;">
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Nombre</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Nombre</div>
</div>
<input type = "text" class = "form-control form-control-lg" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Apellidos</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Apellidos</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">NIF</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">NIF</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Fecha de nacimiento</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Fecha de nacimiento</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Domicilio</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Domicilio</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">CP</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">CP</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Localidad</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Localidad</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Provincia</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Provincia</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Teléfono solicitante</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Teléfono solicitante</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">E-mail</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">E-mail</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Curso que estudia</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Curso que estudia</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Facultad o escuela</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Facultad o escuela</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Titulación</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Titulación</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto ss-item-required">
<label class = "sr-only" for = "inlineFormInputGroup">Nota media</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Nota media</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup" required>
</div>
</div>
</div>
</div>
<div class = "header-section small-header bg-left rosa">
<div style = "max-width: calc(34em + 5vw);">
<h1>DATOS <br> PADRE Y MADRE</h1>
</div>
</div>
<div class = "container" style = "max-width: 600px;">
<div class = "form-group-row align-items-center">
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Nombre padre / Tutor</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Nombre padre / Tutor</div>
</div>
<input type = "text" class = "form-control form-control-lg" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Nombre madre / Tutora</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Nombre madre / Tutora</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Profesión padre / Tutor</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Profesión padre / Tutor</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Profesión madre / Tutora</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Profesión madre / Tutora</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">Teléfono de contacto</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Teléfono de contacto</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup">
</div>
</div>
</div>
</div>
<div class = "header-section small-header bg-left rosa">
<div style = "max-width: calc(34em + 5vw);">
<h1>DATOS BANCARIOS</h1>
</div>
</div>
<div class = "container" style = "max-width: 900px;">
<div class = "form-group-row align-items-center">
<div class = "col-auto">
<label class = "sr-only" for = "inlineFormInputGroup">IBAN</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">IBAN</div>
</div>
<input type = "text" class = "form-control form-control-lg" id = "inlineFormInputGroup">
</div>
</div>
<div class = "col-auto ss-item-required">
<label class = "sr-only" for = "inlineFormInputGroup">Titular</label>
<div class = "input-group mb-3">
<div class = "input-group-prepend">
<div class = "input-group-text">Titular</div>
</div>
<input type = "text" class = "form-control" id = "inlineFormInputGroup" required>
</div>
</div>
<div class = "mx-auto form-inscripcion-end-group ss-item-required">
<div class = "custom-control form-control-lg custom-checkbox">
<input type = "checkbox" class = "custom-control-input" name = "normas" id = "customCheck1" required>
<label class = "custom-control-label" for = "customCheck1">He leído y acepto las <a href = "#" data-toggle = "modal" data-target = "#exampleModalCenter">condiciones</a></label>
</div>
<button type = "submit" id = "confirm" class = "btn-inscripcion disabled">Enviar formulario</button>
</div>
</div>
</div>
</form>
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
220
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Используйте флаг... Вы должны полностью выполнить цикл. Если во время цикла обнаруживается что-то неверное, флаг используется для сохранения этой информации.
РЕДАКТИРОВАТЬ
На этот раз я тщательно проверил Ваш сайт... И протестировал свое решение.
Эта строка была определенно неправильной:
var fields = $(".ss-item-required")
.find("select, textarea, input").serializeArray();
Потому что метод .find() возвращает элементы только из элемента прошлой.ss-item-required. Значит, вы не проверяли все обязательные поля...
Я изменил его на:
var fields = $("select, textarea, input",".ss-item-required");
Он получает все select, textarea, input в контексте .ss-item-required. Итак, теперь у вас действительно есть все необходимые элементы.
Тогда... Не все input имеют атрибут name... Это проблема, потому что он используется в alert()... И может возникнуть проблема, когда вы отправите form.
А пока... Чтобы иметь соответствующий текст alert(), я вместо этого использовал текст связанной метки...
$('input').on('change', function() {
// Get the collection of all required fields
var fields = $("select, textarea, input",".ss-item-required");
// Flag
var okToEnable = true;
fields.each(function(i, field) {
if ( field.type == "text" && field.value= = "" ) {
// Get the label's text
var label_text = $(field).prev("div").find(".input-group-text").text();
alert(label_text + ' is required');
// if incorrect at least once, turn the flag to false
okToEnable = false;
// Exit the each loop to avoid alerting more than once
return false;
}
if ( field.type == "checkbox" && !field.checked ) {
// Get the label's text
var label_text = $(field).next("label").text();
alert(label_text + ' is required');
// if incorrect at least once, turn the flag to false
okToEnable = false;
// Exit the each loop to avoid alerting more than once
return false;
}
});
// After the loop, act based on the flag
if (okToEnable && $("#customCheck1").is(':checked')){
$('.btn-inscripcion').removeClass( "disabled" );
}
});
ммм Попробуйте изменить эту часть условия: (field.value! = "") Всегда есть значение... Даже пустое. я отредактировал.
—
07.04.2019 16:37
Я обновил код, но все еще происходит, извините. Вы можете проверить здесь, попробовать написать любой ввод и посмотреть, как скрипт удаляет класс кнопки: residenciarucab.es/rucab/inscripciones.php
—
07.04.2019 16:42
Ясно ... Попробуйте последнее редактирование моего ответа. Поскольку флажок — это последний ввод, который проверяет пользователь, лучше использовать событие change и иметь проверенное условие вне цикла.
—
08.04.2019 07:12
Я внес правку... На этот раз я полностью протестировал свое решение. ;)
—
08.04.2019 16:29
Работа сейчас! Так что теперь у меня сомнения: пусть javascript алертит или использовать нужный алерт родного браузера, что лучше? Что ты думаешь.
—
09.04.2019 09:38
alert() — это не самая милая вещь, которую вы можете сделать, конечно... Есть много способов показать сообщение пользователю. Тебе решать.
—
09.04.2019 16:22
Другие вопросы по теме
Добавить параллельный переход во время другого перехода, если выполняется условие
Как мне исправить css, чтобы на маленьких экранах было два столбца?
Как нажать вторую кнопку в IE с VBA, которая имеет тот же идентификатор, но другой элемент onclick
Использование сетки начальной загрузки для отображения элементов из вызова API с помощью ngFor
Пространство между двумя строками в таблице начальной загрузки
Как вы оборачиваете четыре карты вокруг центральной карты?
Html для системы управления контентом
Как центрировать текст относительно другого текста с помощью css?
Отправка идентификатора из ajax в контроллер для удаления данных
Не удается найти таблицы стилей или изображения css - ASP.NET
Похожие вопросы
Как указать, какая строка таблицы при вводе счета в гольф и связанных с ним расчетов
Я хочу создать меню выбора категории и подкатегории в pug и node.js. Где подкатегория изменяется в зависимости от выбранной категории
Как заставить переменную «Счетчик» подсчитывать количество «div», которые создаются случайным образом и исчезают при нажатии на нее
Недопустимые аргументы, переданные для взрыва при использовании ajax
Почему локальное хранилище не работает, даже если оно не должно открываться после обновления страницы?
После jquery hover() css:hover не активируется на моих элементах
Невозможно удалить флажок с помощью JavaScript
Есть ли способ показать кнопку на основе свободного места в коробке, сделанной
Получение пустых массивов при поиске элементов по классу с помощью Jquery
Как создать пагинатор django с помощью ajax?
Я скопировал и вставил этот код, но он не работает. Когда я нажимаю любой ввод, он удаляет отключенный класс, это должно происходить только тогда, когда я пишу все необходимые входные данные...