仅允许在表单中输入一个输入字段

时间:2014-04-17 08:51:56

标签: jquery html

我的表格大约有20到25个字段。我需要实现以下要求

在所有字段中,有4个特定字段需要进行以下验证

  • 如果没有填充这些字段,则突出显示字段并显示错误Atleast one is required
  • 如果填充了多个字段,则突出显示字段并显示错误只需要一个字段。

我从JSON文件中获取这些字段的选择器。以下是字段HTML的外观示例

<input type="text" name="s_18_1_2_0" value="" aria-labelledby="DC2_AP2-T_Transport_speed_-_Business_Label" aria-label="AP2-T Transport speed - Business" style="height: 30px; width: 140px;" maxlength="250" class="siebui-input-align-left ui-autocomplete-input siebui-input-popup undefined" autocomplete="off" role="combobox" tabindex="0" aria-readonly="false" aria-describedby=" s_18_1_2_0_icon">

<input type="text" name="s_18_1_8_0" value="" aria-labelledby="DC2_Pair_in_Operator_Label" aria-label="Pair in Operator trunk" style="height: 30px; width:150px;" maxlength="250" tabindex="0" class="siebui-input-align-left dc2-invalid" aria-readonly="false" title="Pair in Operator trunk is required field">

我已经能够编写以下代码来选择所有字段

for(var i = 0; i < param.length; i++){
    selector = param[i].replace(/\s/g,"_") + "_Label";
    input ? input += ", input[aria-labelledby=" + selector + "]" : input = "input[aria-labelledby=" + selector + "]";

    $(input).each(function(e){
        //if($(this).val() != "")
        SiebelJS.Log(this);
    });

}

此代码选择我需要执行验证的字段,但主要难点是突出显示部分,因此我需要选择验证失败的字段。我可以使用过滤器吗?

任何帮助都将非常感谢!

1 个答案:

答案 0 :(得分:0)

首先用你的风格声明一个类:

    <style type="text/css">
    .error {
        border:1px solid red;
        background-color:yellow;
    }
</style>

然后尝试以下代码:

   var maxLimit = 0;
        var minLimit = 0;
        $(input).each(function () {
            if ($(this).val().length < 1) {
                minLimit++;
            } else {
                maxLimit++;
            }
        });
        if (minLimit == $(input).length) {
            $(input).addClass("error");
            alert("Message for required field");
        }
        else if (maxLimit > 1) {
            $(input).addClass("error");
            alert("Message to fill only 1 input value, not more");
        }
        else if (minLimit != $(input).length && maxLimit < 2) {
            $(input).removeClass("error");
        }

这可能会对你有帮助。