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

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>
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
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:

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


The updated HTML code is as follows:

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>

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

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

Members online

No members online now.

Forum statistics

Threads
473,708
Messages
2,569,346
Members
44,650
Latest member
LuckyVivo

Latest Threads

Top