0

我有一些遵循如下格式的表单元素：

<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 方法以提供即时反馈在提交表单之前。我已经包含了一个 jQueryrange:规则，用于将用户输入限制在数字范围 [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. 请记住，我的编程背景很少。

4

1 回答 1

0

尝试这个：

演示：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.");

这条规则可以通用。它只是检查放置在 element 之前的 radio 元素是否是checked. 如果是这样，则true仅当文本元素的值为 时才返回100。

它的编写方式，只有在你的type=text元素紧跟在type=radio元素之后才有效。如果您更改 HTML 排列，则需要对其进行调整。

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

演示：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"
        },
    }
});
于 2013-03-21T05:21:42.130 回答