how to validate both check box and textbox field at a time

[madhuri kunchala]

hi,
i created jsp page..in it i used check boxes and textboxes..after clicking checkbox it is not validating the text...i need to validate both the fields..here is my code..its urgent for me...i need help where the code is wrong..

login.jsp

    <td><font color="#800000" size=""><b>Low-Bal</b></font></td>
    <td><input type="checkbox" name="balrdys" value="F,">Fresh A/c <input type="text" name="balrdys" size="1"><br>
    <input type="checkbox" name="balrdys" value="A,">Renewal   <input type="text" name="balrdys" size="1"><br>
    <input type="checkbox" name="balrdys" value="NO">No<br>
    <td></td>

and javascript code is

  

   var chkBalrdays = document.getElementsByName('balrdys');
   var hasBalrdaysChecked = false;
   for (var j = 0; j < chkBalrdays.length; j++)
     {
          if (chkBalrdays[j].checked)
           {
               hasBalrdaysChecked = true;
               break;
           }
       }
   if (!hasBalrdaysChecked)
     {
          alert("Please select at least one Low BalRDays");
           return false;
       }
   if (document.frm.balrdys.value == ""){
        alert("Enter Balance");
       document.frm.balrdys.focus()
        return (false);
      }
   
 

Thanks and waiting for the reply,
madhu.

[Ankit Garg]

if (document.frm.balrdys.value == "")

Change this line of the code. All your checkboxes and text fields have the same name. What you would want to do is check if a checkbox is checked, and if it is, check if the corresponding text field has a value. You can do it like this

HTML:
<input type="checkbox" name="balrdys" value="A," id="chkA">Renewal   <input type="text" name="balrdys" size="1" id="txtA" />

javascript:
if(document.getElementById('chkA').checked) {
    var txt = document.getElementById('txtA');
    if(txt.value.length == 0) {
         window.alert("Enter Renewal Balance");
         txt.focus();
         return false;
    }
}

You can implement this similar logic for the other text field too...

[madhuri kunchala]

hi,
Thanks for your reply..i tried it is working...the problem is if i didnt check the check-box it is not showing any alert message that checkbox should be selected...can you help me out regarding that..i need both check box and textfield should be validated...that means if i check checkbox and left text field it should ask for 'Enter the value inText box'..vice-versa..or suggest me where to change the code...

Thanks and waiting for the reply,
madhu.

[Ankit Garg]

madhuri both your checkboxes and text fields have the same name. So document.getElementsByName('balrdys') will return both of them. Then when you iterate over the elements, you'll get an error when the element is a text box as there is no checked property on text boxes. You can assign an ID to all the checkboxes and check if any of them are checked using getElementById as I already gave you an example...

[madhuri kunchala]

hi,
i got your point..if i didnt check the checkbox it is directly loading..that means it is not showing the errors...i had pasted the same example what you had given to me...i need help that if i left any one and press submit..it is should throw an error..i changed the code as follows..

  

 var chkBalrdays = document.getElementById('chkA');
    var hasBalrdaysChecked = false;
    var txt = document.getElementById('txtA');
    for (var j = 0; j < chkBalrdays.length; j++)
    {
        if (chkBalrdays[j].checked)
        {
            hasBalrdaysChecked = true;
            break;
        }
        if(txt.value.length == 0)
        {
            window.alert("Enter Renewal Balance");
            txt.focus();
            return false;
        }
    }
    if (!hasBalrdaysChecked)
    {
        alert("Please select at least one Low BalRDays");
        return false;
    }

 

Thanks,madhu.

[Ankit Garg]

madhuri getElementById always returns only one element. You can't iterate over what it returns. And IDs should be unique in a page. What I want to say is, the way the code I gave checks if a checkbox is checked and if it is, its corresponding text box has a value, you can introduce two other conditions in your javascript. Just like you are doing in your code right now, if any of the checkbox is checked, you set the value of a variable to see if a checkbox was checked. So it will go something like this

var hasBalrdaysChecked = false;
if(document.getElementById('chkA').checked) {
    hasBalrdaysChecked = true;
    var txt = document.getElementById('txtA');
    if(txt.value.length == 0) {
         window.alert("Enter Renewal Balance");
         txt.focus();
         return false;
    }
}
//check the other two checkboxes if they are checked
if (!hasBalrdaysChecked) {
    alert("Please select at least one Low BalRDays");  
    return false;
}

So what you do is you give a separate ID to your checkboxes and text boxes and then check them using getElementById. This is just one way of implementing it, there are other ways of implementing the same thing as well...