jQuery - 如何将自定义CSS应用于非空的字段

Question

我有一些class="required"字段，其中包含自定义css。

当我提交表单时，我看到一条自定义错误消息，该消息适用于必填字段 css：

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

现在，当我完成一些字段（并非所有需要）并且我再次提交de form时，也许我需要看到的是：在有数据的字段（非空）中，应该去另一个css。像边境绿或类似的东西。

是否可以使用for？

Answer 1

您可以检查输入是否有值。例如if($("#nameInput).value)如果不是空白则为真。您可以为这些输入添加类。

for(var i=0;i<inputs.length;i++){
  if(inputs[i].value){
    //enter add class code here
  }
 }

Answer 2

您可以尝试以下内容（因为您没有提供HTML而不能更具特色）：

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

使用css()可能会改变元素的外观。

<强>更新

要向他们添加课程，请尝试以下方法：

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

删除一个类，然后添加另一个类（也可以使用toggleClass）试试这个：

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

An Example

Answer 3

您必须使用Jquery选择器（如

）传递每个输入

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

并检查字段是否需要以及是否给出了值：

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

这是一个快速的草案：）

Answer 4

您可以尝试这样的事情：

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

它会使用值过滤所有必填字段，并添加类＆＃39;确定＆＃39;;

http://jsfiddle.net/cHPS2/

Answer 5

试试这个：

$('input.required:text').filter(function() {
    return $(this).val() == "";
}).css(...);

Answer 6

使用用户反馈进行表单验证是一个非常常见的要求，您可能希望每次都考虑使用插件而不是编写自定义解决方案（重新发明轮子）：

http://jqueryvalidation.org/documentation