Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post

    validation of drop down list...

    Hey,

    I have three fields (drop down lists):

    day (selected default value = "day")
    month (selected default value = "month")
    year (selected default value = "year")

    the values of which are fairly obvious....!!

    I need some sort of validation which says.. if one of the lists is not equal to their default selected value, then alert for the other fields to be completed.

    For example, I select option "31" from the day drop down list.. I need some code to say, "OK, you've selected a date, but not a month or a year..so go and do that" ... and vice versa... so if the user selected a year, but not a day or a month... etc

    ..... can any one help me with this one please?!! Thanks!!

  • #2
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts
    Code:
    <html>
    <head>
    <script language="javascript">
    function check_dates(test){
    error_msg="";
    if ((test.my_month.options[test.my_month.selectedIndex].text)=="month")
      error_msg="Enter a month";
    if ((test.my_day.options[test.my_day.selectedIndex].text)=="day")
      error_msg+="\nEnter a day";
    if ((test.my_year.options[test.my_year.selectedIndex].text)=="year")
      error_msg+="\nEnter a year";
    
    if (error_msg=="")
      return true;
    else{
      alert(error_msg);
      return false;
    }
    }
    </script>
    </head>
    <body>
    <form name="testform" onsubmit="return check_dates(this);">
    <select name="my_month">
    <option>month</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    </select>
    <select name="my_day">
    <option>day</option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    </select>
    <select name="my_year">
    <option>year</option>
    <option>2003</option>
    <option>2004</option>
    <option>2005</option>
    </select>
    <input type="submit">
    </form>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    596
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You'll also probably want filtering of the number of days per month, and adjustments for leap years. Depends on what the range of dates is.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <script type="text/javascript" language="javascript">
    
    var numDays = {jan: 31, mar: 31, apr: 30, may: 31, jun: 30, 
    jul: 31, aug: 31, sep: 30, oct: 31, nov: 30, dec: 31};
    
    function checkLeap(nYear) {
         return (nYear % 4 == 0) ? 29 : 28;
    }
    
    function isDefault(oSelect) {
         return oSelect[oSelect.selectedIndex].defaultSelected;
    }
    
    function setDays(oMonthSel, oDaySel, oYearSel) {
         if (isDefault(oMonthSel) && isDefault(oDaySel)) return false;
         var opt, oForm = oMonthSel.form;
         var nDays = numDays[oMonthSel[oMonthSel.selectedIndex].value];
         if (nDays == null && !isDefault(oYearSel))
             nDays = checkLeap(oYearSel[oYearSel.selectedIndex].value);
         var oDaySelLgth = oDaySel.length - 1;
         if (nDays != oDaySelLgth) {
             if (nDays<oDaySelLgth) 
                 oDaySel.length = nDays + 1;
             else {
                 for (var i=1; i<nDays-(oDaySelLgth-1); i++) {
                      opt = new Option(oDaySelLgth + i, oDaySelLgth + i);
                      oDaySel.options[oDaySel.length] = opt;
             }
          }
       }
    }
    
    function checkdate(oForm) {
         var oMonthSel = oForm.month, oDaySel = oForm.day, oYearSel = oForm.year;
         var aStr = msg = '';
         if (isDefault(oMonthSel))
             msg += 'MONTH\n';
         if (isDefault(oDaySel))
             msg += 'DAY\n';
         if (isDefault(oYearSel))
             msg += 'YEAR\n';
         if (msg != '' && !msg.match(/^MONTH\nDAY\nYEAR\n$/)) {
             aStr = '\nPlease choose from the following:\n\n';
             aStr += msg + '\n...to complete the date selection.\n\nThanks !\n\n';
             alert(aStr);
             oMonthSel.focus();
             return false;
       }
         return true;
    }
    
    </script>
    </head>
    <body>
    <hr />
    <form style="width:340px;padding:5px;border:3px silver ridge;" action="javascript&#58;alert('ok')" 
    onsubmit="return checkdate(this)">
    <strong>Date:</strong>
    <select name="month" onchange="setDays(this,day,year)">
    <option selected="selected">Month</option>
    <option value="jan">January</option>
    <option value="feb">February</option>
    <option value="mar">March</option>
    <option value="apr">April</option>
    <option value="may">May</option>
    <option value="jun">June</option>
    <option value="jul">July</option>
    <option value="aug">August</option>
    <option value="sep">September</option>
    <option value="oct">October</option>
    <option value="nov">November</option>
    <option value="dec">December</option>
    </select>
    <select name="day">
    <option selected="selected">Day</option>
    <script type="text/javascript" language="javascript">
    for (var i=1; i<=31; ++i) document.write('<option value="' + i + '">' + i + '</option>');
    </script>
    </select>
    <select name="year" onchange="setDays(month,day,this)">
    <option selected="selected">Year</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    </select>&amp;nbsp;&amp;nbsp;&amp;nbsp;
    <input type="submit" value="DONE" />
    </form>
    <hr />
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    cheers guys.. I'll give it a go now..... thanks!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •