У меня есть форма с серией радио пунктов. Если пользователь выбирает указанную запись c на одном из элементов радио (отсутствующий элемент), я использую JQuery, чтобы добавить класс bootstrap is invalid для двух указанных c входов в форме вместе с меткой, запрашивающей чтобы добавить детали и отключить кнопку отправки, чтобы остановить отправку формы.
$(function () {
$("input[name=optradio]:radio").click(function () {
if ($('input[name=optradio]:checked').val() == "2") {
$('textarea[name=sentTo]').addClass('is-invalid');
$('input[name=dateSent]').addClass('is-invalid');
$('#removedMSG').text("You must update this field prior to saving");
$('#removedMSG2').text("You must update this field prior to saving");
$('#submit').prop('disabled', true);
} else {
$('textarea[name=sentTo]').removeClass('is-invalid');
$('input[name=dateSent]').removeClass('is-invalid');
$('#submit').prop('disabled', false);
}
});
});
Я хотел бы добавить дополнительные проверки, чтобы убедиться, что пользователь обновляет два входа (один текстовой), прежде чем я повторно включите кнопку отправки.
Я знаю, что могу использовать следующее для проверки изменений ввода
$("textarea[name=sentTo]").on("input", function(){
$('textarea[name=sentTo]').removeClass('is-invalid');
});
Это прекрасно работает. Однако я не знаю, как интегрировать все это вместе:
Таким образом, пользователь обычно выбирает радио, недопустимый объект добавляется в 2 поля ввода, а кнопка отправки отключается - пользователь заполняет 2 поля по мере необходимости и только тогда, когда оба поля были обновлены, после чего мы снова активируем кнопку отправки.
Я думаю, что мне нужно утверждение if, но я не могу понять, что код правильный.
Я пытался
if `$("textarea[name=sentTo]").on("input") && $("textarea[name=dateSent]").on("input")`
но это не работает
Благодаря Мамум я использую код ниже.
$(function () {
$('input[name=optradio]:radio').click(function () {
if ($('input[name=optradio]:checked').val() == "2") {
$('textarea[name=sentTo]').addClass('is-invalid');
$('input[name=dateSent]').addClass('is-invalid');
$('#removedMSG').text("You must update this field prior to saving");
$('#removedMSG2').text("You must update this field prior to saving");
$('#submit').prop('disabled', true);
$('#submit').addClass('btn-danger');
$('#submit').removeClass('btn-primary');
} else {
$('textarea[name=sentTo]').removeClass('is-invalid');
$('input[name=dateSent]').removeClass('is-invalid');
$('#submit').prop('disabled', false);
$('#submit').addClass('btn-primary');
$('#submit').removeClass('btn-danger');
}
});
});
var sentTo = false;
var dateSent = false;
$("textarea[name=sentTo], input[name=dateSent]").on("input", function(){
if($(this).attr('name') == 'sentTo') {
sentTo = true;
$(this).removeClass('is-invalid');
}
if($(this).attr('name') == 'dateSent') {
dateSent = true;
$(this).removeClass('is-invalid');
}
if(sentTo && dateSent){
$('#submit').prop('disabled', false);
$('#submit').addClass('btn-primary');
$('#submit').removeClass('btn-danger');
}
});