Форум

oopros · #1 (**permalink**) 24.08.2015, 18:13

Нашел готовый код, для валидации 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

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>

oopros · #3 (**permalink**) 24.08.2015, 20:55

странно, но по-моему не работает

рони · #4 (**permalink**) 24.08.2015, 21:09

Сообщение от oopros

но по-моему не работает

какие ваши доказательства?

oopros · #5 (**permalink**) 24.08.2015, 21:29

http://c2n.me/3myPY8U
скрин. Ввожу email и иконки валидности не выводятся.

рони · #6 (**permalink**) 24.08.2015, 21:34

Сообщение от oopros

Ввожу email и иконки валидности не выводятся.

вам нужно прописать необходимый css для этого

.validate + span {тут размеры хотябы}

oopros · #7 (**permalink**) 24.08.2015, 21:45

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

У меня был такой css рабочий с одной формой. Но почему-то с его применением ваш код тоже не работает

рони · #8 (**permalink**) 24.08.2015, 21:50

Сообщение от 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>

oopros · #9 (**permalink**) 24.08.2015, 22:05

Спасибо за помощь, все получилось!

Форум

Справочник

Discord чат

Курсы javascript