Form Validation (with bg color indicator) ?

Discussion in 'JavaScript' started by KingCobra, Sep 2, 2011.

  1. #1
    Firstly thanks to DigitalPoint and its users for providing me many help and solution previously.

    I have a new problem. The following script wroks fine. (just copy and save it as a html file and run)

    
    <html>
    <head>
    
    <style type="text/css">
    .input
    {
    background-color: white;
    }
    .inputreq
    {
    background-color: red;
    }
    </style>
    
    <script type="text/javascript">
    function Valid(oForm) {
      var AllElms = new Array();
      var ValidElms = new Array();
    
      if(oForm.username.value == "") {
        AllElms[AllElms.length] = oForm.username;
      }
      else ValidElms[ValidElms.length] = oForm.username;
    
      if(oForm.age.value == "") {
        AllElms[AllElms.length] = oForm.age;
      }
      else ValidElms[ValidElms.length] = oForm.age;
    
      if(ValidElms.length > 0) {
        for(var t = 0; t < ValidElms.length; t++) ValidElms[t].className = "input";
      }
    
      if(AllElms.length > 0) {
        for(var i = 0; i < AllElms.length; i++) {
          AllElms[i].className = "inputreq";
          AllElms[i].select();
        }
    
        return false;
      }
    }
    </script>
    </head>
    
    <body>
    
    <form name="signup" onsubmit="return Valid(this);">
    <input type="text" name="username" class="input"><br>
    <input type="text" name="age" class="input"><br>
    <input type="submit">
    </form>
    
    </body>
    </html>
    
    Code (markup):
    I want to check drop-down list, check box, radio button & textarea same way. So if I add following to my existing form then how can I check them by javascript like previous 2 fields?

    
    <select name="amount" class="input">
    	<option value="">--Select --</option>
    	<option value="100">$100</option>
    	<option value="200">$200</option>
    </select><br>
    
    <input type="radio" name="size" value="small"  class="input">Small<br>
    
    <input type="checkbox" name="toon" value="Goofy"  class="input">Goofy<br>
    
    <textarea rows="5" cols="20" name="comments"  class="input">
    
    Code (markup):
     
    KingCobra, Sep 2, 2011 IP
  2. KingCobra

    KingCobra Well-Known Member

    Messages:
    289
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #2
    Someone please tell me how I will validate at least "drop-down list" like previous validation (i.e. username & age).
     
    KingCobra, Sep 2, 2011 IP
  3. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #3
    If the length of the value of the element is 0, nothing has been selected.
     
    Rukbat, Sep 2, 2011 IP