рони,
Разобрался, вроде ве работает правильно, поле имя и email валидируется как надо, только не пойму как удалить disabled. Надо чтобы изначально кнопка была НЕактивной, после того как все поля становятся валидными, кнопка должна становиться активной. Однако если опять поле сделать невалидным, то кнопка опять должна становиться неактивной. Не пойму как сделать это. Пробовал так, но ничего не получается:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.text-error-input {
border: 1px red solid !important;
background: #FFB647 !important;
}
</style>
<form method="get">
<input type="text" name="author_vo" id="ticket-author" class="form-control input__no-radius" placeholder="Ваше имя" maxlength="50" value="">
<input type="email" name="email_author_vo" id="ticket-author-email" class="form-control input__no-radius" placeholder="Ваш Email" value="">
<input name="" type="submit" id="submit" value="send" disabled="disabled">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
var patternName = /^([a-zA-Zа-яёА-ЯЁ0-9_. -]{2,6}$)/;
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
$(function(){
var isCorrectName=function() {
$(this).toggleClass('text-error-input', !patternName.test(this.value));
}
$("#ticket-author").on("input", isCorrectName);
var isCorrectEmail=function() {
$(this).toggleClass('text-error-input', !patternEmail.test(this.value));
if(patternName.test(this.value) && patternEmail.test(this.value)){
$("#submit").removeAttr("disabled");
console.log("disabled - УДАЛЕН");
}else{
$("#submit").attr("disabled", "disabled");
console.log("disabled - НА МЕСТЕ");
}
}
$("#ticket-author-email").on("input", isCorrectEmail);
$("form").submit(function() {
$("#ticket-author").trigger("input");
$("#ticket-author-email").trigger("input");
return !$(".text-error-input").length
})
});
</script>
</body>
</html>
|
ozoro,
var patternName = /^([a-zA-Zа-яёА-ЯЁ0-9_. -]{2,6}$)/;
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
$(function(){
var isCorrectName=function() {
$(this).toggleClass('text-error-input', !patternName.test(this.value));
disabledSend();
}
$("#ticket-author").on("input", isCorrectName);
var isCorrectEmail=function() {
$(this).toggleClass('text-error-input', !patternEmail.test(this.value));
disabledSend();
}
$("#ticket-author-email").on("input", isCorrectEmail);
function disabledSend()
{
$("#submit").prop("disabled", $(".text-error-input").length||!$("#ticket-author").val().trim()||!$("#ticket-author-email").val().trim());
}
$("form").submit(function() {
$("#ticket-author").trigger("input");
$("#ticket-author-email").trigger("input");
return !$(".text-error-input").length
})
});
|
рони,
Огромная благодарность за быструю и четкую помошь! |
рони,
Заметил один момент. Если поля становятся валидными, то кнопка становится активной. Но если после того как кнопка стала активной поле сделать невалидным, НО не пустым, то кнопка продолжает оставаться активной. Однако если поле сделать пустым, то кнопка становится неактивной. Как это исправить? То есть, чтобы в любом случае если одно из полей становится невалидно, то кнопка тоже должна быть неактивной. |
рони,
А все, извиняюсь, это я накосячил. Поменял класс, то есть сделал два класса .err-textbox .ok-textbox а в вот здесь:
$("#submit").prop("disabled", $(".err-textbox").length||
забыл поменять |
рони,
Единственное, подскажи еще один момент, если при валидном поле добавлять, а не при НЕвалидном удалять классы, то это можно сделать только так:
$(this).toggleClass('err-textbox', !patternName.test(this.value));
$(this).toggleClass('ok-textbox', patternName.test(this.value));
или есть решение поизящнее? |
Цитата:
var ok = patternName.test(this.value);
$(this).toggleClass('err-textbox', !ok)
.toggleClass('ok-textbox', ok);
|
Цитата:
|
рони,
То есть фактически это одно и тоже, если вот так записать:
$(this).toggleClass('err-textbox', !patternName.test(this.value)).toggleClass('ok-textbox', patternName.test(this.value));
только сокращается число знаков, так как значение patternName.test(this.value) переменной ok присваиваем, а также остается только один $(this) - элемент, который указываетс только в начале. |
Цитата:
|
| Часовой пояс GMT +3, время: 09:21. |