Повторение скрипта покругу - Валидация
Здравствуйте, эта валидация меня убивает, не могу сообразить как закончить скрипт, чтоб при каждом новом клике по инпуту скрипт заного проходил валидацию.
<html> <head> </head> <body> <div id="name_error"></div><br> <div id="tel_error"></div><br> <div id="code_error"></div><br> <br> <input type="text" id="name" maxlength="30"><br> <input type="text" id="tel" maxlength="10"><br> <input type="text" id="code" maxlength="5"><br> <br> <input type="button" value="valiDate" onclick="valiDate();"> <script> function valiDate() { var name = document.getElementById('name'); var name_error = document.getElementById('name_error'); var tel = document.getElementById('tel'); var tel_error = document.getElementById('tel_error'); var code = document.getElementById('code'); var code_error = document.getElementById('code_error'); var num = /^[0-9]*$/; var abc = /^[a-z A-Z]*$/; if (name.value == ""){ name_error.innerHTML = 'Error name.'; //return; } if (abc.exec(name.value) == null) { name_error.innerHTML = 'Error name.'; //return; } if (tel.value == ""){ tel_error.innerHTML = 'Error tel.'; //return; } if (num.exec(tel.value) == null) { tel_error.innerHTML = 'Error tel.'; //return; } if (tel.value.length < 10){ tel_error.innerHTML = 'Error tel.'; //return; } if (code.value == ""){ code_error.innerHTML = 'Error code.'; //return; } if (code.value.length < 5){ code_error.innerHTML = 'Error code.'; //return; } return; alert('ok'); } </script> </body> </html> Поля не заполняю кликаю на инпут, вылетают три ошибки, заполняю первое поля и кликаю на инпут опять, по задумке скрипт должен повторяться заного и первой ошибки уже быть не должно, а не чего не происходит, помогите плиз, таю уже, не въеду ? |
Всё повторяется, просто первая ошибка была выведена при первом клике, а при втором не стёрта, стереть её можно в секции else.
|
lamer, перед запуском скрипта очищайте поля
name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = ""; и после return; ваш alert(); в конце не сработает... |
Ребят я прошу прощения за наглость, но с этим вариантом голову сломал, не выходит не чего. Пожалуйста если не трудно можно пример кусочка кода ?
|
<html> <head> </head> <body> <div id="name_error"></div><br> <div id="tel_error"></div><br> <div id="code_error"></div><br> <br> <input type="text" id="name" maxlength="30"><br> <input type="text" id="tel" maxlength="10"><br> <input type="text" id="code" maxlength="5"><br> <br> <input type="button" value="valiDate" onclick="valiDate();"> <script> function valiDate() { var name = document.getElementById('name'); var name_error = document.getElementById('name_error'); var tel = document.getElementById('tel'); var tel_error = document.getElementById('tel_error'); var code = document.getElementById('code'); var code_error = document.getElementById('code_error'); name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = ""; var num = /^[0-9]*$/; var abc = /^[a-z A-Z]*$/; if (name.value == ""){ name_error.innerHTML = 'Error name.'; //return; } if (abc.exec(name.value) == null) { name_error.innerHTML = 'Error name.'; //return; } if (tel.value == ""){ tel_error.innerHTML = 'Error tel.'; //return; } if (num.exec(tel.value) == null) { tel_error.innerHTML = 'Error tel.'; //return; } if (tel.value.length < 10){ tel_error.innerHTML = 'Error tel.'; //return; } if (code.value == ""){ code_error.innerHTML = 'Error code.'; //return; } if (code.value.length < 5){ code_error.innerHTML = 'Error code.'; //return; } //return; alert('ok'); } </script> </body> </html> |
Ну и раскомментировать все return, кроме последнего (который вообще надо убрать), иначе alert будет всегда выводиться, а не только когда нет ошибок.
|
Спасибо ребята за помощь.
Вот так мне нужно было: <html> <head> </head> <body> <div id="name_error"></div><br> <div id="tel_error"></div><br> <div id="code_error"></div><br> <br> <input type="text" id="name" maxlength="30"><br> <input type="text" id="tel" maxlength="10"><br> <input type="text" id="code" maxlength="5"><br> <br> <input type="button" value="valiDate" onclick="valiDate();"> <script> function valiDate() { var name = document.getElementById('name'); var name_error = document.getElementById('name_error'); var tel = document.getElementById('tel'); var tel_error = document.getElementById('tel_error'); var code = document.getElementById('code'); var code_error = document.getElementById('code_error'); name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = ""; var num = /^[0-9]*$/; var abc = /^[a-z A-Z]*$/; if (name.value == ""){ name_error.innerHTML = 'Error name.'; } if (abc.exec(name.value) == null) { name_error.innerHTML = 'Error name.'; } if (tel.value == ""){ tel_error.innerHTML = 'Error tel.'; } if (num.exec(tel.value) == null) { tel_error.innerHTML = 'Error tel.'; } if (tel.value.length < 10){ tel_error.innerHTML = 'Error tel.'; } if (code.value == ""){ code_error.innerHTML = 'Error code.'; } if (code.value.length < 5){ code_error.innerHTML = 'Error code.'; }else{ alert('ok'); } } </script> </body> </html> |
ну не совсем так, ok будет выводиться только, если правильно заполнено последнее поле, хотя в других полях могут быть ошибки.
Также предпоследняя проверка поглощается последней (тоже самое c tel: '' поглощается <10) |
<html> <head> </head> <body> <div id="error"></div> <br> <form id="form"> <input type="text" id="name" maxlength="30"><br> <input type="text" id="tel" maxlength="10"><br> <input type="text" id="code" maxlength="5"><br> </form><br> <input type="button" value="valiDate" onclick="valiDate();"> <script> var d = document; function valiDate() { var error = d.getElementById("error"), form = d.getElementById("form"), j = true; error.innerHTML = ""; var num = /^[0-9]*$/; var abc = /^[a-z A-Z]*$/; for (i=0; i < form.elements.length; i++) { switch (form.elements[i].id) { case "name": { (form.elements[i].value == "" || abc.exec(form.elements[i].value) == null) ? (error.innerHTML += "Error name<br>", j = false) : ""; break; } case "tel": { (num.exec(form.elements[i].value) == null || (form.elements[i].value.length < 10)) ? (error.innerHTML += "Error tel<br>", j = false) : ""; break; } case "code": { (form.elements[i].value == "" || form.elements[i].value.length < 5) ? (error.innerHTML += "Error code<br>", j = false) : ""; break; } } } j == true ? alert("ok") : alert("error"); } </script> </body> </html> |
lord2kim, спасибо удобная валидация, правда трудно было разобраться =)
|
Часовой пояс GMT +3, время: 05:26. |