我正在使用bootstrap / jquery向表单添加行(在运行时)和动态字段(除了静态字段)。我通过formvalidation.io来获得一些想法。第一行是静态的,但其余行是动态的。我为bootstrap中的动态行创建了一个模板(但隐藏了)。当用户单击“+”符号时,它会使隐藏的模板(行)可见。
我正在为添加的每一行字段从0增加host_index,这是该行中每个字段的名称和id属性的一部分。每当我连续添加一个字段时,我会立即为该字段添加验证器。我动态创建每个字段的名称和id参数。
动态字段(来自第二行)也需要通过远程调用进行验证。出于某种原因,当我试图在远程调用上获取选择框或输入框(动态创建)的值时,我没有得到任何值。但是我得到了静态字段的值。控件根本不会进入第二行进行验证。不确定我错过了什么。
你能帮忙吗?
以下是代码:
$(document).ready(function() {
var host_index = 0;
var val = Math.random();
$('#host_type')
// Add button click handler
.on('click', '.addButton', function() {
if(host_Index < 10){
host_index++;
var $template = $('#type_Template'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('dns-index', host_index)
.insertBefore($template);
// Update the name and id attributes
$clone
.find('[name="cat"]').attr('name', 'host_' + host_index + '_cat').end()
.find('[name="cat"]').attr('id', 'host_' + host_ndex + '_cat').end()
.find('[name="host"]').attr('name', 'host_' + host_ndex + '_host').end()
.find('[name="host"]').attr('id', 'host_' + host_ndex + '_host').end()
.find('[name="subnet"]').attr('name', 'host_' + host_ndex + '_subnet').end()
.find('[name="subnet"]').attr('id', 'host_' + host_ndex + '_subnet').end();
//Not going to this part
$clone.find('select[name="host_" + host_index + "_cat"]').rules('add', {
required: true
});
$clone.find('input[name="host_" + host_index + "_host"]').rules('add', {
required: true,
validate_host: true,
remote: {
url: '/host/data.cgi',
type: 'GET',
data: {
'mode': 'validate_host',
'location': function(){
return $("#location option:selected").text();
},
'category': function(){
//Not getting any value
var cat_id=$('select[name=host_'+host_index+'_cat option:selected]');
return cat_id.text();
},
'hostname': function() {
//Not getting any value
var host_id=$('input[name=host_'+host_index+'_host]');
return host_id.val();
},
'subnet': function() {
return $(subnet_id).val();
},
'val': val
},
dataFilter: function(data, type){
var json = JSON.parse(data);
...
...
return true;
}
}
});
}
})
// Remove button click handler
.on('click', '.removeButton', function() {
var $row = $(this).parents('.form-group'),
index = $row.attr('dns-index');
// Remove element containing the fields
$row.remove();
});
$("#hostForm").validate({
//validate the first row and other static fields (with the remote call)
});
});
答案 0 :(得分:0)
有2条记录
$ clone.find('input [name =“host_”+ host_index +“_ host”]')。rules
您需要将其更改为
$clone.find("input[name='host_" + host_index + "_host']").rules
你设置它的方式它会将host_index连接为字符串的其余部分而不是host_index的值。