javascript - codeigniter:使用 jquery 克隆方法对动态创建的文本字段进行验证

Question

我有以下代码。

    <section class="section_class">
    <input type="text" name="branch_contact_person_name[]" value="<?php echo set_value('branch_contact_person_name'); ?>" placeholder="Branch Contact Person Name" />
    <input type="text" name="branch_contact_person_email[]" value="<?php echo set_value('shop_email'); ?>" placeholder="Branch Contact Person Email" />
    <input type="text" name="branch_contact_person_mobile[]" value="<?php echo set_value('shop_mobile'); ?>" placeholder="Branch Contact Person Mobile" />
    </section>
<input type="hidden" class="add_fields" />

我正在使用以下 jquery

$(document).ready(function() {
    $("#add_next_branch").click(function() { //add_next_branch is a button
        $('.section_class').clone().appendTo('.add_fields');
    });
});

文本字段正在正确创建，但是当我提交所有文本字段为空的表单时，它将显示正确的消息，但正在创建的文本字段正在消失。 这是 Controller

function branch_details() {
    $this->form_validation->set_rules('branch_contact_person_name[]', 'Site Name', 'required|xss_clean');
    /*$this->form_validation->set_rules('product_category', 'Product Category', 'trim|required|xss_clean'); //This field is hidden
    $this->form_validation->set_rules('product_brand','Product Brand','required|greater_than[0]');
    //select location -- $this->form_validation->set_rules('shop_mobile', 'Shop Mobile', 'trim|required|min_length[6]|max_length[12]|xss_clean|numeric');
    //$this->form_validation->set_rules('brand_pic', 'Product Image', 'trim|required|xss_clean');
    $this->form_validation->set_rules('product_desc', 'Product Description', 'trim|required|xss_clean');
    $this->form_validation->set_rules('product_price_type', 'Product Price Type', 'required|xss_clean');
    $this->form_validation->set_rules('product_mrp', 'M.R.P ', 'required|xss_clean');
    */
    $data = array();
    $this->load->view('templates/homepage_header');
    if ($this->form_validation->run() == FALSE)
    {
        $data['action_name'] = 'branch_details';
    }
    else
    {
        $data['action_name'] = 'shop_view';
    }
        $this->load->view('shop_view',$data);
}

Answer 1

您可以像这样验证克隆元素

 function validate()
    {       
        var contact_person_name= document.getElementById('formid').elements["branch_contact_person_name[]"];
        var contact_person_email=document.getElementById('formid').elements["branch_contact_person_email[]"];
        var contact_person_mobile=document.getElementById('formid').elements["branch_contact_person_mobile[]"];

        var length =  contact_person_name.length;

    if(isNaN(length))
    {

        if(contact_person_name.value=='')
        {
            alert('Please enter  name');
                    return false;
        }
        if(contact_person_email.value=='')
        {
            alert('Please enter email');
                    return false;
        }
        if(contact_person_mobile.value=='')
        {
            alert('Please enter Mobileno');
                    return false;
        }
    }

        for (var i = 0; i < contact_person_name.length; i++)
      {

            if (contact_person_name[i].value== '') {
                alert('Please enter name.');
                return false;
            }
        if (contact_person_email[i].value== '') {
                alert('Please enter email.');
                return false;
            }
        if (contact_person_mobile[i].value== '') {
                alert('Please enter mobile.');
                return false;
            }
    }
    document.yourform.submit();
    }

确保为您的 HTML 表单声明 ID。这可能对您有帮助。谢谢