CODEWITHSUNDEEP
javascripthtmlformsvalidation
Garrett
Garrett

Reputation: 261

HTML Form - Form keeps validating everything at once

I'm having validation problems with a HTML form I created. It seems to be running all the validation checks when I validate the first input without entering anything into the second input. I want it so when I finish entering the first input, it validates only that one. Then I can repeat the same process to the second input. Once both inputs are correctly validated then the user can submit. I've recreated what I have in a JSFiddle which can be found here: http://jsfiddle.net/aJ2Tw/220/. Any help would be appreciated!

Code:

<form action="" method="post" onsubmit="return FormValidation();" onchange="return FormValidation();">

        <div class="input-wrapper">
            <input type="text" placeholder="First Name" id="firstname" name="name"/>
                        <input type="text" placeholder="First Name" id="lastName" name="name"/>
        </div>



    <a href="#" onclick="FormValidation()">Submit</a>

    <script>
        function FormValidation(){
        //First Name Validation 
    var fn=document.getElementById('firstname').value;
    if(fn == ""){
        alert('Please Enter First Name');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
        alert("First Name Contains Numbers!");
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
    if(fn.length <=2){
        alert('Your Name is To Short');
        document.getElementById('firstname').style.borderColor = "red";
        return false;
    }else{
        document.getElementById('firstname').style.borderColor = "green";
    }
  }
    </script>

Upvotes: 0

Views: 49

Answers (1)

Rahul Malu
Rahul Malu

Reputation: 566

You can create create flags which will keep track of if a input field has been touched/changed once. Then in your FormValidation method you can only validate/display error only for the fields which have been touched/changed.

    <form action="" method="post" onsubmit="return FormValidation();" onchange="return FormValidation();">

        <div class="input-wrapper">
            <input type="text" onchange="input1Changed()" placeholder="First Name" id="firstname" name="name"/>
            <input type="text" onchange="input2Changed()" placeholder="First Name" id="lastName" name="name"/>
        </div>

    <a href="#" onclick="FormValidation()">Submit</a>

    <script>
        function FormValidation(){
            if(isInput1Changed)
             {
              //validations/errors of Firstname
             }
            if(isInput2Changed)
             {
             //validations/errors of lastname
             }
          }
         var isInput1Changed = false;
         var isInput2Changed = false;
         function input1Changed(){
         isInput1Changed = true;
         }

         function input2Changed(){
         isInput2Changed = true;
         }
    </script>

Hope you get the point!

Upvotes: 1

Related Questions