Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2015, 18:13
Интересующийся
Отправить личное сообщение для oopros Посмотреть профиль Найти все сообщения от oopros
 
Регистрация: 17.10.2014
Сообщений: 28

Валидация E-mail
Нашел готовый код, для валидации Email сообщений.

<script type="text/javascript">

$(document).ready(function() {  
 $("#validate").keyup(function(){
    
    var email = $("#validate").val();
  
    if(email != 0)
    {
    if(isValidEmailAddress(email))
    {
    $("#validEmail").css({
  "background-image": "url('images/validyes.png')"
    });
    } else {
    $("#validEmail").css({
    "background-image": "url('images/validno.png')"
    });
    }
    } else {
    $("#validEmail").css({
  "background-image": "none"
    }); 
    }
  
    });
  
    });
  
    function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
    }
  
  </script>



<input type='text' name='email[1]' id='validate' ><span id='validEmail'></span>


Все отлично работает, но мне нужно делать валидацию, например в нескольких инпут на одной страничке, дописываю нужные инпуты
<input type='text' name='email[2]' id='validate' ><span id='validEmail'></span>

<input type='text' name='email[3]' id='validate' ><span id='validEmail'></span>

<input type='text' name='email[4]' id='validate' ><span id='validEmail'></span>


Но валидация работает только с первым.

Помогите править код, чтобы валидация работала на всех инпутах.

Заранее благодарен.
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2015, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

oopros,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".validate").on('input',function() {

            var email = $.trim(this.value), $span = $(this).next();

            if (email) {
                if (isValidEmailAddress(email)) {
                    $span.css({
                        "background-image": "url('images/validyes.png')"
                    });
                } else {
                    $span.css({
                        "background-image": "url('images/validno.png')"
                    });
                }
            } else {
                $span.css({
                    "background-image": "none"
                });
            }

        });

    });

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        return pattern.test(emailAddress);
    }
</script>
</head>

<body>
   <input type='text' name='email[1]' class='validate' ><span></span>
   <input type='text' name='email[2]' class='validate' ><span></span>
   <input type='text' name='email[3]' class='validate' ><span></span>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2015, 20:55
Интересующийся
Отправить личное сообщение для oopros Посмотреть профиль Найти все сообщения от oopros
 
Регистрация: 17.10.2014
Сообщений: 28

странно, но по-моему не работает
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2015, 21:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oopros
но по-моему не работает
какие ваши доказательства?
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2015, 21:29
Интересующийся
Отправить личное сообщение для oopros Посмотреть профиль Найти все сообщения от oopros
 
Регистрация: 17.10.2014
Сообщений: 28

http://c2n.me/3myPY8U
скрин. Ввожу email и иконки валидности не выводятся.
Ответить с цитированием
  #6 (permalink)  
Старый 24.08.2015, 21:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oopros
Ввожу email и иконки валидности не выводятся.
вам нужно прописать необходимый css для этого

.validate + span {тут размеры хотябы}
Ответить с цитированием
  #7 (permalink)  
Старый 24.08.2015, 21:45
Интересующийся
Отправить личное сообщение для oopros Посмотреть профиль Найти все сообщения от oopros
 
Регистрация: 17.10.2014
Сообщений: 28

<style>
    #validEmail
    {
    margin-top: 4px;
    margin-left: 2px;
    position: absolute;
    width: 16px;
    height: 16px;
    }
    </style>

У меня был такой css рабочий с одной формой. Но почему-то с его применением ваш код тоже не работает
Ответить с цитированием
  #8 (permalink)  
Старый 24.08.2015, 21:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от oopros
У меня был такой css рабочий с одной формой
id уникально неповторимо -- вы бы код чтоли взглянули -- нет же там никаких id
тестируйте код ниже и почитайте что нибудь про html css js
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .validate + span {
    display:  inline-block;
    width: 38px;
    height: 28px;
    background-size:  auto;
    background-repeat: no-repeat;
  }
  </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".validate").on('input',function() {

            var email = $.trim(this.value), $span = $(this).next();

            if (email) {
                if (isValidEmailAddress(email)) {
                    $span.css({
                        "background-image": 'url("http://javascript.ru/forum/images/smilies/dance3.gif")'
                    });
                } else {
                    $span.css({
                        "background-image": 'url("http://javascript.ru/forum/images/smilies/cray.gif")'
                    });
                }
            } else {
                $span.css({
                    "background-image": 'none'
                });
            }

        });

    });

    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
        return pattern.test(emailAddress);
    }
</script>
</head>

<body>
   <input type='text' name='email[1]' class='validate' ><span></span>
   <input type='text' name='email[2]' class='validate' ><span></span>
   <input type='text' name='email[3]' class='validate' ><span></span>
</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 24.08.2015, 22:05
Интересующийся
Отправить личное сообщение для oopros Посмотреть профиль Найти все сообщения от oopros
 
Регистрация: 17.10.2014
Сообщений: 28

Спасибо за помощь, все получилось!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация: unobtrusive и обычная валидация. Как скрестить? dux1 Элементы интерфейса 2 27.07.2015 08:31
Валидация формы в зависимости от значения radio batton housewm Events/DOM/Window 1 10.01.2014 18:46
Валидация пользователя по IP-адресу lazerru Общие вопросы Javascript 1 03.04.2013 12:40
Повторение скрипта покругу - Валидация lamer Общие вопросы Javascript 14 18.07.2012 21:54
Валидация required не работает "на лету" Tomas jQuery 5 25.02.2011 07:08