动态创建字段的Jquery验证 [英] Jquery Validation for Dynamically Created Fields
问题描述
我有基本的javascript代码,可以生成如下所示的输入文本区域
I have basic javascript code to generate input text areas as below
$("#btnAdd").click(function (e) {
var itemIndex = $("#container input.iHidden").length;
e.preventDefault();
var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden' name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/> <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount'/> <br /><br />");
$("#container").append(newItem);
});
我有一个用于此动态字段的表格.我正在为此表单的其他元素使用jquery验证器.现在,我也想验证此动态创建的字段.
And i have a form for this dynamic fields. I am using jquery validator for this form for other elements. Now i also want to validate this dynamicly created fields.
对于静态字段,这里是我的工作验证脚本.
For static fields here my working validation scripts.
$('#frm_register').validate({
focusInvalid: false,
ignore: "",
rules: {
FirstName: {
required: true
} ....
这里是我的动态字段示例.
And here sample of my dynamic fields.
<input type="text" id="InvoiceNumber_0__InvoiceNumber" placeholder="Fatura Numarası" name="[0].InvoiceNumber">
<input type="text" id="Interests_0__InterestText" placeholder="Fatura Tutarı(TL)" name="[0].Amount">
<input type="text" id="InvoiceNumber_1__InvoiceNumber" placeholder="Fatura Numarası" name="[1].InvoiceNumber">
<input type="text" id="Interests_1__InterestText" placeholder="Fatura Tutarı(TL)" name="[1].Amount">
推荐答案
您可以使用 .rules('add')
方法在创建新输入元素后立即...
You could use the .rules('add')
method immediately after the new input element is created...
$("#btnAdd").click(function (e) {
var itemIndex = $("#container input.iHidden").length;
e.preventDefault();
var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden' name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/> <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount'/> <br /><br />");
$("#container").append(newItem);
// add the rules to your new item
$('Interests_' + itemIndex + '__Id').rules('add', {
// declare your rules here
required: true
});
});
或者,对于像required
这样的简单规则,您可以在创建新元素时将required="required"
属性添加到新元素中.
Alternatively, for a simple rule like required
, you could just add the required="required"
attribute to the new element when you create it...
$("#btnAdd").click(function (e) {
var itemIndex = $("#container input.iHidden").length;
e.preventDefault();
var newItem = $("<span class='badge badge-success'>" + itemIndex + "</span> <input id='Interests_" + itemIndex + "__Id' type='hidden' value='' class='iHidden' name='Interests[" + itemIndex + "].Id' /><input type='text' id='InvoiceNumber_" + itemIndex + "__InvoiceNumber' placeholder='Fatura Numarası' name='[" + itemIndex + "].InvoiceNumber'/> <input type='text' id='Interests_" + itemIndex + "__InterestText' placeholder='Fatura Tutarı(TL)' name='[" + itemIndex + "].Amount' required='required' /> <br /><br />");
$("#container").append(newItem);
});
这篇关于动态创建字段的Jquery验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!