<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Sign Up Today!</h1> <!-- Form --> <form id="form"> <!-- Full Name --> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Full Name" required minlength="4" max="199" name="name"> </div> <!-- Phone Number --> <div class="form-group"> <label for="phone">Phone Number</label> <input type="text" id="phone" placeholder="Phone Number" required pattern="123-456-7890" name="phone"> </div> <!-- Email Address --> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="email@address.com" required name="email"> </div> <!-- Website URL --> <div class="form-group"> <label for="website">Website URL</label> <input type="url" id="website" placeholder="https://www.google.com" required name="url"> </div> <!-- Password --> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" placeholder="Create Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$"> </div> <!-- Confirm Password --> <div class="form-group"> <label for="password2">Confirm Password</label> <input type="password" id="password2" placeholder="Create Password (Min. 8 Character)" title="please enter at least 8 characters" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$" name="password"> </div> <button type="submit">Register</button> </form> <!-- Error/Success Message --> <div class="message-container"> <h3 id="message">Don't Hesitate!</h3> </div> </div>

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap'); html { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: 'Ubuntu', sans-serif; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; background-color: #f5f4f4; } .container { background: #fff; padding: 30px; box-shadow: 0 5px 20px rgba(0, 0, 0, .2); width: 50vw; } .container label { display: block; margin-bottom: 5px; } .container form input { width: 100%; height: 35px; box-sizing: border-box; transition: .3s linear; padding: 10px } .container input:valid { border: 1px solid green; } .container input:invalid { border: 1px solid red; } .container .form-group { margin-bottom: 20px; } .container button { border: 0; background-color: #222; padding: 20px 30px; color: #fff; cursor: pointer; transition: .3s ease; width: 100%; text-transform: uppercase; font-weight: bold; letter-spacing: 2px; } .container button:hover { background-color: #5d2436; } .container button:focus { outline: none; } .message-container { border: 1px solid #222; border-radius: 5px; margin-top: 20px; display: flex; justify-content: center; color: #222; }

const form = document.getElementById('form'); const password1El = document.getElementById('password') const password2El = document.getElementById('password2') const messageContainer = document.querySelector('.message-container'); const message = document.getElementById('message'); let isValid = false; let passwordsMatch = false; function validateForm() { // Using constraint API isValid = form.checkValidity(); console.log(isValid); if (!isValid) { message.textContent = 'Please fill out all fields'; message.style.color = 'red'; messageContainer.style.borderColor = 'red' return; } // check to see if passwords match if (password1El.value === password2El.value) { passwordsMatch = true; password1El.style.borderColor = 'green' password2El.style.borderColor = 'green' messageContainer.style.borderColor = 'green' } else { passwordsMatch = false; message.textContent = 'Make sure password match.' messageContainer.style.borderColor = 'red' password1El.style.borderColor = 'red' password2El.style.borderColor = 'red' return; } if (isValid && passwordsMatch) { message.textContent = 'Successfully Registered!' message.style.color = 'teal'; messageContainer.borderColor = 'teal' } } function storeFormDate() { const user = { name: form.name.value, phone: form.phone.value, email: form.email.value, password: form.password.value, website: form.website.value, } console.log(user); } function processFormData(e) { e.preventDefault(); validateForm() if (isValid && passwordsMatch) { storeFormDate() } } // Event Listner form.addEventListener('submit', processFormData)