Question

我的页面中有多个表单。某些表单/字段是必需的（类名称requiredForm），而有些则不是。最后一个名为＆＃34;下一个＆＃34;的链接。默认＆＃34;下一个＆＃34;是灰色背景（停用颜色背景）。我想当人们只填写所需的字段/表格，＆＃34;下一页＆＃34;将改为橙色。如果他们没有填写需求字段/表单，那么＆＃34; Next＆＃34;链接将是原样。基本上，有一个表格包括约9-10单选按钮和一个包含约14-15个复选框的表单。我不需要人们检查/点击所有这些。我需要，如果人们点击/或只选择一个，禁用（灰色）链接变为橙色。因此，如果我检查它可能会更灵活，如果所需的表格是空白，灰色链接就是这样。如果所需的表格不是空白，灰色按钮将变为橙色。我试着写这个功能。但是，我不太了解jQuery。这就是为什么，我无法理解当人们填写表格时jQuery是如何理解的。

以下是示例代码表单在我的页面中的存在方式：

<div class="row">
   <form class="myForm requiredForm">
       <input type="radio" id="lb1" name="radio" />
       <input type="radio" id="lb2" name="radio2" />
       <input type="radio" id="lb2" name="radio3" />
   </form>
</div>
<div class="row">
   <p>many Texts</p>
</div>
<div class="row">
   <form class="myForm">
       <input type="text" id="name" name="name" />
       <input type="text" id="email" name="email" />
   </form>" 
</div>
<div class="row">
   <form class="myForm requiredForm">
       <input type="checkbox" />     
       <input type="checkbox" />
       <input type="checkbox" />
</div>
<a href="#" class="deactive">Next</a>

CSS：

.next {
   background: #fa9a37;   // orange link color
   color: #fff;
}
.deactive {
   background: #fafafa;  // grey link color
   color: #333;
}

jQuery的：

$(document).ready(function() {


   $('.deactive').addClass('.next');  // if people fill up the required forms
   $('.deactive').removeClass('.next');  // if people don't fill up the required forms
}

Answer 1

其中一个解决方案是收听输入元素的更改：

$('input').change(function() {
    var conditions = checkForConditions(); // this is where you check if the mandatory inputs are filled in
    if (conditions)
        $('.deactive').addClass('next');
    else
        $('.deactive').removeClass('next');
});

我已根据此处的切换创建了一个小示例：http://jsfiddle.net/5c44z/

你有两个主要错误：

.addClass('.next')应为.addClass('next') - 不需要任何点，因为我们知道它是一个类
在你的CSS中，下一个类是在deactive类之前定义的，因此deactive规则总是会覆盖下一个规则......你可以通过改变顺序或切换类来解决这个问题（所以你不能解决这个问题）他们两个在同一时间）

条件检查功能可能是这样的，假设你把一个类mandatory放到每个必填字段：

function checkForConditions() {
    var ret = true;
    $('.mandatory').each(function() {
        if ( !$(this).val() ) { 
            ret = false;
        }
    });
    return ret;
}

以下是一个示例（第一个输入字段是必填字段）：http://jsfiddle.net/5c44z/1/

Answer 2

您可以使用正确的客户端验证库（即：jQuery验证器），也可以快速回答您的问题：

$(".deactivate").on('click', function() {
    if !($('input').is(':checked')) {
        console.log("checkboxes and radios are unchecked");
    }
    if (($("#name").val() == "") && ($("#name").val() == "")) {
        console.log("textboxes are empty");
    }
});

注意 Shomz答案涉及每次输入更改时触发事件。这在效率方面更有意义。

Answer 3

您可以将所有内容放在一个form标记下，为必填字段提供一个类，比如required，然后

  var allDone = true;
  $(".myForm input.required").each(function() {
     if($(this).val() === "") {
        allDone = false;
        return false;
     }
  });
  if (allDone)
    $('.deactive').addClass('next');
  else
    $('.deactive').removeClass('next');

Answer 4

请在所有必填字段中添加required课程。

并尝试此代码

<div class="row">
   <form class="myForm requiredForm">
       <input type="radio"  class="required" id="lb1" name="radio" />
       <input type="radio"   class="required" class="required"  id="lb2" name="radio2" />
       <input type="radio"  class="required" id="lb2" name="radio3" />
   </form>
</div>
<div class="row">
   <p>many Texts</p>
</div>
<div class="row">
   <form class="myForm">
       <input type="text"  class="required" id="name" name="name" />
       <input type="text"  class="required" id="email" name="email" />
   </form> 
</div>
<div class="row">
   <form class="myForm requiredForm">
       <input  class="required" type="checkbox" />     
       <input  class="required" type="checkbox" />
       <input  class="required" type="checkbox" />
</div>
<a href="#" id="next_link" class="deactive">Next</a>

/ *为每个定义变量，至少有一个选中的元素，如复选框和单选按钮* / var is_radio_checked = false; var is_checkbox_checked = false; var is_other_required_field = true;

$('.required').each(function(){
   var type = $(this).attr('type');
   if( (type == 'radio') && !is_radio_checked){
     is_radio_checked = $(this).is(':checked');
   } else if((type == 'checkbox') && !is_checkbox_checked){
     is_checkbox_checked = $(this).is(':checked');
   } else if( (type == 'text') && is_other_required_field){ 
     var txt_val = $(this).val();
     if(txt_val == ""){
       is_other_required_field = false;
     }
   }     
});

if(is_radio_checked && is_checkbox_checked && is_other_required_field){
  $("#next_link").removeClass('deactive').addClass('next');
}

请查看图片

enter image description here

如何通过jQuery检测表单是否为空白

4 个答案: