Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Повторение скрипта покругу - Валидация (https://javascript.ru/forum/misc/29939-povtorenie-skripta-pokrugu-validaciya.html)

lamer 18.07.2012 05:11

Повторение скрипта покругу - Валидация
 
Здравствуйте, эта валидация меня убивает, не могу сообразить как закончить скрипт, чтоб при каждом новом клике по инпуту скрипт заного проходил валидацию.

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


Поля не заполняю кликаю на инпут, вылетают три ошибки, заполняю первое поля и кликаю на инпут опять, по задумке скрипт должен повторяться заного и первой ошибки уже быть не должно, а не чего не происходит, помогите плиз, таю уже, не въеду ?

bes 18.07.2012 09:20

Всё повторяется, просто первая ошибка была выведена при первом клике, а при втором не стёрта, стереть её можно в секции else.

lord2kim 18.07.2012 09:21

lamer, перед запуском скрипта очищайте поля
name_error.innerHTML = ""; tel_error.innerHTML = ""; code_error.innerHTML = "";

и после return; ваш alert(); в конце не сработает...

lamer 18.07.2012 14:39

Ребят я прошу прощения за наглость, но с этим вариантом голову сломал, не выходит не чего. Пожалуйста если не трудно можно пример кусочка кода ?

lord2kim 18.07.2012 14:42

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

bes 18.07.2012 14:55

Ну и раскомментировать все return, кроме последнего (который вообще надо убрать), иначе alert будет всегда выводиться, а не только когда нет ошибок.

lamer 18.07.2012 15:16

Спасибо ребята за помощь.
Вот так мне нужно было:

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

bes 18.07.2012 15:22

ну не совсем так, ok будет выводиться только, если правильно заполнено последнее поле, хотя в других полях могут быть ошибки.
Также предпоследняя проверка поглощается последней (тоже самое c tel: '' поглощается <10)

lord2kim 18.07.2012 15:59

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

lamer 18.07.2012 20:57

lord2kim, спасибо удобная валидация, правда трудно было разобраться =)


Часовой пояс GMT +3, время: 05:26.