如何使用通配符与jQuery验证插件

Question

我如何验证表单与jQuery插件的id有一个名称模式，如#formNewHouse1， #formNewHouse2，..

?

这段代码只处理一个类型(普通)表单:

$("#formNewHouse").validate({
    rules: {
        formNewHouseName: {
            required: true
        },
        formNewHouseAddress: {
            required: true
        }
    },
    messages: {
        formNewHouseName: {
            required: "Please type a name"
        },
        formNewHouseAddress: {
            required: "Please type an address"
        }
    }
});   

我需要这样的东西，其中X = 2,3,6,18,19，…(id从DB)我怎么能做到这一点?

$("#formNewHouseX").validate({
    rules: {
        formNewHouseNameX: {
            required: true
        },
        formNewHouseAddressX: {
            required: true
        }
    },
    messages: {
        formNewHouseNameX: {
            required: "Please type a name"
        },
        formNewHouseAddressX: {
            required: "Please type an address"
        }
    }
}); 

Answer 1

同样，与这个问题类似，有一个可行的答案:

---

这里有一个答案和一些其他人缺乏的东西…一个工作演示:

使用jQuery的.each()方法初始化所有匹配表单的.validate()。

然后使用内置的rules()方法添加规则，并通过class进行分配。看到文档。

HTML:

<form id="formNewHouse1">
    <input type="text" class="myclass" name="formNewHouseName" />
    <input type="text" class="myclass" name="formNewHouseAddress" />
</form>
<form id="formNewHouse2">
    <input type="text" class="myclass" name="formNewHouseName2" />
    <input type="text" class="myclass" name="formNewHouseAddress2" />
</form>

jQuery:

var myoptions = {
    // contains options for all forms
};
$("form[id^=formNewHouse]").each(function() {
    $(this).validate(myoptions);
});
// the following method must come AFTER .validate()
$('form').find('.myclass').each(function() {
    $(this).rules('add', {
        required: true,
        digits: true, // just another example rule
        messages: {
            required: "Required input",
            digits: "Please only enter digits"
        }
    });
});

<<p> jsFiddle演示/strong>

Answer 2

首先，用一个调用验证所有表单。上次我检查，jQuery Validate没有正确处理验证集合，所以你需要使用.each(或类似的)为每个表单创建一个新的验证器。

$("form[id^=formNewHouse]").each(function() { $(this).validate() });

然后，将类添加到您的字段中，以便您可以批量选择它们并应用规则。

$('.newHouseName').rules('add', {required: true, messages: {required: 'Please type a name'}});
$('.newHouseAddress').rules('add', {required: true, messages: {required: 'Please type an address'}});

Answer 3

你最好使用类但是如果你需要使用id你可以使用像这样的

$("form[id^='formNewHouse']").validate({
    //...
});

这将选择所有id以'formNewHouse'开头的表单元素

Answer 4

我认为问题是你如何构建你的页面。我假设你有像

这样的东西

<form id="formNewHouse1">
    <input type="text" name="newHouseName1" />
    <input type="text" name="newHouseAddress1" />
</form>
<form id="formNewHouse2">
    <input type="text" name="newHouseName2" />
    <input type="text" name="newHouseAddress2" />
</form>

这会导致您在调用每个单独输入以给出验证规则时遇到的问题。但我认为，如果你重组你的HTML，你可以很好地清理一切。你可以给你的表单唯一的名称/id，但保持输入名称相同。

<form id="formNewHouse1" class="formNewHouse">
    <input type="text" name="newHouseName" />
    <input type="text" name="newHouseAddress" />
</form>
<form id="formNewHouse2"  class="formNewHouse">
    <input type="text" name="newHouseName" />
    <input type="text" name="newHouseAddress" />
</form>

然后你可以调用你的验证，就像你在你的帖子，但使用类代替。:

$(".formNewHouse").validate({
    rules: {
        formNewHouseName: {
            required: true
        },
        formNewHouseAddress: {
            required: true
        }
    },
    messages: {
        formNewHouseName: {
            required: "Please type a name"
        },
        formNewHouseAddress: {
            required: "Please type an address"
        }
    }
}); 

如果你动态地生成你的输入名称，那么你就把自己放在了一个需要分别处理它们的位置。所以我希望这不是你在做的。