jQuery - Как применить пользовательский CSS к полям, которые не являются пустыми

0

У меня есть поля с class="required" который имеет пользовательский css.

Когда я отправляю форму, я вижу собственное сообщение об ошибке, которое использует обязательные поля css:

 $(".required").addClass('required-fields');

Изображение 174551

Теперь, когда я заполняю некоторые поля (не все обязательные), и я возвращаю снова форму, возможно, мне нужно увидеть: в полях, у которых есть данные (а не пустые), должен идти другой css. Как пограничный зеленый или что-то в этом роде.

Можно ли сделать с for возможно?

  • 2
    для ответчиков было бы лучше, если бы у вас был прикреплен некоторый код скрипки / HTML.
  • 1
    Is it possible to do with a for maybe? , Да.
Теги:
forms

6 ответов

0
Лучший ответ

Вы можете попробовать что-то вроде этого:

$('.required').removeClass('ok').filter(function(){
    return !!$(this).val();
}).addClass('ok');

Он фильтрует все обязательные поля со значением и добавляет класс "ok";

http://jsfiddle.net/cHPS2/

Поделиться
  • 0
    Огромное спасибо. Очень полезно!
0

Попробуй это:

$('input.required:text').filter(function() {
    return $(this).val() == "";
}).css(...);
Поделиться
0

Вы должны передавать каждый вход с помощью Jquery-селектора, например

var $fields = $('.field');

И проверьте, требуется ли это поле или нет, и если задано значение или нет:

$fields.each(function ($field) {
  if ($field.hasClass('required') && !$field.value) {
     $field.addClass('required-fields');
  }
  else {
    $field.addClass('green-fields');
  }
});

Это быстрый проект :)

Поделиться
0

Проверка формы с обратной связью с пользователем является достаточно распространенным требованием, которое вы можете пожелать использовать плагин, а не кодирование пользовательского решения (изобретать колесо) каждый раз:

http://jqueryvalidation.org/documentation

Поделиться
0

Вы можете попробовать что-то вроде следующего (не может быть более конкретным, потому что вы не предоставили HTML):

$('.required').not('[value=""]').css(...);

С помощью css() вы можете изменить внешний вид своих элементов.

Обновить:

Чтобы добавить к ним класс, попробуйте следующее:

$('.required').not('[value=""]').addClass('className');

Чтобы удалить класс, а затем добавить другой класс (также вы можете использовать toggleClass), попробуйте следующее:

$('.required').not('[value=""]').removeClass('className').addClass('className');

Пример.

Поделиться
  • 0
    Я не думаю, что это сработает. Как: пустой селектор ищет внутренний HTML. Не валь
  • 0
    AFAIK :empty не работает на входах, так как значение не является дочерним элементом ввода. Также ваш последний пример просто удаляет, а затем добавляет тот же класс к тем же элементам.
Показать ещё 1 комментарий
0

Вы можете проверить, имеет ли значение входное значение. Например, if($("#nameInput).value) будет истинным, если оно не пустое. Вы можете добавить класс к этим входам.

for(var i=0;i<inputs.length;i++){
  if(inputs[i].value){
    //enter add class code here
  }
 }
Поделиться
  • 0
    Как я могу установить входные переменные с определенным классом? Например, с помощью $(".required") ? Я имею в виду все входы с этим классом.
  • 0
    var inputs = $(".required"); даст вам массив входов с этим классом. Затем вы можете использовать цикл for для прохождения каждого ввода.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню