Two things I picked up on =
1. The validation rules you defined in the jQuery are incorrect. There is no "name" or "phone" validation methods in the jQuery Validation plugin.
2.The success function in the jQuery code is incomplete. You need to add the class 'alert alert-success' to the label in the success function as well.
Tested and validating with below code -
Validate Fields JQuery[
^]
New code with added success and removal of fields name and phone -
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<form id="placeOrder" action="action.php" method="post">
<input type="hidden" name="products" value="<?= $allItems; ?>">
<input type="hidden" name="grand_total" value="<?= $grand_total; ?>">
<div class="form-group">
<input type="text" id="name" name="name" class="form-control" placeholder="Enter Name" required>
</div>
<div class="form-group">
<input type="email" id="email" name="email" class="form-control" placeholder="Enter E-Mail" required>
</div>
<div class="form-group">
<input type="tel" id="phone" name="phone" class="form-control" placeholder="Enter Phone" required>
</div>
<div class="form-group">
<textarea id="address" name="address" class="form-control" rows="3" cols="10" placeholder="Enter Delivery Address Here..." required></textarea>
</div>
<div class="form-group" id="pay-now">
<button type="submit" class="btn btn-primary" id="confirm-purchase">Confirm</button>
</div>
</form>
<script>
$(document).ready(function() {
$('#placeOrder').validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true
},
address: {
required: true
}
},
messages: {
name: {
required: 'Please enter your valid name'
},
email: {
required: 'Please enter your email address',
email: 'Please enter a valid email address'
},
phone: {
required: 'Please enter a valid phone number'
},
address: {
required: 'Please enter your delivery address'
}
},
errorElement: 'div',
errorPlacement: function(error, element) {
error.addClass('alert alert-danger');
error.insertAfter(element);
},
success: function(label) {
label.removeClass('alert-danger');
label.addClass('alert alert-success');
}
});
});
</script>
</body>
</html>