Question

我有一些表格元素遵循这样的格式：

<input type="radio" name="test" value="A"> <input type="text" size="3" name="weightA" id="A"><br>
<input type="radio" name="test" value="B"> <input type="text" size="3" name="weightB" id="B"><br>

我正在使用jQuery Validation插件进行客户端验证。我想对这些字段做的是确保对应于所选单选按钮的文本输入等于100.我已经使用PHP在服务器端成功实现了这个，但是想添加一个JS方法来提供即时反馈在提交表单之前。我已经包含了一个jQuery range:规则来限制数字范围[1-100]内两个文本字段中的用户输入。

我将如何开展这项工作？ jQuery.validator.addMethod是否可以做到这一点？

编辑以回应Sparky的评论，我在下面尝试了一个addMethod：

$.validator.addMethod(
    "selectWt", function(value, element) {
        var selA = $('[name="test"]').val() === "A";
        var selB = $('[name="test"]').val() === "B";

        if (selA && ($("#A").val() !== "100")) {
            return false;
        } else if (selB && ($("#B").val() !== "100")) {
            return false;
        } else return true;
    }, "Selected option must equal 100."
);

这似乎触发了#A但不 #B的验证，显示的错误消息是message:规则指定的错误消息，而不是addMethod指定的一个。请记住，我的编程背景很少。

Answer 1

试试这个：

DEMO：http://jsfiddle.net/maqZe/

$.validator.addMethod("selectWt", function (value, element) {
    if ($(element).prev().is(':checked')) {
        return ($(element).val() === 100);
    } else {
        return true;
    }
}, "Selected option must equal 100.");

此规则可以一般地应用。它只是检查放置在元素之前的无线电元素是否为checked。如果是，则仅当文本元素的值为true时才会返回100。

它的编写方式，只有当type=text元素紧跟type=radio元素后才会起作用。如果您更改HTML安排，则需要进行调整。

通过传递100值作为参数，也可以使其更加灵活。

DEMO：http://jsfiddle.net/NFJUN/

$.validator.addMethod("selectWt", function (value, element, param) {
    if ($(element).prev().is(':checked')) {
        return ($(element).val() === param);
    } else {
        return true;
    }
}, "Selected option must equal {0}.");

...

$('#myform').validate({ // initialize the plugin
    rules: {
        myfield: {
            selectWt: 100 // use a parameter instead of "true"
        },
    }
});

jQuery Validation条件依赖：如果选中单选按钮，则确保文本输入与值匹配

1 个答案: