How can I remove the specific error message after regex validation is done?


Joined
Sep 12, 2022
Messages
30
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>
 
Ad

Advertisements


Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top