Validating billing address form using jquery plugin before payment

Question

I have HTML form for billing address and created unique ID for each form field, but problem its not validating correctly, it must first check when fields are empty before proceed to next page. Below is my current code for both jquery and HTML; But currently what the code is doing it shows alert message and proceed to the next page, it must check all fields if there are empty, once not show green color for inserting data to the form, then once validated user can click proceed to the payment page.

// html code

<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
  });
});

// javascript logic for button to proceed next page

<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);
        }
    });
});

Answer 1

Try using 'required' inside input tags, eg:

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