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

[Atman Atos]

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.

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();
        }
    })
})

<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>

 

[Kuncode]

To remove the error message after each attempt, you need to hide the error message after a successful validation. You can do this by setting the display property to 'none' after the input passes the validation check.

Here's the updated Javascript code:

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 {
            phoneError.innerHTML = "";
            phoneError.style.display = "none";
            errorMessage.innerHTML = ""
            errorMessage.style.display = "none";
            form.submit();
        }
    })
})

The updated HTML code is as follows:

<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" style="display:none"></div>

  <label for="budget"></label>
  <input id="budget" type="text" name="budget" class="field budgetInput" placeholder="Budget" required>
  <div id="errormsg" style="display:none"></div>
  <button type="submit" value="Send" class="btn1" id="sbutton">Send</button>
</div>

</div> </form>

Hope this help you