1

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

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

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

2

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

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

3

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

<input type="text" onchange="check();" onkeyup="check();">

4

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

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

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.');
        }
    });

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);

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

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>

12

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

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

13

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

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

14

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

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

15

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

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

16

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

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

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

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

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

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



http://не-дійсний-домен/ForumReplace/form.jpg

17

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

2Анатолій

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

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

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

18

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

Анатолій
Мені здається, що вигляд сторінки формується після того, як броузер опрацює всі файли, що підключені в документі + сам документ. В якій послідовності це відбувається я Вам не підкажу. Однак, на w3schools я читав, що JavaScript інтерпритатор переставляє всі оголошення змінних var element; вгору, перед тим як розбирати код і якщо десь всередині .js файлу зустрінеться var element = 2; то цей рядок розіб’ється на дві команди і вгорі файлу з’явиться рядок var element; а в місці ініціалізації залишиться тільки element = 2;
Тобто:

var element_1;
var element_2 = 2;

/* код */

var element_3 = 3;

/* код */

Перетвориться на:

var element_1;
var element_2;
var element_3;

element_2 = 2;

/* код */

element_3 = 3;

/* код */

Це приблизно, насправді може бути інакше, але близько до цього.

19

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

koza4okvasja написав:

Вибачайте, можливо пишу не в ту тему. Я початківець у програмуванні. Колись давніше мав справу з Паскалем, але лише вивчав ази. І тепер почав вчити код JavaScript на сайті codeacademy.com .Ці всі цикли масиви, але є одна проблема. Тут на сайті є компілятор. А от самому спробувати написати щось своє хочеться. А у якій програмі можна скомпілювати написане незнаю. Де б був результат програми. Порадьте де можна компілювати написаний у Javascript код.

Javascript код не компілюється а інтерпретується браузером. Можна створити простий html файлик і вставити туди скрипт.

<!DOCTYPE html>
<html>
    <head>
        <title>MyCode</title>
        <script src="path/to/myscript1.js"></script>
    </head>
    <body>
        <script src="path/to/myscript2.js"></script>
        <script>
            alert('Hello World!!');
        </script>
    </body>
</html>

  Можна підключити скрипт в <head> секції, але це погано, бо браузер зверху вниз проходить по порядку всі теги і коли він знаходить скрипт то призупиняє рендер сторінки поки не виконає скрипт. Тому якщо скрипт захоче доступитися до елементів з секції <body> то її по факту ще не буде.
  Гарним тоном є підключити скрипт перед закриваючим тегом <body>. Тоді на момент запуску скрипта вже будуть створені і поміщені на сторінку всі елементи.
  Ну і можна як задати шлях до скрипта так і вписати його прямо в коді.

Також у сучасних браузерах є така штука як консоль розробника. Викликається Ctrl+Shift+I. Там можна подивитись на фактичну структуру DOM, яку сформував браузер, вставити і редагувати елементи, подивитись на мережеві запити. Ну і там є власне консоль, куди можна вписати код і він одразу виконається.

А для вивчення Javascript ідеально підходить сайт http://learn.javascript.ru/. Він хоч і російськомовний, але там все дуже детально описано, є живі приклади коду, задачі.

20 Востаннє редагувалося taras_kotilok (23.07.2014 16:40:09)

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

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

Анатолій
Мені здається, що вигляд сторінки формується після того, як броузер опрацює всі файли, що підключені в документі + сам документ. В якій послідовності це відбувається я Вам не підкажу. Однак, на w3schools я читав, що JavaScript інтерпритатор переставляє всі оголошення змінних var element; вгору, перед тим як розбирати код і якщо десь всередині .js файлу зустрінеться var element = 2; то цей рядок розіб’ється на дві команди і вгорі файлу з’явиться рядок var element; а в місці ініціалізації залишиться тільки element = 2;

В Javascript є така особливість як "підняття змінних".  Нехай є код.

var x = 100;

function func1() {
    alert(x);
    var x = 10;
    alert(x);

};

func1();

Спочатку ми оголошуємо глобальну змінну x = 100. Тоді оголошуємо функцію.
Інтерпретатор javascript проходить код кілька разів, спочатку він шукає всі оголошення змінних

var x = 10;

і створює ці змінні у даній області видимості. А вже потім виконується код. Але при створенні інтерпретатор не записує в змінні значення. Присвоєння значення відбувається коли коли виконання скрипта дійде до місця, де записано це присвоєння.
У даному прикладі вивід буде таким: "undefined", "10". Cпочатку інтерпретатор у області видимості функції перевизначить глобальну змінну x. Тому перший вивід буде не 100 а undefined. Потім протягом виконання скрипта інтерпретатор дійде до присвоєння значення і після цього змінна х вже матиме значення і виведеться "10".
  Тому і виходить, що Javascript змінні "піднімаються вгору" у межах області видимості. Причому фігурні дужки, які позначають блок коду, не впливають на підняття змінних. Всі змінні, оголошені у тілі функції, "піднімаються" незалежно від структури коду до початку функції. Така поведінка характерна тільки для функцій і для глобальної області видимості.

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