validating html object array using javascript

In this example, we validate an array of checkbox, text, and radio fields. We also validate a html drop down “select”

<!DOCTYPE html>
<html>
<head>
    <title>Untitled document</title>
  <meta charset="utf-8" />

    <script language="javascript" type="text/javascript">
        function validate()
        {
            var currency = document.getElementById("txtcurrency").value;
            var country = document.getElementById("ddlcountry");
            var radsuit = document.getElementsByName("radSuit");
      var chkSuit = document.getElementsByName("chkSuit");
    
            var status=false;
            var str = "";
        
    for (var i = 0; i < radsuit.length; i++)
            {
    
            // str = str + radsuit[i].value + " " + radsuit[i].checked + "<br />"; 
         if(radsuit[i].checked==true)
         {
         status = true;
         }
          }
      
      if(status == false)
      {
      alert("At least one option must be selected");
      return false;
      }
          var ctr=0; 
      for (var i = 0; i < chkSuit.length; i++)
            {
        if(chkSuit[i].checked == true)
        {
        ctr++;
        }
      }
      
      if(ctr < 2)
      {
      alert("At least two checkbox must be selected");
      return false;
      }
      
      
            //document.write(str);
    
     
            var selected = country.selectedIndex;
     /*       document.write(country.options[selected].value + " " +
                country.options[selected].text);
     */
      
      
      if( country.selectedIndex == 0)
      {
      alert("Country must be selected");
      return false;
      }

            var currencyFormat = /^\d+(\.\d{1,2})?$/;
      
      if( currencyFormat.test(currency) != true)
      {
      alert("Currency must be correct format");
      return false;
      }
      
            		return true;
                //    return false; 
      
      
        }
    </script>
</head>
<body>
<form id="frm" name="frm" method="post" 
      action="" onsubmit="return validate();">
    <table border="1">
    
    <tr>
      <td>Country</td>
      <td>
      <select id="ddlcountry" name="ddlcountry">
      <option value="0">--Select--</option>
      <option value="PAK">Pakistan</option>
      <option value="SRI">Srilanka</option>
      <option value="AUS">Australia</option>
      <option value="CAN">Canada</option>
      </select>
      </td>
    </tr>
    
    <tr>
      <td>Select Choice</td>
      <td>
      <p><input id="radSuit"  name="radSuit" type="radio" value="hearts" /> Hearts </p>
      <p><input id="radSuit"  name="radSuit" type="radio" value="diamonds" /> Diamonds </p>
      <p><input id="radSuit"  name="radSuit" type="radio" value="spades" /> Spades </p>
      <p><input id="radSuit"  name="radSuit" type="radio" value="clubs" /> Clubs </p>
      
      </td>
    </tr>
    
    <tr>
      <td>Select checkbox</td>
      <td>
      <p><input id="chkSuit"  name="chkSuit" type="checkbox" value="hearts" /> Hearts </p>
      <p><input id="chkSuit"  name="chkSuit" type="checkbox" value="diamonds" /> Diamonds </p>
      <p><input id="chkSuit"  name="chkSuit" type="checkbox" value="spades" /> Spades </p>
      <p><input id="chkSuit"  name="chkSuit" type="checkbox" value="clubs" /> Clubs </p>
      
      </td>
    </tr>
    
    <tr>
      <td></td>
      <td></td>
    </tr>
    
    <tr>
      <td></td>
      <td></td>
    </tr>
    
    </table>
    
    <input id="txtcurrency" name="txtcurrency" type="text" />
    <br /><br />
    <input id="btn" name="btn" type="submit" value="Submit" />
</form>
</body>
</html>

 

 

Add a Comment

Your email address will not be published. Required fields are marked *