0

如何使用具有名称模式的 ids 的 jQuery 插件验证表单，例如#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,...（来自 DB 的 ID）我该如何实现？

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

提前致谢。

4

4 回答 4

4

此外，与这个问题类似，有一个有效的答案：

jQuery Validate set rule使用通配符查找目标字段

这是一个答案以及其他人所缺乏的东西......一个工作演示：

使用 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"
        }
    });
});

jsFiddle 演示

于 2013-01-15T19:10:03.727 回答
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'}});
于 2013-01-14T21:04:25.653 回答
0

你会更好地使用类，但如果你需要使用 id，你可以使用类似这样的东西

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

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

于 2013-01-14T21:08:43.933 回答
0

我认为问题在于您如何构建页面。我假设你有类似的东西

<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"
        }
    }
});

但是，如果您要动态生成输入名称，那么您就是将自己置于需要单独执行所有操作的位置。所以我希望这不是你正在做的。

于 2013-01-14T21:12:01.907 回答