// Selectors
const form = document.getElementById('form');
const firstName = document.getElementById('firstname');
const lastName = document.getElementById('lastname');
const email = document.getElementById('email');
const phoneNumber = document.getElementById('phonenumber');
const destinationInterest = document.getElementById('destinationinterest');
// Show input error
function showError(input, message) {
const formBox = input.parentElement;
formBox.className = 'form-box error';
const small = formBox.querySelector('small');
small.innerText = message;
};
// Show success outline
function showSuccess(input) {
const formBox = input.parentElement;
formBox.className = 'form-box success';
};
// Validate email
function validateEmail(input) {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, 'Email is not valid');
}
};
// Validate phone number
function validatePhoneNumber(input) {
const re = /^\+48\d{9}$/;
if (re.test(input.value.trim())) {
showSuccess(input);
} else {
showError(input, 'Phone number is not valid');
}
};
// Check required fields
function checkRequired(inputArr) {
inputArr.forEach((input) => {
if (input.value === 'Choose here' || input.value.trim() === '') {
showError(input, 'This field is required');
} else {
showSuccess(input);
}
})
};
// Event Listeners
form.addEventListener('submit', (e) => {
e.preventDefault();
checkRequired([firstName, lastName, email, phoneNumber, destinationInterest]);
validateEmail(email);
validatePhoneNumber(phoneNumber);
});<body>
<header>
<h1>King Size Travel</h1>
</header>
<div class="container">
<form id="form" class="form">
<h2>Subscribe</h2>
<div class="form-box">
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="Enter your first name">
<small>Error message</small>
</div>
<div class="form-box">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Enter your last name">
<small>Error message</small>
</div>
<div class="form-box">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<small>Error message</small>
</div>
<div class="form-box">
<label for="phonenumber">Phone Number <span id="phoneinfo">(Format: +48XXXXXXXXX)</span></label>
<input type="tel" id="phonenumber" placeholder="Enter your phone number">
<small>Error message</small>
</div>
<div class="form-box">
<label for="destinationinterest">Destination Interest</label>
<select name="destinationinterest" id="destinationinterest" form="form">
<option selected disabled hidden>Choose here</option>
<option value="europe">Europe</option>
<option value="africa">Africa</option>
<option value="northern america">Northern America</option>
<option value="southern america">Southern America</option>
<option value="australia">Australia</option>
<option value="oceania">Oceania</option>
<option value="asia">Asia</option>
</select>
<small>Error message</small>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<div class="pop-up">
<p>Thank you for submitting your interest in our offer!</p>
<button class="pop-up-button">OK</button>
</div>
<script src="app.js"></script>
</body>
</html>I would like to display pop up which confirms that the form was submitted properly - after clicking the button SUBMIT and after all validations. I do not know how to do it. Maybe do you have any solutions or advices?
I have tried to create a function which will check if all divs (form-box) contains 'success' class and then such pop would display, but it does not work (using forEach)... I am stuck completely.