付款前使用 jquery 插件验证帐单地址表单

Question

我有用于帐单地址的 HTML 表单，并为每个表单字段创建了唯一的 ID，但问题是它无法正确验证，它必须首先检查字段何时为空，然后才能继续下一页。下面是我当前的 jquery 和 HTML 代码；但目前代码正在执行的操作是显示警报消息并进入下一页，它必须检查所有字段是否为空，一旦不显示绿色以将数据插入表单，那么一旦经过验证，用户就可以单击继续付款页。

//html代码

<div class="form-outline mb-4">
    <input type="text" id="form7Example1" class="form-control" />
    <label class="form-label" for="form7Example1">First name</label>
</div>
<div class="form-outline mb-4">
    <input type="text" id="form7Example2" class="form-control" />
    <label class="form-label" for="form7Example2">Last name</label>
</div>
<div class="form-outline mb-4">
    <input type="text" id="form7Example3" class="form-control" />
    <label class="form-label" for="form7Example3">Company name</label>
</div>
<div class="form-outline mb-4">
    <input type="text" id="form7Example4" class="form-control" />
    <label class="form-label" for="form7Example4">Address</label>
</div>
<div class="form-outline mb-4">
    <input type="email" id="form7Example5" class="form-control" />
    <label class="form-label" for="form7Example5">Email</label>
</div>
<div class="form-outline mb-4">
    <input type="number" id="form7Example6" class="form-control" />
    <label class="form-label" for="form7Example6">Phone</label>
</div>
<div class="form-outline mb-4">
    <textarea class="form-control" id="form7Example7" rows="4"></textarea>
    <label class="form-label" for="form7Example7">Additional information</label>
</div>
<button id="proceed-to-payment" class="btn btn-block btn-primary my-3 py-3">Proceed To Payment</button>

//jquery 代码

/***
@author:Gcobani Mkontwana
@date:10/05/2025
@Script handles billing validation address before proceed payment.
**/
$(document).ready(function() {
  // Function to validate and update field borders
  function validateAndUpdateField(fieldId) {
    const $field = $(fieldId);
    const fieldValue = $field.val().trim();
    if (fieldValue === '') {
      // Field is empty, set border color to red
      $field.css('border-color', 'red');
    } else {
      // Field is filled, set border color to green
      $field.css('border-color', 'green');
    }
  }

  // Event listener for input fields
  $('.form-control').on('input', function() {
    validateAndUpdateField($(this));
  });

  // Event listener for the "Proceed To Payment" button
  $('#proceed-to-payment').click(function() {
    // Loop through all input fields and validate them
    let isValid = true;
    const requiredFields = ['#form7Example1', '#form7Example2', '#form7Example4', '#form7Example5', '#form7Example6'];
    requiredFields.forEach(function(fieldId) {
      validateAndUpdateField(fieldId);
      const fieldValue = $(fieldId).val().trim();
      if (fieldValue === '') {
        isValid = false;
      }
    });

    // If any field is empty, prevent form submission
    if (!isValid) {
      alert('Please fill in all required fields.');
      return false;
    }

    // Proceed with payment if all required fields are filled
    alert('Payment successful!'); // Replace with your actual payment logic
  });
});

Answer 1

尝试在输入标签内使用“required”，例如：

<input type="text" id="form7Example1" class="form-control" required/>