Question

我在不重新加载页面的情况下将数据插入数据库。

我正在使用AJAX发布方法来提交表单，而不是html表单提交操作。我想在提交之前验证表格。我已经使用了必填项，但是那些没有用。

<div class="form-group">
  <input type="text" class="form-control"  placeholder="Enter Seller Name" name="seller_name" required>
</div>
<div class="form-group">
  <input type="number" class="form-control" placeholder="Enter Mobile Number" name="mobile_number" required  8>
</div>
<div class="form-group">
  <select class="form-control" name="state" required>
  <option value="" selected disabled>Select State</option>>
  <option>Andra Pradesh</option>
  <option>Arunachal Pradesh</option>
  <option>Assam</option>
  </select>
</div>
<div class="form-group">
  <input type="text" class="form-control" placeholder="Enter City" name="city" required>
</div>
<div class="form-group">
  <select class="form-control" name="seller_type" required>
  <option value="" selected disabled>Select Seller type</option>
  <option>Registered-Free</option>
  <option>Registered-Paid</option>
  <option>Non Registered</option>
  </select>
</div>
<button type="button" id="seller_insert" class="btn btn-primary">Submit</button>

<script>
$(document).ready(function() {
    $("#seller_insert").click(function() {

        $.ajax({
            url:"seller_insert.php",
            type:"post",
            data:$("#seller_form").serialize(),
            success: function(d)
            {
                $("<tr></tr>").html(d).appendTo("#seller_view_table");
                $("#seller_form")[0].reset();
            }
        });
    })
})

</script>

必填字段不起作用

Answer 1

<form id='seller_form' action=''>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Enter Seller Name" name="seller_name" required>
  </div>
  <div class="form-group">
    <input type="number" class="form-control" placeholder="Enter Mobile Number" name="mobile_number" required 8>
  </div>
  <div class="form-group">
    <select class="form-control" name="state" required>
      <option value="" selected disabled>Select State</option>>
      <option>Andra Pradesh</option>
      <option>Arunachal Pradesh</option>
      <option>Assam</option>
    </select>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Enter City" name="city" required>
  </div>
  <div class="form-group">
    <select class="form-control" name="seller_type" required>
      <option value="" selected disabled>Select Seller type</option>
      <option>Registered-Free</option>
      <option>Registered-Paid</option>
      <option>Non Registered</option>
    </select>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


$("#seller_form").on('submit', function() {
   var valid = this.form.checkValidity();
      $("#valid").html(valid);
  if (valid) {
    event.preventDefault(); 
  $.ajax({
    url: "seller_insert.php",
    type: "post",
    data: $("#seller_form").serialize(),
    success: function(d) {
      $("<tr></tr>").html(d).appendTo("#seller_view_table");
      $("#seller_form")[0].reset();
    }
  });
}
});

事件阻止默认值

HTML必填项不起作用（我希望无需提交表单即可获得）

1 个答案: