jQuery Validate - 多个输入字段 - 有些是必需的

Question

我有以下问题：

我得到了一个包含 3 个输入字段类型编号的表单。我一直希望只需要 2 个。因此，如果输入 A 和输入 B 被填写，则输入 C 被禁用。但是当用户清除输入 A 时，输入 C 必须可用。等等..所以必须填写2，无论哪两个！

我正在为“毕达哥拉斯理论”制作一个小应用程序，您可以在其中填写两个方面。无所谓2面。

<div class="selector">
    <input type="number" placeholder="A" name="A" id="A">
    <input type="number" placeholder="B" name="B" id="B">
    <input type="number" placeholder="C" name="C" id="C">
</div>

jQuery 验证：

$(".selector").validate({
  rules: {
    // simple rule, converted to {required:true}
    A: "required",
    B: "required",
    C: "required"
  }
});

谁能帮帮我！

Answer 1

我建立在sumeet 的答案之上。这段代码应该是功能齐全的：

$(document).on("change",".selector input",function(e){
    var emptyFields = Array();
    
    $(".selector input").each(function(i){  
        if(!this.value)
        {
            emptyFields.push(this.getAttribute("id"));
        }            
    });
    
    if(emptyFields.length === 1)
    {
        $("#"+emptyFields[0]).attr('readonly', true);
    }
    else
    {
        emptyFields.forEach(function(id) {
            $("#"+id).attr('readonly', false) ;
        });
    }   
});

<div class="selector">
    <input type="number" placeholder="A" name="A" id="A">
    <input type="number" placeholder="B" name="B" id="B">
    <input type="number" placeholder="C" name="C" id="C">
</div>

Answer 2

根据您使用的技术，有两种可能的方法可以满足您的要求。如果你正在计算某个值，你可能需要一个函数，比如 calc()。

1. 首先，更简单的方法是在某些“点击”事件上调用它 元素。在这种情况下，而不是将必需的属性分配给 每个元素，计算前只检查填充了多少 价值就在那里。

2. 可以调用 calc() 的第二个点是 on change() 或 on 具有特定类的每个元素的按键事件。

此功能可用于上述两种情况

function validator(){
    var fields = $(".selector").children();
    var lv,counter=0;
    for(lv=0;lv<fields.length;lv++){
        if($(ss[lv]).val()==""){
            counter++;
        }
    }
    return counter>=2;
}

以下是一些示例用法：

第一种情况：

$("#btnCalc").on("click",function(){
    if(!validator()){
        DO YOUR CALC
    }else{
        alert("Atleast two fields are required to be filled");
    }
    return false;
});

第二种情况：

$(".selector").change(function(){
    if(!validator()){
        //DO YOUR CALC
    }
    else{
        errorDiv.val="Atleast two fields are required to be filled"; //pseudo code :)
    }
    //console.log(fields.length);
    return false;
});

这是一个快速响应，可以使用全局变量优化代码

Answer 3

您可以使用以下代码添加/删除验证 -

根据需要输入B，因为它始终可用

$(".selector").validate({
  rules: {
    // simple rule, converted to {required:true}
    B: "required"
  }
});

现在根据A 中的值添加/删除所需的验证

$('input[name="A"]').keyup(function(){
   if($(this).val().trim()=="")
  {
    $(this).rules("remove", "required");
    $('input[name="C"]').rules("add", "required");
    $('input[name="C"]').removeProp('disabled');
  }
  else
  {
    $(this).rules("add", "required");
    $('input[name="C"]').rules("remove", "required");
    $('input[name="C"]').prop('disabled',true);
  }
}):

Answer 4

$(document).on("change",".selector input",function(e){
    $(".selector input").attr('readonly', false) ; 
    var flag = 0;
    var id;
    debugger;
    $(".selector input").each(function(i){

        if(this.value!="")
        {
            flag++;
        }
        else
        {            
            id  = this.getAttribute("id");
        }    

    });

    if(flag == 2)
        $("#"+id).attr('readonly', true) ;
    else
        $("#"+id).attr('readonly', false) ;

});

我已经更新了刚刚检查的链接-> http://jsfiddle.net/sumeetp1991/dvdvye4p/3/