Validation for text input in JavaScript

Question

I am writing form with small js function and email regex. I want to make validation and display error when input is empty or string for email (id = "email") is not valid. I want as well to make possibility to remove error class from input after clicking the button, when requirement for input will be achieved. In this moment my function will not remove error class from not email input unless correct email will be implemented (regex), so even if another input is ok, i am not able to pass the validation for that input until email will be correct.

My code:

    Validation();
    function Validation() {
        $('.my-button').click(function(){

          $("input,textarea").each(function() {
            var element = $(this);
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var email = document.getElementById("email");
            var notification = document.getElementById("notification");
           
            if (element.val() == "") {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                notification.style.display = "block";
              }
            
            else if (!reg.test(email.value)) {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                email.focus;
                return false;
            } 
            else if (!element.val() == "") {
                element.closest('.label-error').css('visibility', 'hidden');
                element.closest('.my_item').removeClass('error');
                notification.style.display = "none";
            }   
                     
          });
        });
      }
}

Edit: html code below:

<div class="write-to-us">
                <div class="col-md-12 field">
                    <p>Write to us</p>
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label>Name</label>
                        <input  type="text" name="subject" class="my-text-input">
                        <div class="label-error">Write your Name</div>
                    </div> 
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label>Surname</label>
                        <input type="text" id="email"  name="email" class="my-text-input">
                        <div class="label-error">Write your email</div>
                </div>
                </div>
                <div class="col-md-12 field">
                    <div class="my_item">
                        <label">Question</label>
                        <textarea type="text" name="subject" class="my-text-input"></textarea>
                    </div>
                </div>
                <div>
                    <button class="my-button">Check it</button>
                </div>
            </div>

Does anyone has idea how to solve it? To remove error class from other inputs and leave error only on email (if only email is incorrect)?

Answer 1

The problem is you check if the "email" element is correct for every input or textarea element. If you put another condition to check if the current element in the loop is the "email" element it should work fine. Something like this:

    function Validation() {
        $('.my-button').click(function(){

          $("input,textarea").each(function() {
            var element = $(this);
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            var notification = document.getElementById("notification");
           
            if (element.val() == "") {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                notification.style.display = "block";
              }
            else if (!element.val() == "") {
                element.closest('.label-error').css('visibility', 'hidden');
                element.closest('.my_item').removeClass('error');
                notification.style.display = "none";
            }

            if (element.attr("id") === "email" && !reg.test(element.val())) {
                element.closest('.label-error').css('visibility', 'visible');
                element.closest('.my_item').addClass('error');
                element.focus;
            } 
          });
        });
      }
}

I did not test it, but the idea is there. If you provide your html code I'll test it out.