jQuery在填充前一个表单字段时验证下一个3表单字段onkeyup

Question

我有一个表单，当按下提交并且表单字段propBacklink 有一个值时，以下 3 个字段（X、Y、Z）也会被验证。这与它们的值无关，因为它们是只读的。 Ajax 调用根据其 Ajax 调用中的变量返回 true 或 false。

我的问题是，如何强制验证表单字段propBacklink 的字段（X、Y、Z）onkeyup？

propBacklink: {
    required: false,
    url: true,
    remote: {
	url: "backlinkInDB.php",
	type: "post"
    },
    rules: {
	CheckNextFields: true
    }
},

$.validator.addMethod("CheckNextFields", function( value ) {

	this.element($("[name='X']")).validate();
	this.element($("[name='Y']")).validate();
	this.element($("[name='Z']")).validate();

});

Answer 1

由于您的 OP 不包含任何代码，因此我的答案将不包含代码...

如何强制验证表单字段propBacklink 的字段（X、Y、Z）onkeyup？

默认情况下，插件在提交的click 上评估整个表单，并在keyup 和focusout 上单独评估每个字段（在click 上为radio，checkbox，和select。）

由于您想在触发propBacklink 字段时评估一组字段，因此您需要使用the .addMethod() method 为propBacklink 编写一个新方法（规则）。

• 在此自定义函数中，您可以使用this.element() 触发对任何元素的验证。

  this.element(element); // the field being evaluated by the custom method: propBacklink
  this.element($('[name="X"]')); // field with name="X"
  

• 仅将此新规则分配或声明给一个字段propBacklink。 X、Y 和 Z 将根据新自定义规则的函数中包含的 this.element() 进行验证。

• 注意hundreds of examples posted here和documentation within the tag Wiki。

---

编辑：

我不知道你想用这种在用户无法直接控制的readonly 字段上触发验证的方案来完成什么。

下面将检查X、Y和Z是否有效，如果其中任何一个验证失败，则返回错误。

$.validator.addMethod("CheckNextFields", function(value, element) {

    return this.optional(element) || (this.element($("[name='X']")) && this.element($("[name='Y']")) && this.element($("[name='Z']")));

}, "X, Y, and Z are not valid.");

（当然，如果你想验证它们，你还需要为X、Y和Z分配一些验证规则。否则，你会触发什么？） em>

您的规则对象的格式也有点混乱。您应该将规则放在 rules 对象中。它们由字段名称的键值对和每个字段的规则列表组成。

$('#yourform').validate({
    rules: {
        propBacklink: {
            // rules for propBacklink
            required: false,  // <- superfluous (default)
            url: true,
            remote: {
                url: "backlinkInDB.php",
                type: "post"
            },
            CheckNextFields: true
        },
        X: {
            // rules for X
        },
        Y: {
            // rules for Y
        },
        Z: {
            // rules for Z
        },
        ....
    },
    ....