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

Question

我在脚本中遇到了 div id 的问题。我只想知道如何控制 div id 以在另一个脚本中使用函数 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>

它可以用来使用函数 checkname()，但是如果我要点进去

<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>

用于添加与我的脚本 $(addButton) 功能相同的输入类型文本

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 checkname()。请帮助我...

Answer 1

您应该传递附加了内联事件监听器的元素的引用。您需要将 this 引用传递给函数并使用 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);
  }