Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → JavaScript, TypeScript, ECMAScript → Перевірка вводу
Для відправлення відповіді ви повинні увійти або зареєструватися
Привіт Вам, форумчани!
Чи можна за допомогою JavaScript організувати перевірку вводу в режимі реального часу?
Скажімо, ми маємо елемент <input type="text">. Чи можна робити перевірку в той час як користувач вводить кожен новий символ?
<input type="text" onchange="javascript:...">
<input type="text" onchange="check();" onkeyup="check();">
Можна. jQuery не jQuery? Чистий JavaScript? Якщо тільки onchange, то буде працювати тільки тоді, коли користувач щось змінив а потім змінив фокус введення. Ще потрібно відслідковувати такі дії як вставка з буферу обміну і вирізання тексту з поля вводу а також подію onkeydown.
Дякую, я буду робити таку штуку найближчим часом, то коли я знайду для себе підходящий шаблон або напишу що треба - кину сюди код.
<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(), але безрезультатно.
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. Можете будь ласка розказати детальніше?
<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.');
}
});З вашою допомогою уже вдалось написати такий код:
<!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.
1.
if(text.length>500){
return false;
}2. додайте у функцію activate_submit
console.log(email_correct);
console.log(name_correct);
console.log(text_correct);можливо після якої перевірки у вас значення скидується на фолс або ще щось типу цього.
Дякую, запрацювало!
Якщо хтось буде шукати:
Приклад перевірки даних в формі при введенні кожного наступного символу (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>Не можливо, а точно. Створіть нову тему.
Я думаю, що можна і правила прочитати. Зокрема п. 3.6. Модератора вже повідомив, не хвилюйтеся.
koza4okvasja, попередження за порушення Правил форуму.
І раджу не сперечатися, а дослухатися і створити окрему тему для вашої проблеми.
Приклад перевірки даних в формі при введенні кожного наступного символу (javascript):
.....
Теж саме розбираюсь з перевіркою форм, в мене таке питання.
Я собі так думаю, що браузер відтворює сторінку послідовно читаючи код сторінки сайту. Перший рядок, другий, третій і так до кінця.
Тому Перевірку форми за Прикладом 1, що Ярослав подав, не зовсім розумію (Тобто я так розумію, як варіант натиснув кнопку "submit" відповідно браузер виконує action="addcomment.php).
Саме тут і питання, коли скрипт встигає перервати передачу даних для addcomment.php, якщо поле не вірно заповнене?
Зустрічав виконання перевірки за Прикладом 2, тут питань нема, в тілі форми стоїть умова, якщо onsubmit="return validate_form ();" виконується скрипт перевірки форми. Тут все послідовно.
2Анатолій
jQuery('input[id=comment_author]').on('input keyup cut paste blur', check_name);Це означає що якщо ви міняєте поле comment_author у вас зразу відбувається валідація. Тобто спрацьовує функція check_name
Анатолій
Мені здається, що вигляд сторінки формується після того, як броузер опрацює всі файли, що підключені в документі + сам документ. В якій послідовності це відбувається я Вам не підкажу. Однак, на 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;
/* код */Це приблизно, насправді може бути інакше, але близько до цього.
Вибачайте, можливо пишу не в ту тему. Я початківець у програмуванні. Колись давніше мав справу з Паскалем, але лише вивчав ази. І тепер почав вчити код 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/. Він хоч і російськомовний, але там все дуже детально описано, є живі приклади коду, задачі.
Анатолій
Мені здається, що вигляд сторінки формується після того, як броузер опрацює всі файли, що підключені в документі + сам документ. В якій послідовності це відбувається я Вам не підкажу. Однак, на 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 змінні "піднімаються вгору" у межах області видимості. Причому фігурні дужки, які позначають блок коду, не впливають на підняття змінних. Всі змінні, оголошені у тілі функції, "піднімаються" незалежно від структури коду до початку функції. Така поведінка характерна тільки для функцій і для глобальної області видимості.
Для відправлення відповіді ви повинні увійти або зареєструватися