- Joined
- Sep 12, 2022
- Messages
- 39
- Reaction score
- 0
The regex validation works but the error messages which have been displayed persist till the form is submitted. How can this be corrected so that after each attempt(Once the submit button is clicked) the input that has been validated will have the corresponding error message not displayed? *The attempt to implement this part is the last 2 else if statements, they also make the validation work partially. Take them out and the validation works but the error message issues persist.
JavaScript:
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#sbutton').addEventListener('click', function(event) {
event.preventDefault();
let phoneInput = document.querySelector('#phone').value;
let phoneRegex = /^(0|\+234)[789]{0,1}([0-1]{1})([0-9]{8})$/;
const phoneError = document.querySelector('#phoneErr');
let inputV = document.querySelector('#budget').value;
const errorMessage = document.querySelector('#errormsg');
let form = document.querySelector("form");
if (phoneInput == "" || !phoneRegex.test(phoneInput)) {
phoneError.innerHTML = "Please enter a valid phone number";
phoneError.style.display = "block";
} else if (inputV == "" || inputV < 300000) {
errorMessage.innerHTML = "Enter at least 300000"
errorMessage.style.display = "block";
} else if (phoneRegex.test(phoneInput)) {
phoneError.innerHTML = "";
phoneError.style.display = "none";
return;
} else if (inputV >= 300000) {
errorMessage.innerHTML = ""
errorMessage.style.display = "none";
return;
} else {
phoneError.innerHTML = "";
phoneError.style.display = "none";
errorMessage.innerHTML = ""
errorMessage.style.display = "none";
form.submit();
}
})
})
HTML:
<form action="https://dragonmm.com" method="post">
<div class="contact-box">
<div class="left1"></div>
<div class="right1">
<h2>Start</h2>
<label for="name"></label>
<input id="name" type="text" class="field" placeholder="Name" required>
<label for="email"></label>
<input id="email" type="text" class="field" placeholder="Email" required>
<label for="phone"></label>
<input id="phone" type="text" class="field" placeholder="Phone" required>
<div id="phoneErr"></div>
<label for="budget"></label>
<input id="budget" type="text" name="budget" class="field budgetInput" placeholder="Budget" required>
<div id="errormsg"></div>
<button type="submit" value="Send" class="btn1" id="sbutton">Send</button>
</div>
</div>
</form>