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
$(document).ready(function() {
function validateAndUpdateField(fieldId) {
const $field = $(fieldId);
const fieldValue = $field.val().trim();
if (fieldValue === '') {
$field.css('border-color', 'red');
} else {
$field.css('border-color', 'green');
}
}
$('.form-control').on('input', function() {
validateAndUpdateField($(this));
});
$('#proceed-to-payment').click(function() {
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 (!isValid) {
alert('Please fill in all required fields.');
return false;
}
alert('Payment successful!');
});
});
<script>
document.getElementById("proceed-to-payment").addEventListener("click", function () {
var cartItems = <?php echo json_encode($cartItems); ?>;
var subtotal = <?php echo $totalPrice; ?>;
var shippingCost = <?php echo $shippingCost; ?>;
var totalPrice = subtotal + shippingCost;
var dataToSend = {
cartItems: cartItems,
totalPrice: totalPrice
};
$.ajax({
type: "POST",
url: "payment_integration.php",
data: JSON.stringify(dataToSend),
contentType: "application/json",
success: function (response) {
var redirectUrl = "payment_integration.php?cartData=" + encodeURIComponent(JSON.stringify(dataToSend));
window.location.href = redirectUrl;
console.log("cartitem", dataToSend);
},
error: function (xhr, status, error) {
console.error(error);
}
});
});