如何验证动态添加输入字段

Question

我遇到了脚本中div id的问题。我只是想知道如何控制在另一个脚本中使用函数ID的div id。这是我的形式：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-7 field_wrapper"> 
      <div data-role="dynamic-fields"> 
       <div class="form-inline">             
        <div class="form-group" id="txtboxToFilter"> 
         <label for="nip">NIP:</label> 
         <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/> 
        </div> 
        <div class="form-group"> 
         <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a> 
        </div> 
        <span id="name_status"></span> 
       </div> 
      </div> 
     </div> 
    </div> 

这是我的脚本：

$(document).ready(function(){ 
    var addButton = $('.add_button'); //Add button selector 
    var wrapper = $('.field_wrapper'); //Input field wrapper 
    var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC/KAKANSAR">SMC/KAKANSAR</option><option value="STAFF OPERASI/KASIOPS">STAFF OPERASI/KASIOPS</option><option value="OSC/KORPOS">OSC/KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>'; //New input field html 
    var x = 1; //Initial field counter is 1 
    $(addButton).click(function(){ //Once add button is clicked 
     x++; //Increment field counter 
     $(wrapper).append(fieldHTML); // Add field html 
    }); 
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked 
     e.preventDefault(); 
     $(this).parent('div').parent('div').remove(); //Remove field html 
     x--; //Decrement field counter 
    }); 
}); 

function checkname() 
{ 
var name=document.getElementById("UserName").value; 

if(name) 
{ 
    $.ajax({ 
    type: 'post', 
    url: 'checkdata.php', 
    data: { 
    user_name:name, 
    }, 
    success: function (response) { 
    $('#name_status').html(response); 
    if(response=="OK") 
    { 
    return true;  
    } 
    else 
    { 
    return false; 
    } 
    } 
    }); 
} 
else 
{ 
    $('#name_status').html(""); 
    return false; 
} 
} 

首次在

<div class="form-group" id="txtboxToFilter"> 
    <label for="nip">NIP:</label> 
    <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/> 
</div> 

它可以用来使用功能检查名（）但如果我想点击

<div class="form-group"> 
    <a href="javascript:void(0);" class="add_button btn btn-success btn-xs" title="Tambah Pegawai"><i class='fa fa-fw fa-plus'></i></a> 
</div> 

与我的脚本$的功能（Add按钮）

var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> <input type="text" class="form-control" id="UserName" onkeyup="checkname();" placeholder="Masukkan NIP" required/></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>'; 

，但结果将相同的输入类型的文本是VAR fieldHTML不能使用功能的onkeyup检查名（）。请帮助我...

Answer 1

您应该传递内联事件侦听器所连接到的元素的引用。您需要将此引用传递给函数，并使用this引用来获取元素。

通过添加this来改变您的功能。

例如

<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/> 

此外，对于fieldHTML

var fieldHTML = '<div data-role="dynamic-fields"><div class="form-inline"><div class="form-group" id="txtboxToFilter"><label for="nip">NIP:</label> 
<input type="text" class="form-control" id="UserName" onkeyup="checkname(this);" placeholder="Masukkan NIP" required/></div><div class="form-group"><label for="jabatan">Jabatan:</label><select class="form-control" id="jabatan" name="jeniskejadian" required><option value=""></option><option value="SMC/KAKANSAR">SMC/KAKANSAR</option><option value="STAFF OPERASI/KASIOPS">STAFF OPERASI/KASIOPS</option><option value="OSC/KORPOS">OSC/KORPOS</option><option value="DANTIM">DANTIM</option><option value="RESCUER">RESCUER</option><option value="STAFF KOMUNIKASI">STAFF KOMUNIKASI</option><option value="HUMAS">HUMAS</option><option value="STAFF ADMINLOG">STAFF ADMINLOG</option></select></div><div class="form-group"><a href="javascript:void(0);" class="remove_button btn btn-danger btn-xs" title="Hapus Pegawai"><i class="fa fa-fw fa-minus"></i></a></div><span id="name_status"></span></div></div>'; 

功能检查名（元素）作为：

变量element包含此正被使用的元件。您可以通过使用element变量来访问该元素。

function checkname(element) 
{ 
     var name= element.value; 

     console.log('Checkname '+name); 
    }