JQuery dropdown list box validation help

Discussion in 'jQuery' started by jhana, Dec 14, 2012.

0
  1. #1
    <html>
    <head>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function()

    {
    var output="";

    output="<select id='day' name='day'>";

    output +="<option value='day'>day</option>";

    for(var i = 1; i <= 31 ; i++)

    {
    output +="<option value='" + i + "'>" +i+ "</option>";

    }

    output +="</select>";

    $("#dayCon").html(output);

    output="<select id='month' name='month'>";

    output +="<option value='month'>month</option>";

    var mon=["Jaunary","Febray","March","April","May","June","July","August","September", "October","November","December"];

    for(var i = 0 ; i < mon.length ; i++)

    {
    output +="<option value='" + mon + "'>" +mon+ "</option>";

    }

    output +="</select>";

    $("#monthCon").html(output);

    output="<select id='year' name='year'>";

    output +="<option value='year'>year</option>";

    for(var i = 1950; i <= 2013 ; i++)

    {
    output +="<option value='" + i + "'>" +i+ "</option>";

    }

    output +="</select>";

    $("#yearCon").html(output);

    });

    </script>

    </head>

    <body>

    <select id="dayCon" name="dayCon"></select>
    <select id="monthCon" name="monthCon"></select>
    <select id="yearCon" name="yearCon"></select>

    <label class="errField" id="dboLab"></label>
    <br>
    <input type="submit" />

    </body>
    </html>

    How to validate drop down list using blur or keyup function.
    please help.
     
    jhana, Dec 14, 2012 IP
  2. ramzmhr2

    ramzmhr2 Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You are creating <select>tag inside a <select> tag, any way you can create a Jquery blur function for each Select tag.

    $("#dayCon,#monthCon, #yearCon").blur(function(){


    var day= document.getElementById("dayCon")

    var dOpt=day.options[day.selectedIndex].text

    var month= document.getElementById("monthCon")

    var mOpt=month.options[month.selectedIndex].text

    var year= document.getElementById("yearCon")

    var yOpt=year.options[year.selectedIndex].text

    var err=document.getElementById("dboLab");

    if (dOpt=="day" || mOpt=="month" || yOpt=="year" ){

    err.innerHTML="please provide your birth date";
    }
    else
    {
    err.innerHTML="ok";
    }

    });

    your complete Code will be as following.
    <html>
    <head>

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function()

    {
    var output="";

    output="<select id='day' name='day'>";

    output +="<option value='day'>day</option>";

    for(var i = 1; i <= 31 ; i++)

    {
    output +="<option value='" + i + "'>" +i+ "</option>";

    }

    output +="</select>";

    $("#dayCon").html(output);

    output="<select id='month' name='month'>";

    output +="<option value='month'>month</option>";

    var mon=["Jaunary","Febray","March","April","May","June","July","August","September", "October","November","December"];

    for(var i = 0 ; i < mon.length ; i++)

    {
    output +="<option value='" + mon + "'>" +mon+ "</option>";

    }

    output +="</select>";

    $("#monthCon").html(output);

    output="<select id='year' name='year'>";

    output +="<option value='year'>year</option>";

    for(var i = 1950; i <= 2013 ; i++)

    {
    output +="<option value='" + i + "'>" +i+ "</option>";

    }

    output +="</select>";

    $("#yearCon").html(output);

    $("#dayCon,#monthCon, #yearCon").blur(function(){


    var day= document.getElementById("dayCon")

    var dOpt=day.options[day.selectedIndex].text

    var month= document.getElementById("monthCon")

    var mOpt=month.options[month.selectedIndex].text

    var year= document.getElementById("yearCon")

    var yOpt=year.options[year.selectedIndex].text

    var err=document.getElementById("dboLab");

    if (dOpt=="day" || mOpt=="month" || yOpt=="year" ){

    err.innerHTML="please provide your birth date";
    }
    else
    {
    err.innerHTML="ok";
    }

    });

    });

    </script>

    </head>

    <body>

    <select id="dayCon" name="dayCon"></select>
    <select id="monthCon" name="monthCon"></select>
    <select id="yearCon" name="yearCon"></select>

    <label class="errField" id="dboLab"></label>
    <br>
    <input type="submit" />

    </body>
    </html>
     
    ramzmhr2, Dec 16, 2012 IP