Question

我正在使用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)
       });
    });

Answer 1

有2条记录

$ clone.find（'input [name =“host_”+ host_index +“_ host”]'）。rules

您需要将其更改为

$clone.find("input[name='host_" + host_index + "_host']").rules

你设置它的方式它会将host_index连接为字符串的其余部分而不是host_index的值。

jquery bootstrap动态字段与远程调用

1 个答案: