javascript - 使用数组对多个文本字段进行表单验证

Question

我正在尝试创建一个动态文本字段，用户可以在其中按添加按钮插入另一个条目。我还创建了一个 JavaScript 代码来检查用户输入是否可用(类似于检查用户名是否可用)。

但是，由于我的表单是动态表单，因此检查部分只会检查第一个文本字段。如果我单击添加，第二个文本字段将不会被“验证”。下面是我的 jsfiddle 或我的 html 和 javascript 代码。

更新:

我认为问题出在 javascript 上，因为它只在第一个默认文本字段行上运行。如果我添加一个新行并插入一个值并在开发人员工具上检查网络，我的 check.php 将不会运行。如何使 JavaScript 代码在每个 gamecenter[] 计数时重新运行？

$(document).ready(function() {
  $('select').on('change', function() {

    var number = $('#number').val();
    var gamecenter = $('#gamecenter').val();

    $.ajax({
      url: 'check.php',
      method: "POST",
      data: {
        number: number,
        gamecenter: gamecenter
      },
      success: function(data) {
        if (data == '0') {
          $('#availability').html('<span class="text-danger">Number not available</span>');
          $('#proceed').attr("disabled", true);
          $('#number').addClass('validation-error');
        } else {
          $('#availability').html('<span class="text-success">Number Available</span>');
          $('#proceed').attr("disabled", false);
          $('#number').removeClass('validation-error');
          // $('#number').addClass('validation-success');

        }
      }
    })

  });
});


$(document).ready(function() {
  $('#number').blur(function() {

    var number = $('#number').val();
    var gamecenter = $('#gamecenter').val();

    $.ajax({
      url: 'check.php',
      method: "POST",
      data: {
        number: number,
        gamecenter: gamecenter
      },
      success: function(data) {
        if (data == '0') {
          $('#availability').html('<span class="text-danger">Number not available</span>');
          $('#proceed').attr("disabled", true);
          $('#number').addClass('validation-error');
        } else {
          $('#availability').html('<span class="text-success">Number Available</span>');
          $('#proceed').attr("disabled", false);
          $('#number').removeClass('validation-error');
        }
      }
    })

  });
});



$(document).ready(function() {

  $(document).on('click', '.add', function() {
    var html = '';
    html += '<tr>';
    html += '<td> <input type="number" min="0" max="100" name="number[]" id="number" value="" class="form-control item_name number" required autocomplete="off" maxlength="3" /><span id="availability"></span></td>';
    html += '<td><input type="text" name="price[]" id="price"  class="form-control item_quantity price" required autocomplete="off" /></td>';
    html += '<td><select name="gamecenter[]" id="gamecenter" class="form-control item_unit gamecenter" required><option value="">Select Unit</option><option value="Damacai">Damacai</option><option value="Magnum">Magnum</option><option value="Toto">Toto</option></select></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
  });

  $(document).on('click', '.remove', function() {
    $(this).closest('tr').remove();
  });

  $('#insert_form').on('submit', function(event) {
    event.preventDefault();
    var error = '';
    $('.number').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Name at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.price').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Quantity at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.gamecenter').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Select Unit at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    var form_data = $(this).serialize();

    if (error == '') {
      $.ajax({
        url: "insert.php",
        method: "POST",
        data: form_data,
        success: function(data) {
          $(document.body).append(data);

        }

      });
    } else {
      $('#error').html('<div class="alert alert-danger">' + error + '</div>');
    }
  });

});

body {
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.box {
  width: 800px;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  margin-top: 36px;
}

.validation-error {
  border: 1px solid #e80c4d;
}

.validation-success {
  border: 1px solid #008000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container box">
  <table class="table table-bordered" id="item_table">
    <tr>
      <th>2D Number</th>
      <th>Price (RM)</th>
      <th>Game Center</th>
      <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
    </tr>

    <tr>
      <td>
        <input type="number" min="0" max="100" name="number[]" id="number" value="" class="form-control item_name" required autocomplete="off" maxlength="3" /><span id="availability"></span>
      </td>
      <td>
        <input type="text" name="price[]" id="price" class="form-control item_quantity" required autocomplete="off" />
      </td>
      <td>
        <select name="gamecenter[]" id="gamecenter" class="form-control item_unit" required><option value="">Select Unit</option><option value="Damacai">Damacai</option><option value="Magnum">Magnum</option><option value="Toto">Toto</option></select>
      </td>
      <td>
        <button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button>
      </td>
    </tr>

  </table>

  <div align="center">
    <input type="submit" name="proceed" id="proceed" class="btn btn-info" value="Check Number" />
  </div>
  </form>

和我的 Check.php 代码。

   <?php  
   //check.php  
   $connect = mysqli_connect("localhost", "root", "", "2d_system"); 
   if(isset($_POST["number"]) && ($_POST["gamecenter"]))
   {

   $number = mysqli_real_escape_string($connect, $_POST["number"]);
   $gamecenter = mysqli_real_escape_string($connect, $_POST["gamecenter"]);
   $query = "SELECT * FROM number_availability WHERE Number = '".$number."' 
   AND GameCenter = '".$gamecenter."' AND Availability != 0";
   $result = mysqli_query($connect, $query);
   echo mysqli_num_rows($result);
   }

   ?>

任何提示/建议/帮助将不胜感激!提前致谢。

Answer 1

您正在使用类$('.number')来检查条件。但是在添加新行时您并没有添加类。

HTML 文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src='./testjsfile.js'></script>
<form id='insert_form'>
<div class="container box">
  <table class="table table-bordered" id="item_table">
    <tr>
      <th>2D Number</th>
      <th>Price (RM)</th>
      <th>Game Center</th>
      <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
    </tr>

    <tr>
      <td>
        <input type="number"  name="number[]" id="number" value="" class="form-control item_name" required autocomplete="off" maxlength="3" /><span id="availability"></span>
      </td>
      <td>
        <input type="text" name="price[]" id="price" class="form-control item_quantity"  autocomplete="off" />
      </td>
      <td>
        <select name="gamecenter[]" id="gamecenter" class="form-control item_unit" ><option value="">Select Unit</option><option value="Damacai">Damacai</option><option value="Magnum">Magnum</option><option value="Toto">Toto</option></select>
      </td>
      <td>
        <button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button>
      </td>
    </tr>

  </table>

  <div align="center">
    <input type="submit" name="proceed" id="proceed" class="btn btn-info" value="Check Number" />
  </div>
  <div id='error'></div>
  </form>

和JS文件

$(document).ready(function() {
    $('select').on('change', function() {

      var number = $('#number').val();
      var gamecenter = $('#gamecenter').val();

      $.ajax({
        url: 'check.php',
        method: "POST",
        data: {
          number: number,
          gamecenter: gamecenter
        },
        success: function(data) {
          if (data == '0') {
            $('#availability').html('<span class="text-danger">Number not available</span>');
            $('#proceed').attr("disabled", true);
            $('#number').addClass('validation-error');
          } else {
            $('#availability').html('<span class="text-success">Number Available</span>');
            $('#proceed').attr("disabled", false);
            $('#number').removeClass('validation-error');
            // $('#number').addClass('validation-success');

          }
        }
      })

    });
  });


  $(document).ready(function() {
    $('#number').blur(function() {

      var number = $('#number').val();
      var gamecenter = $('#gamecenter').val();

      $.ajax({
        url: 'check.php',
        method: "POST",
        data: {
          number: number,
          gamecenter: gamecenter
        },
        success: function(data) {
          if (data == '0') {
            $('#availability').html('<span class="text-danger">Number not available</span>');
            $('#proceed').attr("disabled", true);
            $('#number').addClass('validation-error');
          } else {
            $('#availability').html('<span class="text-success">Number Available</span>');
            $('#proceed').attr("disabled", false);
            $('#number').removeClass('validation-error');
          }
        }
      })

    });
  });



  $(document).ready(function() {

    $(document).on('click', '.add', function() {
      var html = '';
      html += '<tr>';
      html += '<td> <input type="number" min="0" max="100" name="number[]" id="number" value="" class="form-control item_name number"  autocomplete="off" maxlength="3" /><span id="availability"></span></td>';
      html += '<td><input type="text" name="price[]" id="price"  class="form-control item_quantity price" autocomplete="off" /></td>';
      html += '<td><select name="gamecenter[]" id="gamecenter" class="form-control item_unit gamecenter"><option value="">Select Unit</option><option value="Damacai">Damacai</option><option value="Magnum">Magnum</option><option value="Toto">Toto</option></select></td>';
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#item_table').append(html);
    });

    $(document).on('click', '.remove', function() {
      $(this).closest('tr').remove();
    });

    $('#insert_form').on('submit', function(event) {
        debugger
      event.preventDefault();
      var error = '';
      $('.number').each(function() {
        var count = 1;
        if ($(this).val() == '') {
          error += "<p>Enter Item Name at " + count + " Row</p>";
          return false;
        }
        count = count + 1;
      });

      $('.price').each(function() {
        var count = 1;
        if ($(this).val() == '') {
          error += "<p>Enter Item Quantity at " + count + " Row</p>";
          return false;
        }
        count = count + 1;
      });

      $('.gamecenter').each(function() {
        var count = 1;
        if ($(this).val() == '') {
          error += "<p>Select Unit at " + count + " Row</p>";
          return false;
        }
        count = count + 1;
      });

      var form_data = $(this).serialize();

      if (error == '') {
        $.ajax({
          url: "insert.php",
          method: "POST",
          data: form_data,
          success: function(data) {
            $(document.body).append(data);

          }

        });
      } else {
        $('#error').html('<div class="alert alert-danger">' + error + '</div>');
      }
    });

  });