CODEWITHSUNDEEP
javascripthtmlcssforms
spencer.sm
spencer.sm

Reputation: 20544

Simple form field validation for multiple input boxes in Javascript

I'm trying to get multiple form elements to automatically be styled according to whether they are empty or not. I was able to get the input number 1 to work how I want but now I just can't figure out how to get the function to apply to the other four input boxes as well.

<script>
var text = document.getElementById('text');

function checker() {
    if (text.value === "") {
        text.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;";
    } else {
    text.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;";
    }
}

setInterval(checker,100);
</script>

<input id="text"></input><br>
<input id="text2"></input><br>
<input id="text3"></input><br>
<input id="text4"></input><br>

And here's a jsfiddle I was using to try to get it to work. Link

Upvotes: 1

Views: 1129

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42736

Give each input an class like validate, then have each one use the change/keyup event listener. You can then add a submit event to do a final check before submission

HTML

<form id="myform">
   <input class="validate" id="text"></input><br>
   <input class="validate" id="text2"></input><br>
   <input class="validate" id="text3"></input><br>
   <input class="validate" id="text4"></input><br>
   <button>Submit</button>
 </form>

JS (note I use change and keyup because change only fires after leaving the input)

window.onload = function(){
    var inputs = document.getElementsByClassName("validate");
    if(inputs){
        for(var i=0; i<inputs.length; i++){
            inputs[i].addEventListener("change",validateInput);
            inputs[i].addEventListener("keyup",validateInput);
        }
    }
    var form = document.getElementById("myform");
    if(form){
        form.addEventListener("submit",validateForm,false);
    }
};

function validateInput(){
    if (this.value === "") {
        this.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;";
    } else {
        this.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;";
    }
}

function validateForm(e){
    inputs = document.getElementsByClassName("validate");
    var hasEmpty = false;
    for(var i=0; i<inputs.length; i++){
        validateInput.call(inputs[i]);
        if(inputs[i].value==="") hasEmpty = true;
    }
    if(hasEmpty){
        e.preventDefault();
    }
}

JSFIDDLE DEMO

If you are open to using jQuery this would cut down on your code

$(document).ready(function(){
   $(".validate").change(validateInput);
   $(".validate").keyup(validateInput);
   $("#myForm").submit(validateForm);
});

function validateInput(){
    if (this.value === "") {
        $(this).css({
           borderWidth:"5px",
           borderColor:"red",
           borderStyle:"solid",
           borderRadius:"3px"
        });
    } else {
        $(this).css({
           borderWidth:"5px",
           borderColor:"limegree",
           borderStyle:"solid",
           borderRadius:"3px"
        });
    }
}

function validateForm(e){
    var hasEmpty = false;
    $(".validate").each(function(index,input){
        $(input).change();
        if(input.value==="") hasEmpty = true;
    });
    if(hasEmpty){
        e.preventDefault();
    }
}

Upvotes: 1

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

<script>
var button = document.getElementById('button');
var test = document.getElementsByName('test');

function checker() {
    var elementsToTest = ["text", "text2", "text3", "text4"];
    for (var i = 0; i < elementsToTest.length; i++) {
      var el = document.getElementById(elementsToTest[i]);

      if (el.value === "") {
          el.style.cssText = "border-width:5px;border-color:red;border-style:solid;border-radius:3px;";
      } else {
        el.style.cssText = "border-width:5px;border-color:limegreen;border-style:solid;border-radius:3px;";
      }
   }
}

setInterval(checker,100);
</script>

Upvotes: 2

Related Questions