CODEWITHSUNDEEP
javascriptasp.net
Rami Far
Rami Far

Reputation: 404

Highlight multiple fields on validate javascript

I want when textfields empty it will highlight it. Following is my code its only highlight one field at one time. If both fields empty it will highlight one field. 

<script>
function ValidateForm(){

    var summary=document.getElementById("<%=summary.ClientID%>");
    if (summary.value == "" && txtTest.value == "") {
        summary.style.backgroundColor = "Yellow";
        return false;
    }
    var txtTest = document.getElementById("<%=txtTest.ClientID%>");
    if (txtTest.value == "" ) {

        txtTest.style.backgroundColor = "Yellow";
        return false;
    }

   return true;

}
</script>

Please help me to solve this problem. I don't want to use default validators.

Upvotes: 0

Views: 129

Answers (4)

Tigger
Tigger

Reputation: 9130

An alternative approach if your form is more complex maybe to separate the validation and highlighting.

// onKeyUp
function k(e) {
 this.style.background = (this.value) ? "none" : "#0f0";
}
window.onload = function() {
  var t = ["in1","in2","in3"];
  var i, max = t.length;
  var d;
  for(i=0;i<max;i++) {
    d = document.getElementById(t[i]);
    d.style.background="#0f0";
    d.addEventListener("keyup",k,false);
  }
}
<input type="text" id="in1" name="in1" placeholder="Input 1"/><br />
<input type="text" id="in2" name="in2" placeholder="Input 2"/><br />
<input type="text" id="in3" name="in3" placeholder="Input 3"/><br />

Upvotes: 1

Dij
Dij

Reputation: 9808

that is because you are returning false before checking for the second input. you need to return true or false only after all inputs have been checked. Also you must first get txtTest before checking for its value. you can do something like this:

<script>
function ValidateForm(){

    var validate = true;

    var summary=document.getElementById("<%=summary.ClientID%>");
    if (summary.value == "") {
        summary.style.backgroundColor = "Yellow";
        validate = false;
    }
    var txtTest = document.getElementById("<%=txtTest.ClientID%>");
    if (txtTest.value == "" ) {

        txtTest.style.backgroundColor = "Yellow";
        validate = false;
    }

   return validate;

}
</script>

Upvotes: 1

Jatin Parmar
Jatin Parmar

Reputation: 2900

instead of returning false in error condition use flag to indicate error.

by default flag is true and if there is an error it should be set to false.

finally return error flag.

 <script>
 function ValidateForm(){
var flag=true;
var summary=document.getElementById("<%=summary.ClientID%>");

if (summary.value == "" && txtTest.value == "") {
    summary.style.backgroundColor = "Yellow";
    flag=false;
}
var txtTest = document.getElementById("<%=txtTest.ClientID%>");
if (txtTest.value == "" ) {

    txtTest.style.backgroundColor = "Yellow";
    flag=false;
}

 return flag;

}
</script>

Upvotes: 1

asdf_enel_hak
asdf_enel_hak

Reputation: 7640

first you should get txtTest var before evaluating it, then instead of returning after each if, do it at bottom for validation

var summary=document.getElementById("<%=summary.ClientID%>");
var txtTest = document.getElementById("<%=txtTest.ClientID%>");

if (summary.value == "") {
    summary.style.backgroundColor = "Yellow";
}

if (txtTest.value == "" ) {
    txtTest.style.backgroundColor = "Yellow";
}
return !(summary.value == "" || txtTest.value == "")

Upvotes: 1

Related Questions