我有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
});
});
//按钮的JavaScript逻辑继续下一页
<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);
}
});
});
1条答案
按热度按时间vkc1a9a21#
尝试在输入标签中使用“required”,例如: