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 $18 or more for credit, $10 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 $18 or more for credit, $10 or more for other"
    }
}

jQuery Validation Plugin - 基于选中的单选按钮输入文本的最小量

1 个答案: