05.05.2019, 20:20
|
 |
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
рони,
Разобрался, вроде ве работает правильно, поле имя и 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, 05.05.2019 в 20:32.
|
|
05.05.2019, 20:32
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
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
})
});
|
|
05.05.2019, 20:43
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
рони,
Огромная благодарность за быструю и четкую помошь!
|
|
05.05.2019, 23:08
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
|
рони,
Заметил один момент.
Если поля становятся валидными, то кнопка становится активной. Но если после того как кнопка стала активной поле сделать невалидным, НО не пустым, то кнопка продолжает оставаться активной. Однако если поле сделать пустым, то кнопка становится неактивной.
Как это исправить? То есть, чтобы в любом случае если одно из полей становится невалидно, то кнопка тоже должна быть неактивной.
|
|
05.05.2019, 23:22
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
рони,
А все, извиняюсь, это я накосячил.
Поменял класс, то есть сделал два класса
.err-textbox
.ok-textbox
а в вот здесь:
$("#submit").prop("disabled", $(".err-textbox").length||
забыл поменять
Последний раз редактировалось ozoro, 05.05.2019 в 23:29.
|
|
05.05.2019, 23:25
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
рони,
Единственное, подскажи еще один момент, если при валидном поле добавлять, а не при НЕвалидном удалять классы, то это можно сделать только так:
$(this).toggleClass('err-textbox', !patternName.test(this.value));
$(this).toggleClass('ok-textbox', patternName.test(this.value));
или есть решение поизящнее?
|
|
06.05.2019, 10:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
Сообщение от ozoro
|
|
или есть решение поизящнее?
|
возможно ...
var ok = patternName.test(this.value);
$(this).toggleClass('err-textbox', !ok)
.toggleClass('ok-textbox', ok);
|
|
06.05.2019, 13:23
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от ozoro
|
|
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
|
Все разрешено, так что такая проверка не имеет смысла, она будет верна только по прихотям того или иного почтового сервера. Достаточно проверки /.+@.+\..+/ |
|
06.05.2019, 17:43
|
|
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
рони,
То есть фактически это одно и тоже, если вот так записать:
$(this).toggleClass('err-textbox', !patternName.test(this.value)).toggleClass('ok-textbox', patternName.test(this.value));
только сокращается число знаков, так как значение
patternName.test(this.value)
переменной ok присваиваем, а также остается только один $(this) - элемент, который указываетс только в начале.
Последний раз редактировалось ozoro, 06.05.2019 в 17:49.
|
|
06.05.2019, 17:52
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,103
|
|
|
Сообщение от ozoro
|
|
остается только один $(this),
|
передача данных по цепочке методов, основная фишка jquery |
|
|
|
