After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly filled and meet the specified patterns. The pop-up should also include the name provided by the user upon completion. However, I encountered an issue where the alert would appear prematurely when submitting incomplete information, displaying the message "Order Completed." How can I ensure that the pop-up alert appears only after all input fields are correctly filled? Below is a snippet of my code:
<!DOCTYPE html>
<html>
<style>
body {
border:10px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 150px;
}
... // CSS styles
</style>
<body onload="CreditCard();">
<form id="Myform">
<div class="login-page">
<div class="form">
... // Form elements and fields
<input type="submit" value="Submit" onclick="confirmed();">
<input type="button" onclick="reset()" value="Reset form">
</div>
</div>
</form>
<script>
function CreditCard() {
... // Logic for showing/hiding credit card details based on payment method
}
function reset() {
... // Function to reset the form
}
function confirmed() {
... // Function to display confirmation alert with user's name
}
function terms() {
... // Additional functionality or logic related to terms agreement
}
</script>
</body>
</html>
Please focus on ensuring that the pop-up alert in the `confirmed()` function appears only after all required user inputs are correctly filled.