Повторение скрипта покругу - Валидация
Здравствуйте, эта валидация меня убивает, не могу сообразить как закончить скрипт, чтоб при каждом новом клике по инпуту скрипт заного проходил валидацию.
<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, время: 12:04. |