jQuery 验证插件 - 基于选中的单选按钮的最小文本输入量

Question

HTML:

<form method="post" class="form" action="/forms/" id="basicDonationForm" name="basicDonationForm">
   <div class="line">
      <div class="control">
         <label>Method of Payment:</label>
         <div class="radio">
            <input type="radio" name="basicDonationFormPayMethod" id="basicDonationFormPayMethodCC" value="Credit Card">
            <input type="radio" name="basicDonationFormPayMethod" id="basicDonationFormPayMethodOther" vaue="Other">
         </div>
      </div>
   </div>
   <div class="line" style="padding-bottom:20px;">
   <div class="control">
      <label for="basicDonationFormAmount">Amount you will donate:</label>
      <input type="text" name="basicDonationFormAmount" id="basicDonationFormAmount">
      </div
   </div>
   <div class="line line-buttons"><a class="button" href="javascript:void(0);"><span>Submit</span></a></div>
</form>

金额字段需要为：

如果选中 basicDonationFormPayMethodCC，则最少为 18
如果选中 basicDonationFormPayMethodOther，则最少为 10

到目前为止我的规则：

rules: {
    basicDonationFormPayMethod: {
        required: true
    },
    basicDonationFormAmount: {
        number: true,
        required: true,
        special: true
    }
}

我已经开始使用 jQuery.validator.addMethod()，但我发现的所有示例都使用传递的参数来检查元素的值。我不确定使用一个元素的规则将一个表单元素与另一个表单元素进行比较所需的语法。

我的javascript:

    jQuery.validator.addMethod("special", function (value, element, param) {
        if ($("input[name='basicDonationFormPayMethod']:checked").length > 0){
            var currentDonation = $("#basicDonationFormAmount").val();
            var radioVal = $('input:radio[name=basicDonationFormPayMethod]:checked').val();
            if (radioVal == 'Credit Card') {
                if (currentDonation >= 18) {
                    return true;
                } else {
                    return false;
                }
            } else {
                if (currentDonation >= 10) {
                    return true;
                } else {
                    return false;
                }
            }
        } else {
            return false;
        };
    }, "Choose payment method and enter  or more for credit,  or more for other");

能用，但感觉太臃肿了。如果继承到插件的语法允许，我想简化我的自定义方法。

Answer 1

您不需要编写自定义方法来简单地实现条件规则。它可以通过 rules 对象中的函数来完成。

像这样...

rules: {
    basicDonationFormPayMethod: {
        required: true
    },
    basicDonationFormAmount: {
        number: true,
        required: true,
        min: function() {
            return ($('input:radio[name=basicDonationFormPayMethod]:checked').val() == "Credit Card") ? 18 : 10;
        }
    }
},
messages: {
    basicDonationFormAmount: {
        min: "Choose payment method and enter  or more for credit,  or more for other"
    }
}

jQuery 验证插件 - 基于选中的单选按钮的最小文本输入量

jQuery Validation Plugin - Minimum amount for text input based on radio button checked

javascript

jquery

jquery-validate