I'm currently in the process of developing a website to practice my coding skills and I have a query.
Can I implement button validation when the button is not within a form using HTML, CSS, and Bootstrap?
Check out the following code snippet:
<script>const submitButton=document.getElementById("submitButton");
const myForm=document.getElementById("myForm");
submitButton.addEventListener("click", function(event) {
event.preventDefault(); // Prevent the button's default action
// Check if the form is valid
if (myForm.checkValidity()) {
myForm.submit();
}
else {
const formElements=myForm.elements;
for (let i=0;
i < formElements.length;
i++) {
if (!formElements[i].checkValidity()) {}
}
}
}
);
</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeaab0a8b0ac">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-md-8 mb-4">
<div class="card mb-4">
<div class="card-header py-3">
<h5 class="mb-0 text-font text-uppercase">Payment Details</h5>
</div>
<div class="card-body">
<form id="myForm">
<div class="row mb-4">
<div class="col">
<div class="form-outline">
<label class="form-label" for="form11Example1">First name</label>
<input type="text" id="form11Example1" class="form-control" style="text-transform: uppercase;" required/>
</div>
</div>
<div class="col">
<div class="form-outline">
<label class="form-label" for="form11Example2">Last name</label>
<input type="text" id="form11Example2" class="form-control" style="text-transform: uppercase;" required/>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-md-9">
<div class="form-outline">
<label class="form-label" for="form11Example1">Card Number</label>
<input type="number" id="form11Example3" class="form-control" required/>
</div>
</div>
<div class="col-md-3">
<div class="form-outline">
<label class="form-label" for="form11Example2">CCV</label>
<input type="number" id="form11Example4" class="form-control" required />
</div>
</div>
</div>
<div class="form-outline mb-4">
<label class="form-label" for="form11Example7">EXPIRATION DATE</label>
<input type="date" id="form11Example5" class="form-control" required/>
</div>
<div class="back-to-shop"><a href="#">←<span class="text-muted">Back to shop</span></a></div>
<div class="form-check d-flex justify-content-center mb-2">
</div>
</form>
<div class="row">
<div class="col-md-4">
<img src="images/Boston Fern 1.webp" class="rounded-3" style="width: 100px;" alt="Blue Jeans Jacket" />
</div>
<div class="col-md-6 ms-3">
<span class="mb-0 text-price">€23.00</span>
<p class="mb-0 text-descriptions">Boston Fern </p>
<p class="text-descriptions mt-0">Qty:<span class="text-descriptions fw-bold">1</span>
</p>
</div>
</div>
<div class="card-footer">
<ul class="list-group list-group-flush">
<div class="row">
<div class="col" style="padding-left:0;">Item(s) total</div>
<div class="col text-right">€ 47.00</div>
</div>
<div class="row">
<p>Tax:</p>
<p class="col text-right">€2.5</p>
</div>
<div class="row">
<p>SHIPPING:</p>
<p class="col text-right">€5.00 </p>
</div>
<li class="list-group-item d-flex justify-content-between align-items-center px-0 fw-bold text-uppercase">
Total to pay
<span>€54.5</span>
</li>
</ul>
</div>
<div class="text-center">
<a id="button-payment" href="thanks-you.html">
<button form="submitButton" id="button-pay" type="button" class="btn button-order col-md-10">PAY</button></a>
</div>
</div>
</div>
</div>I sought assistance from ChatGPT but it recommended adding an ID to the form and a form property to the button along with a JavaScript script, which hasn't yielded the desired result.
I'm simply curious about the feasibility of achieving this task.