@Waist0fer

Как сделать чтоб при введении email загорелась иконка???

Вы знаете как сделать чтоб при введения емаил в строку input если правильно ввёл то загорелась инконка в в виде галочки а если не правильно ввёл то крестик
  • Вопрос задан
  • 121 просмотр
Решения вопроса 1
Igor_307
@Igor_307
Фрилансер
Проверяет при вводе, на лету

$(document).ready(function () {

    function validateEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    $(document).on('keyup', 'input[type=email]', function(){

        const value = $(this).val();

        if(!validateEmail(value)){
            //некорректный email, показать крестик
        }else{
            //некорректный email, показать галочку
        }
    })

});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
qnixdev
@qnixdev
Junior PHP Developer
Вот готовое решение на JQ.
let patternName = /[a-zA-Z0-9.]{6,20}$/;
    $('input[name=login]').blur(function(){
        if($(this).val() != ''){
            $('#textAfterInputLogin').html(''); // убираем надпись требований к логину
            if(($(this).val().length < 6) || ($(this).val().length > 20)){
                $('#valid_login_message').html('<span>Имя пользователя должно содержать</span>').append('<br />').append('<span>от 6 до 20 символов.</span>');
                $('input[type=submit]').attr('disabled', true); // деактивация кнопки отправки
            }else if($(this).val().search(patternName) != 0){ // проверка логина на соответствие регулярному выражению
                $('#valid_login_message').html('<span>Имя пользователя может включать латинские буквы</span>').append('<br />').append('<span>(a-z), цифры (0-9) и точки (.).</span>');
                $('input[type=submit]').attr('disabled', true);
            }else{
                $('input[type=submit]').attr('disabled', false);
            }
        }else{
            $('#valid_login_message').html('');
            $('#textAfterInputLogin').html('<span>Можно использовать буквы латинского алфавита, цифры и точки.</span>');
        }
    });


Далее нужно создать под input пару В которые поместить класс valid_login_message и textAfterInputLogin
Ответ написан
VlasenkoFedor
@VlasenkoFedor
Программист: php, js, go
1. Сделать type="email"
2. Повесить событие на oninput
3. проверять checkValidity
https://developer.mozilla.org/en-US/docs/Web/API/H...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы