Form Validation

<div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PqNJ/5e7bc4b37af7bd554bc8e85b1fed67d4cccd43bf" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PqNJ/5e7bc4b37af7bd554bc8e85b1fed67d4cccd43bf" data-origin-width="1654" data-origin-height="571"></div><!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta name="viewport" content="width=device-width, initial-scale=1.0" />        <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />        <title>Bootstrap Sandbox | Form Validation</title>    </head>    <body>        <div class="container">            <h1 class="mb-5">Form Validation Display</h1>             <form class="needs-validation" novalidate>                <div class="mb-3">                    <label for="username" class="form-label">Username</label>                    <input                        type="text"                        class="form-control"                        id="username"                        required                    />                    <div class="valid-feedback">Looks Good</div>                    <div class="invalid-feedback">Please pick a username</div>                </div>                <div class="mb-3">                    <label for="email" class="form-label">Email address</label>                    <input                        type="email"                        class="form-control"                        id="email"                        required                    />                    <div class="valid-feedback">Looks Good</div>                    <div class="invalid-feedback">                        Please pick a valid email                    </div>                </div>                <div class="mb-3">                    <label for="city" class="form-label">City</label>                    <input                        type="text"                        class="form-control"                        id="city"                        required                    />                    <div class="valid-feedback">Looks Good</div>                    <div class="invalid-feedback">Please pick a city</div>                </div>                 <div class="mb-3">                    <div class="form-check">                        <input                            class="form-check-input"                            type="checkbox"                            value=""                            id="invalidCheck"                            required                        />                        <label class="form-check-label" for="invalidCheck">                            Agree to terms and conditions                        </label>                        <div class="invalid-feedback">                            You must agree to the terms                        </div>                    </div>                </div>                 <input type="submit" class="btn btn-primary" value="Submit" />            </form>                     </div>        <div style="margin-top: 350px"></div>         <script src="./assets/js/bootstrap.bundle.min.js"></script>        <script>            const form = document.querySelector('.needs-validation');            form.addEventListener('submit', (e) => {                if (!form.checkValidity()) {                    e.preventDefault();                } else {                    alert(‎'success');                }                form.classList.add('was-validated');            });        </script>    </body></html>