Пытаюсь сделать валидацию нескольких форм на одной странице и валидация срабатывает только при клике на кнопку отправить.
что я сделал:
1) создал объект Valid, куда добавил функции для валидации разных полей: checkbox, phone, name и тд(полей может быть много)
2) при клике на отправить я достаю id формы и передаю аргументом в функции объекта Valid.name(this.id), а в функциях объекта просто меняю классы и проверяю регулярным выражением
3) валидация срабатывает, но не в реальном времени, но если не передавать аргументы в Valid.name() и другие поля, то валидация происходит в реальном времени, но срабатывает на всех формах
вот демо -
https://codesandbox.io/s/stupefied-bohr-6oqx6?file...
подскажите, что нужно делать, чтобы валидировать несколько форм на странице в реалтайме, в гугле ответа не нашел, там только валидация для одной формы
$(() => {
let Valid = {
name: function (formId) {
let userNameMsg = $(formId).find("div[id*='valid_userName']");
// если не передавать formId, а просто прописать ("from div[id*='valid_userName']")
// то валидация сработает в реалтайме, но на всех формах
let elem = $(formId).find("input[name='userName']");
// eslint-disable-next-line
const reg = /(^[A-Za-z]{1}[a-z]{1,14}( [A-Za-z]{1})?([a-z]{1,14})?$)|(^[А-Яа-я]{1}[а-я]{1,14}( [А-Яа-я]{0,1})?([а-я]{0,15})?$)/;
if (!reg.test(elem.val())) {
Valid.errors = true;
userNameMsg.addClass("valid_error").html("← минимум 2 буквы").show();
elem.removeClass("valid_normal").addClass("valid_wrong");
} else {
userNameMsg.removeClass("valid_error").hide();
elem.removeClass("valid_wrong").addClass("valid_normal");
}
},
phone: function (formId) {
let userPhoneMsg = $(formId).find("div[id*='valid_userPhone");
let elem = $(formId).find("input[name='userPhone']");
// eslint-disable-next-line
const reg = /(^(?!\+.*\(.*\).*\-\-.*$)(?!\+.*\(.*\).*\-$)(\+[0-9]{1} \([0-9]{3}\) [0-9]{3}[-]{1}[0-9]{2}[-]{1}[0-9]{2})$)|(^[0-9]{1,4}$)/;
if (!reg.test(elem.val())) {
Valid.errors = true;
userPhoneMsg
.addClass("valid_error")
.html("← введите корректный номер телефона")
.show();
elem.removeClass("valid_normal").addClass("valid_wrong");
} else {
userPhoneMsg.removeClass("valid_error").hide();
elem.removeClass("valid_wrong").addClass("valid_normal");
}
},
checkbox: function (formId) {
let politicMsg = $(formId).find("div[id*='valid_politic");
let elem = $(formId).find("input[name='politic']");
if (!elem.is(":checked")) {
console.log("tut");
Valid.errors = true;
politicMsg
.addClass("valid_error")
.html("← примите политику обработки данных")
.show();
elem.removeClass("valid_normal").addClass("valid_wrong");
} else {
politicMsg.removeClass("valid_error").hide();
elem.removeClass("valid_wrong").addClass("valid_normal");
}
},
send: function (formId) {
if (!Valid.errors) {
let form = $(`.form-application ${formId}`);
form.find("button").attr("disabled", true);
setTimeout(() => {
form.addClass("form_sended");
form.siblings(".thx-message-form").addClass("form_res_success");
}, 5000);
}
}
};
$("form").on("submit", function (e) {
console.log("tut submit", this);
let obj = $("body");
let formId = "#" + this.id;
console.log("formId", formId);
if (formId === "#courier1") {
obj.animate({ scrollTop: $(formId).offset().top }, 750, function () {
Valid.errors = false;
Valid.name(formId);
Valid.phone(formId);
Valid.checkbox(formId);
Valid.send(formId);
});
}
if (formId === "#courier2") {
obj.animate({ scrollTop: $(formId).offset().top }, 750, function () {
Valid.errors = false;
Valid.name(formId);
Valid.phone(formId);
Valid.checkbox(formId);
Valid.send(formId);
});
}
return false;
});
$("#userName1").change(Valid.fullName);
$("#userPhone1").change(Valid.phone);
$("#politic1").change(Valid.checkbox);
$("#userName2").change(Valid.fullName);
$("#userPhone2").change(Valid.phone);
$("#politic2").change(Valid.checkbox);
});
