0

How can i make the error disappear after the input feild meets the condition required.

I want error to disappear after the user input meets the condition required. I do not want to use bootstrap cause i want to learn js. I am a beginner at js . Thank you for heapling.

This is my html code.

<form action="mail.php" id="myform" onsubmit = "return validate();" method="POST">
                <div class="input_field">
                    
                    <input  type="text"  id="name" name="name">
                    <div id="error_name" class="error"></div>
                </div>
                <div class="input_field">
                    
                    <input  type="text"  id="phone" maxlength="10" name="number">
                    <div id="error_number" class="error"></div>
                </div>
                <div class="input_field">
                    
                    <input  type="text"  id="email" name="email">
                    <div id="error_email" class="error"></div>
                </div>
                <div class="input_field">
                    
                    <textarea  id="message" name="message"></textarea>
                    <div id="error_message" class="error"></div>
                </div>
                <div class="btn">
                    <input type="submit" >
                </div>
            </form>

This is my js code.

function validate(){
    var name = document.getElementById("name").value;
    var phone = document.getElementById("phone").value;
    var email = document.getElementById("email").value;
    var message = document.getElementById("message").value;
    var error_message = document.getElementById("error_message");
    var error_name = document.getElementById("error_name");
    var error_email = document.getElementById("error_email");
    var error_number = document.getElementById("error_number");

    
    var text , text1, text2, text3;
    if(name.length < 5 || !isNaN(name) || name.length> 50){
      text = "*Please Enter Valid Name*";
      error_name.innerHTML = text;
      return false;
    }
    if(isNaN(phone) || phone.length != 10){
      text1 = "*Please Enter valid Phone Number*";
      error_number.innerHTML = text1;
      return false;
    }
    if(email.indexOf('@') <= 0 ){
      text2 = "*Please Enter valid Email*";
      error_email.innerHTML = text2;
      return false;
    }
    if((email.charAt(email.length-4)!='.') && (email.charAt(email.length-3)!='.')){
      text2 = "*Please Enter valid Email*";
      error_email.innerHTML = text2;
      return false;
    }
    if(message.length <= 30 || message.length >= 300){
      text3 = "*Message Must be Between 30 To 300*";
      error_message.innerHTML = text3;
      return false;
    }
    alert("Form Submitted Successfully!");
    return true;
  }
bhuku
  • 3
  • 4

5 Answers5

0

As per your code , error should not disappear until you press submit. Because, you are validating only after you call submit() and only that method can tell you if its valid input or not.

If you want to toggle error message as and when , then validate onChange of the field. Means, the validate function is called everytime the data changes in the field.

You can also try out onBlur. This will wait for you to complete typing , and click the next field ( or anywhere outside the field) and then triggers the validation , to show any error message.

And if you want to learn how validation in js works, there are many example out there . Follow them I literally googled javascript manual form validation and found plenty of examples.

madhairsilence
  • 3,787
  • 2
  • 35
  • 76
0

You need to complete the conditional for each conditional and then redefine your error variables when the conditional returns true.

NOTE: rather than defining your elements values, we define the element, then use the value in the conditional. This allows us to use the variable for the element in other ways inside the conditionals, like styling your elements other CSS properties.

One thing to consider though, change your function as an eventListener and use the change event for each input rather than your submit button.

function validate() {
  var name = document.getElementById("name");
  var phone = document.getElementById("phone");
  var email = document.getElementById("email");
  var message = document.getElementById("message");
  var error_message = document.getElementById("error_message");
  var error_name = document.getElementById("error_name");
  var error_email = document.getElementById("error_email");
  var error_number = document.getElementById("error_number");


  var text, text1, text2, text3;
  if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
    text = "*Please Enter Valid Name*";
    error_name.innerHTML = text;
    name.style.boxShadow = '0px 0px 5px red';
    return false;
  } else {
    text = "";
    error_name.innerHTML = text;
    name.style.boxShadow = '0px 0px 5px green';
  }
  if (isNaN(phone.value) || phone.value.length != 10) {
    text1 = "*Please Enter valid Phone Number*";
    error_number.innerHTML = text1;
    phone.style.boxShadow = '0px 0px 5px red';
    return false;
  } else {
    text1 = "";
    error_number.innerHTML = text1;
    phone.style.boxShadow = '0px 0px 5px green';
  }
  if (email.value.indexOf('@') <= 0) {
    text2 = "*Please Enter valid Email*";
    error_email.innerHTML = text2;
    email.style.boxShadow = '0px 0px 5px red';
    return false;
  } else {
    if ((email.value.charAt(email.value.length - 4) != '.') && (email.value.charAt(email.value.length - 3) != '.')) {
      text2 = "*Please Enter valid Email*";
      error_email.innerHTML = text2;
      email.style.boxShadow = '0px 0px 5px red';
      return false;
    } else {
      text2 = "";
      error_email.innerHTML = text1;
      email.style.boxShadow = '0px 0px 5px green';
    }
  }

  if (message.value.length <= 30 || message.value.length >= 300) {
    text3 = "*Message Must be Between 30 To 300*";
    error_message.innerHTML = text3;
    message.style.boxShadow = '0px 0px 5px red';
    return false;
  } else {
    text3 = "";
    error_email.innerHTML = text3;
    message.style.boxShadow = '0px 0px 5px green';
  }
  alert("Form Submitted Successfully!");
  return true;
}
<form action="mail.php" id="myform" onsubmit="return validate();" method="POST">
  <div class="input_field">

    <input type="text" id="name" name="name">
    <div id="error_name" class="error"></div>
  </div>
  <div class="input_field">

    <input type="text" id="phone" maxlength="10" name="number">
    <div id="error_number" class="error"></div>
  </div>
  <div class="input_field">

    <input type="text" id="email" name="email">
    <div id="error_email" class="error"></div>
  </div>
  <div class="input_field">

    <textarea id="message" name="message"></textarea>
    <div id="error_message" class="error"></div>
  </div>
  <div class="btn">
    <input type="submit">
  </div>
</form>
dale landry
  • 7,831
  • 2
  • 16
  • 28
0

You need to evaluate again the code of each input validation each time the user update the value after the error.

One way to do it will be to add an EventListener to each input that produce the error before to return false in the function validate and remove the EventListener after the validation stop fails.

For example for the name input you could do it as follow, and so after the same for the rest of inputs.

At the end, some refactor could help you to avoid code repetition.

    <script type="text/javascript">
        function observeNameInputRequirementCondition(e){
            const nameInput = document.getElementById("name");
            const name = nameInput.value
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
                nameInput.removeEventListener('input', observeNameInputRequirementCondition);
            }
        }


        function validate() {
            var name = document.getElementById("name");
            var phone = document.getElementById("phone");
            var email = document.getElementById("email");
            var message = document.getElementById("message");
            var error_message = document.getElementById("error_message");
            var error_name = document.getElementById("error_name");
            var error_email = document.getElementById("error_email");
            var error_number = document.getElementById("error_number");


            var text, text1, text2, text3;
            if (name.value.length < 5 || !isNaN(name.value) || name.value.length > 50) {
                text = "*Please Enter Valid Name*";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px red';
                name.addEventListener('input', observeNameInputRequirementCondition);
                return false;
            } else {
                text = "";
                error_name.innerHTML = text;
                name.style.boxShadow = '0px 0px 5px green';
            }
            if (isNaN(phone.value) || phone.value.length != 10) {
                text1 = "*Please Enter valid Phone Number*";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text1 = "";
                error_number.innerHTML = text1;
                phone.style.boxShadow = '0px 0px 5px green';
            }
            if (email.value.indexOf('@') <= 0) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                if ((email.value.charAt(email.value.length - 4) != '.') && (email.value.charAt(email.value.length - 3) != '.')) {
                text2 = "*Please Enter valid Email*";
                error_email.innerHTML = text2;
                email.style.boxShadow = '0px 0px 5px red';
                return false;
                } else {
                text2 = "";
                error_email.innerHTML = text1;
                email.style.boxShadow = '0px 0px 5px green';
                }
            }

            if (message.value.length <= 30 || message.value.length >= 300) {
                text3 = "*Message Must be Between 30 To 300*";
                error_message.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px red';
                return false;
            } else {
                text3 = "";
                error_email.innerHTML = text3;
                message.style.boxShadow = '0px 0px 5px green';
            }
            alert("Form Submitted Successfully!");
            return true;
    }
   </script>
ManuelMB
  • 1,254
  • 2
  • 8
  • 16
0

please check this link. I tried to solve your problems many time with javascript involving jquery. Finally i realized that the alert always appear before the DOM manipulation is done.

pullidea-dev
  • 1,768
  • 1
  • 7
  • 23
-1

You need to introduce a new concept: timing. Let's say after the message is displayed, wait for 2s then hide the message. To do so you can use setTimeout (https://www.w3schools.com/js/js_timing.asp). Next step tries to see what's happened if you click very fast multiple times (to call validate function), you will have a pending stack of setTimeout callback, see clearTimeout.

Jules Goullee
  • 571
  • 4
  • 11