Проверка формы "на лету"

12
J
На сайте с 08.06.2006
Offline
844
1404

Есть простенькая форма.

ФИО

Меил

Телефон

Нужно организовать:

Юзер "стает на" поле "ФИО"

Вводит ФИО

Стает на другое поле "Меил" или "Телефон" (Скажем так поле "ФИО" "теряет фокус")

Автоматом происходит проверка поля на условие "[а-Я]+/s[а-Я]+/s[а-Я]+"

Надпись возле поле появляется автоматом в зависимости от исполнения условия введенной фразой.

И так остальные поля

Кнопка "Отправить" стает доступной если по всем полям проходит проверка успешно.

Как это попроще реализовать?

psics
На сайте с 02.04.2009
Offline
130
#1

http://jqueryvalidation.org/ посмотрите тут

J
На сайте с 08.06.2006
Offline
844
#2

Желательно простым js

---------- Добавлено 13.05.2015 в 16:32 ----------

Вот вроде то что надо

<input type="text" name="email" size="30" onchange="var pattern=/['А-я','\s']/; if(pattern.test(this.value))alert('Проверьте поле Ваш e-mail и/или телефон');">

только, чтобы не алерт, справа или под строчкой ввода "сообщение выводилось"

---------- Добавлено 13.05.2015 в 16:34 ----------

только не if(pattern.test(this.value)), а if(pattern.text(this.value)) должно быть?

---------- Добавлено 13.05.2015 в 17:19 ----------

<input type="text" name='fio' onchange="var pattern=/['А-я','\s']/; if(!pattern.fio(this.value)) document.getElementById('result').innerHTML = 'BED INPUT'"><div id=result></div>

вроде должно работать

но не работает

поправьте!

B3
На сайте с 09.12.2014
Offline
21
#3

Тогда уже как-то так

<input type="text" name='fio' onchange="var antipattern=/[^А-я\s]/; if(antipattern.test(this.value)) {var info = 'BED INPUT'; } else { info = 'Good input'; } document.getElementById('result').innerHTML =info; "><div id="result"></div>

Но навешивать так обработчики не рекомендуют уже очень давно

рыбу не убить
J
На сайте с 08.06.2006
Offline
844
#4
br3t:
Но навешивать так обработчики не рекомендуют уже очень давно

а почему бы?

---------- Добавлено 14.05.2015 в 10:08 ----------

а как еще кнопку "Отправить" сделать неактивной пока все поля не будут верно введены?

J
На сайте с 08.06.2006
Offline
844
#5

Почитал немного

Решил так

Есть

<input onkeyup="changeButtonStatus()" type=text name=fio ok=1 size=30 onchange="var antipattern=/[^а-я\s]/; if(antipattern.test(this.value)) {var info = '<font color=red>Введено не верно.</font> Пример: Иванов Иван Иванович'; } else { info = '<font color=green>OK!</font>'; добавить к счетчику +1} document.getElementById('fio').innerHTML = '<br>' +info; "></input><span id=fio></span><br>

<br><font size=5><b>Ваша дата рождения</b></font> <br>строго в формате год-месяц-день.<br><input onkeyup="changeButtonStatus()" type=text name=vozrast size=30 onchange="var antipattern=/[^\d{4}-\d{2}-\d{2}]/; if(antipattern.test(this.value)) {var info = '<font color=red>Введено не верно.</font>Пример: 1978-02-12'; } else { info = '<font color=green>OK!</font>'; добавить к счетчику +1 } document.getElementById('vozrast').innerHTML = '<br>' +info; "></input></input><span id=vozrast></span>

<script type="text/javascript">
var f=document.forma;
function changeButtonStatus(){
f.start.disabled=(счетчик==2) ? false : true;
}
changeButtonStatus();
</script>

вводил счетчик как

var k; k=k+1;

но переменную к нужно глобальной сделал.

подскажите!

siv1987
На сайте с 02.04.2009
Offline
427
#6
joost:
но переменную к нужно глобальной сделал.

window.переменная

P
На сайте с 25.05.2007
Offline
103
#7
joost:
но переменную к нужно глобальной сделал.

Я слышал, есть такой способ

Хотя, это ж опять основы JS. Все время забываю о вашей религии "Зачем учебники, когда есть форум?"

coolakov.ru/tools (http://coolakov.ru/tools/): определение конкурентов (http://coolakov.ru/tools/most_promoted/), кластеризация запросов (http://coolakov.ru/tools/razbivka/) и т.д.
J
На сайте с 08.06.2006
Offline
844
#8
else {var k=100; info = '<font color=green>OK!</font>'; } document.getElementById('fio').innerHTML = '<br>' +info + window.k; \"></input><span id=fio></span>

видит как undefined

---------- Добавлено 14.05.2015 в 17:43 ----------

перед импутами попробовал

<script type="text/javascript">
var f=document.forma;
function changeButtonStatus(){
f.start.disabled=(k==2) ? false : true;
}
changeButtonStatus();
var k=100;
</script>

тоже ундефинед

siv1987
На сайте с 02.04.2009
Offline
427
#9
joost:
видит как undefined

var k и window.k это две разные переменные в локальной области видимости.


<script>

window.k = 1;
(function(){
var k = 2;
alert(k);
alert(window.k);
})();
(function(){
alert(k);
alert(window.k);
})();

</script>
dkameleon
На сайте с 09.12.2005
Offline
386
#10
joost:
Нужно организовать:
Юзер "стает на" поле "ФИО"
Вводит ФИО
Стает на другое поле "Меил" или "Телефон" (Скажем так поле "ФИО" "теряет фокус")
Автоматом происходит проверка поля на условие "[а-Я]+/s[а-Я]+/s[а-Я]+"
Надпись возле поле появляется автоматом в зависимости от исполнения условия введенной фразой.

не морочьте себе голову, вам всё равно это ещё на сервере проверять.

Дизайн интерьера (http://balabukha.com/)
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий