重复验证（数字）并显示错误消息

Question

我有一个功能，可以使用我的按钮添加行。我的目标是 当用户输入一个已经存在于数据库中的数字 时，将弹出警报或任何错误消息“您输入的 number/s is/are 已使用，请使用其他号码"**。有什么办法可以让它发挥作用吗？我在下面提供了我的屏幕截图和代码。谢谢

观看次数：

    <table class="table table-bordered" border="1" id="applicanttable">
      <thead>
        <tr>
        </tr>
      </thead>
      <tbody>
        <div class="row">
          <tr>
            <th>#</th>
            <th>Light</th>
    
            <th>Action</th>
          </tr>
          <tr id="row_0">
            <td>
              <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
            </td>
            <td class="labelcell">
              <input value="" class="form" name="lightBand1" placeholder=""   id="lightBand1"/>
        <span id="email_result"></span>
            </td>
         
            <td class="labelcell">
              <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
            </td>
          </tr>
        </div>
      </tbody>
    
    
      <tfoot>
        <tr>
        </tr>
        <tr>
          <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
        </tr>
      </tfoot>
    </table>

脚本:

   $("#addrow").on('click', function() {
    
      let rowIndex = $('.auto_num').length + 1;
      let rowIndexx = $('.auto_num').length + 1;
    
      var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
        '<td><input name="lightBand'+rowIndex+'" id="lightBand1"  value="" class="form"  type="number"  /></td>"' +
                            ' <span id="email_result"></span>' +
     
        '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';
    
      $("#applicanttable > tbody > tr:last").after(newRow);
    
    
    });

ajax:

  $(document).ready(function(){  
      $('#lightBand1').change(function(){  
           var lightBand1 = $('#lightBand1').val();  
           if(lightBand1 != '')  
           {  
                $.ajax({  
                     url:"<?php echo base_url(); ?>participant/check_number_avalibility",  
                     method:"POST",  
                     data:{lightBand1:lightBand1},  
                     success:function(data){  
                          $('#email_result').html(data);  
                     }  
                });  
           }  
      });  
 });

控制器：

  function check_number_avalibility()
    {
        if(!filter_var($_POST["lightBand1"], FILTER_VALIDATE_INT))
        {
            echo '<label class="text-danger"><span class="glyphicon glyphicon-remove"></span> Invalid LightBand</span></label>';
        }
        else
        {
            $this->load->model("Participant_repository");
            if($this->participants->is_number_available($_POST["lightBand1"]))
            {
                echo '<label class="text-danger"><span class="glyphicon glyphicon-remove"></span> LightBand is already registered</label>';
            }
            else
            {
                echo '<label class="text-success"><span class="glyphicon glyphicon-ok"></span> LightBand Available</label>';
            }
        }  
    }

型号：

  function is_number_available($lightBand)
{
    $this->db->where('lightBand', $lightBand);
    $query = $this->db->get("entry");
    if($query->num_rows() > 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

**

$("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length + 1;
  let rowIndexx = $('.auto_num').length + 1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
    '<td><input name="light' + rowIndex + '" placeholder="duplicate validation here" id="auto"  value="" class="form"  type="number"  /></td>"' +
 
    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>Light</th>

        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="hehe form-control" name="light1" placeholder="duplicate validation here" required id="auto" />
        </td>
     
        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

**

Answer 1

由于您的输入是动态生成的，因此您需要将其与静态元素绑定，因此请像这样更改您的事件处理程序 $(document).on('change', 'input[name*=lightBand]', function() {..}) 。然后，使用 $(this).val() 获取发生更改的输入值并传递与您的 ajax 相同。

在您当前的 jquery 代码中，您有许多重复的 ID，因此请将它们更改为 class。另外，将 class email_result 添加到你的 span 标签中，目前你在这里有 id，<span class="email_result"></span> 在 td 标签之外，把它放在 td 标签里面。

更新jquery代码：

$(document).on('change', 'input[name*=lightBand]', function() {
  var lightBand1 = $(this).val(); //get value
  var selector = $(this)//save slector
  if (lightBand1 != '') {
    $.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {
        selector.next('.email_result').html(data);//use next here ..
      }
    });
  }
});

快速演示 :

$("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length + 1;
  let rowIndexx = $('.auto_num').length + 1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="' + rowIndexx + '" /></td>"' +
    '<td><input name="lightBand' + rowIndex + '"  value="" class="form"  type="number"  /> <span class="email_result"></span></td>"' +

    '<td><input type="button" class="removerow" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});



$(document).on('change', 'input[name*=lightBand]', function() {

  var lightBand1 = $(this).val(); //get value
  var selector = $(this) //save slector
  selector.next('.email_result').html("") //empty previous error
  if (lightBand1 != '') {
    /*$.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {*/
    selector.next('.email_result').html("NOT GOOD"); //use next here ..
    /* }
    });*/
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>Light</th>

        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
          <span class="email_result"></span>
        </td>

        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

重复验证（数字）并显示错误消息

Duplicate validation (Number) and show an error message

ajax

codeigniter

codeigniter-3