Обработчик формы
здравствуйте, есть обработчик формы
$(document).ready(function(){ var pattern = /^[а-яА-Яa-zA-ZёЁ ]{3,15}$/i; var name = $('#name'); name.blur(function(){ if(name.val() != '' && name.val() !='Имя'){ if(name.val().search(pattern) == 0){ $('#valid1').html(' <img src="http://modus-crimea.ru/images/galochka.gif" />'); //$('#submit').attr('disabled', false); name.removeClass('error').addClass('ok'); }else{ $('#valid1').text(''); $('#submit').attr('disabled', true); name.addClass('error'); } }else{ $('#valid1').text(''); name.addClass('error'); $('#submit').attr('disabled', true); } }) }); $(document).ready(function(){ var pattern = /^[a-z.0-9_-]+@[a-z0-9-]+\.[a-z]{2,6}$/i; var email = $('#email'); email.blur(function(){ if(email.val() != ''){ if(email.val().search(pattern) == 0 && email.val() !='Email'){ $('#valid').html(' <img src="http://modus-crimea.ru/images/galochka1.gif" />'); //$('#submit').attr('disabled', false); email.removeClass('error').addClass('ok'); }else{ $('#valid').text(''); $('#submit').attr('disabled', true); email.addClass('error'); } }else{ $('#valid').text(''); email.addClass('error'); $('#submit').attr('disabled', true); } }); }); $(document).ready(function(){ var pattern = /^[а-яА-Я,.0-9! ]{3,60}$/i; var subject = $('#subject'); subject.blur(function(){ if(subject.val() != '' && subject.val() !='Тема сообщения'){ if(subject.val().search(pattern) == 0){ $('#valid2').html(' <img src="http://modus-crimea.ru/images/galochka2.gif" />'); //$('#submit').attr('disabled', false); subject.removeClass('error').addClass('ok'); }else{ $('#valid2').text(''); $('#submit').attr('disabled', true); subject.addClass('error'); } }else{ $('#valid2').text(''); subject.addClass('error'); $('#submit').attr('disabled', true); } }); }); $(document).ready(function(){ var pattern = /^[а-яА-ЯЁё,.0-9!a-zA-Z-!""'@:;+=#№%&* \n\r]{3,600}$/i; var message = $('#message'); message.blur(function(){ if(message.val() != '' && message.val() !='Текст сообщения'){ if(message.val().search(pattern) == 0){ $('#valid3').html(' <img style="vertical-align:80px" src="http://modus-crimea.ru/images/galochka3.gif" />'); //$('#submit').attr('disabled', false); message.removeClass('error').addClass('ok'); }else{ $('#valid3').text(''); $('#submit').attr('disabled', true); message.addClass('error'); } }else{ $('#valid3').text(''); message.addClass('error'); $('#submit').attr('disabled', true); } }); }); в каждой функции закомментировано включение кнопки submit подскажите как сделать чтоб кнопка активировалась только тогда когда все поля будут заполнены правильно? |
пытался сделать так
$(document).ready(function(){ if($('#name').hasClass("ok") && $('#email').hasClass("ok") && $('#subject').hasClass("ok") && $('#message').hasClass("ok")) { $('#submit').attr('disabled', false); } }); не работает |
Попробуй $('#submit').prop('disabled', false);
|
Вариант подхода к валидации форм:
http://www.w3schools.com/js/js_validation.asp |
Попробуй $('#submit').prop('disabled', false);
так тоже не работает( |
Цитата:
мне бы с этим разобраться.. |
Вариант:
1. Создать функцию высшего порядка validateForm ( принимает отдельные функции-валидаторы в качестве аргументов ) где параметр vaidatorList это массив функций-валидаторов [ fn1, fn2, ..., fnN ] validateForm = function ( validatorList ) { ... } которая возвращает false, если хоть один из валидаторов вернул false 2. Создавать необходимые валидаторы и передавать в качестве аргументов: validateForm( [ fn1, fn2, ..., fnN] ); 3. Создать функцию-обработчик события для onsubmit, скажем: onSubmitForm = function () { return validateForm( [ fn1, fn2, ... , fnN ] ); } |
Цитата:
|
galochka.gif, galochka1.gif, galochka2.gif, ... - они что настолько различны, что одной картинкой не обойтись? )
|
Костыли ( не видя html ):
if ( $( '#name' ).hasClass( "ok" ) && $( '#email' ).hasClass( "ok" ) && $( '#subject' ).hasClass( "ok" ) && $( '#message' ).hasClass( "ok" ) ) { $( '#submit' ).attr( 'disabled', false ); } добавить в конец ВСЕХ анонимных коллбэков .blur() |
Цитата:
они одинаковые но когда прописываешь одну картинку на второй анимация не воспроизводится( :blink: |
Вся проверка у вас заключена в шаблоне рег. выражения, а современные браузеры давно уже поддерживают атрибут pattern полей формы. Если введенное значение не соответствует шаблону pattern, то форму браузер не отправит. То есть проверку посредством JS можно выполнять только для старых браузеров. И при этом достаточно всего одной функции, в которой будет создавать new RegExp по значению pattern, а идентификатором поля сообщения об ошибке может служить например имя поля, как свойство объекта хранящего такие сообщения.
|
Цитата:
Цитата:
|
;)
|
Часовой пояс GMT +3, время: 21:32. |