Billing form is not validating correctly

See more:

Javascript

HTML5

bootstrap

I have a billing form, but the issue is that it is not validating correctly. I want that when user clicks proceed payment, it must ensure that all fields are inserted, thereafter they can proceed to the next page.

What I have tried:

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

/***
@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
  });
});

<script>
document.getElementById("proceed-to-payment").addEventListener("click", function () {
    // Get cart data from the PHP-generated HTML
    var cartItems = <?php echo json_encode($cartItems); ?>;
    var subtotal = <?php echo $totalPrice; ?>;
    var shippingCost = <?php echo $shippingCost; ?>;
    var totalPrice = subtotal + shippingCost;
    
    // Prepare data to send to the payment_integration page
    var dataToSend = {
        cartItems: cartItems,
        totalPrice: totalPrice
    };

    // Make an AJAX request to the payment_integration page
    $.ajax({
        type: "POST",
        url: "payment_integration.php",
        data: JSON.stringify(dataToSend),
        contentType: "application/json",
        success: function (response) {
            // Redirect to the payment page
            var redirectUrl = "payment_integration.php?cartData=" + encodeURIComponent(JSON.stringify(dataToSend));
            window.location.href = redirectUrl;
            console.log("cartitem", dataToSend);
        },
        error: function (xhr, status, error) {
            // Handle errors if necessary
            console.error(error);
        }
    });
});