Приветствую. Есть большая форма. В ней есть два поля: email и телефон. Поля обязательны к заполнению. После заполнения их нужно удалить класс у кнопки. Дополнительно поле email нуждается в валидации. А у поля телефон маска, с помощью input.mask.min. HTML: <div class="panel-body"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6" id="userMail"> <p>Введите электронную почту:</p> <input type="text" name="userMail" id="userMail" placeholder="Адрес электронной почты" class="item" /> <div class="error"></div> </div> <div class="col-xs-12 col-sm-12 col-md-6" id="userPhone"> <p>Введите номер телефона:</p> <input type="text" name="userPhone" id="userPhone" placeholder="Номер телефона" class="item" /> <div class="error"></div> </div> </div> <div class="skip-and-save"> <div class="row"> <div class="skip col-xs-12 col-sm-12 col-md-6" style="line-height:37px;"> Или можете <span data-skip-id="1">пропустить этот шаг</span> </div> <div class="save col-xs-12 col-sm-12 col-md-6 text-right hidden"> <a href="#" class="btn btn-default">Сохранить</a> </div> </div> </div> </div> сделал вот так, но срабатывает только когда кликаешь куда угодно после поля userMail. А как сделать чтоб срабатывало после обоих полей незнаю Код (Javascript): $('.item').blur(function() { var temp = 0; if ($('#userMail input').val() != '') { if ($(this).attr('id') == 'userMail') { var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i; if (pattern.test($(this).val())) { temp = 1; $('#userMail .error').text(''); } else { temp = 0; $('#userMail .error').text('Введите правильный адрес электронной почты'); } } } if (temp == 1 && $('#userPhone input').val() != '') { $('.save').removeClass('hidden'); } else { $('.save').addClass('hidden'); } }); Помогите
Логика канешн.. Вешая событие на класс, jquery каждому элементу его назначает. В данном случае их 2. Зис это тот элемент который вызвал событие, стало быть зис.ид можно узнать ид, а зис.вэлью покажет значенте. Не нужно все подрят оборачивать в jquery!
Хорошо.. Представь что тебе задач нарезали палить форму. Что ты будешь делать если реагировать можешь только на потерю фокуса и только у одного, конкреиного инпута
Когда у любого фокус пропадает запускается функция. Разве что там проверка емаила. Но почему то работает только у первого элемента.
так больше 1 и не надо) 1 и должно быть, только когда поле емаил заполнено правильно, когда не заполнено или заполнено с ошибками то 0
Кароч план такой. Темп тебе ни как не поможет. Делай 2 флага, оба фолс. Не думай что первым будут заполнять. Отработал фокус, смотри элемент этот на ошибки, если есть ошибки ставь одному из флагов фолс иначе тру. Все в этой же функции смотришь если (флаг1 && флаг2) То есть оба тру, убираешь хидден иначе ставишь хидден. Научись мыслить пошагово
Так? Спойлер Код (Javascript): $('.item').blur(function() { var mail = false, phone = false; if ($('#userMail input').val() != '') { if ($(this).attr('id') == 'userMail') { var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i; if (pattern.test($(this).val())) { mail = true; $('#userMail .error').text(''); } else { mail = false $('#userMail .error').text('Введите правильный адрес электронной почты'); } } } if ($('#userPhone input').val() != '') { phone = true; } if (mail && phone) { $('.save').removeClass('hidden'); } else { $('.save').addClass('hidden'); } })
Нет, элемент потерял фокус, тебе пришел this. Сначала смотришь если this.value.trim() == '' ставишь фолс Ща Итак для начала что б по красоте было немного поменяем логику. Ты ведь представляешь что такое объект в js?! Что бы меньше двигаться сделаем флаги в объекте. Код (Javascript): { userMail: false, userPhone: false } теперь сам обработчик Код (Text): var obj = { userMail: false, userPhone: false }; $('.item').blur(function() { if (this.value.trim() == '') obj[this.id] = false; else { //доделывай } //и тут не забудь });