SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Lincoln NE
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simple format function

    I'm looking for a simple Javascript function that would check the input format for a text field (used to enter time).
    Unless the end user types the time in this format (hh:mm) I want it to pop up a window and prompt him to use the correct format. Thanks for any help.

    cb

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not use a pair of listboxes? Then you'll constrain your users to entering the data in the preferred format, without requiring validation.
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Lincoln NE
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought about that, but for what I'm doing, I want to end user to enter what ever then want (as long as it's hh:mm format) so having a dropdown list with tim in 15 minutes increments will not work. Thanks.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By 'time' did you mean 'time of day', or any combination of hours & minutes?
    ::: certified wild guess :::

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gotta run....hth:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>buy stuff</title>
    <style type="text/css">
    
    select {
    	font: 14px monospace;
    }
    strong {
    	font: 28px monospace;
    }
    
    </style>
    <script type="text/javascript">
    
    function checkTime(hours, minutes) //use for selects
    {
    	if (hours.selectedIndex == 0 || minutes.selectedIndex == 0)
    	{
    		alert('\nPlease enter a valid time.\n\nThank you.');
    		hours.focus();
    		return false;
    	}
    	return true;
    }
    
    function checkTime(field) //use for text field
    {
    	if (!/^\d{2}:[0-5]\d$/.test(field.value))
    	{
    		alert('\nPlease enter a valid time in the format:\n\nhh:mm\n\nThank you.');
    		field.focus();
    		field.select();
    		return false;
    	}
    	return true;
    }
    
    </script>
    </head>
    <body>
    <form action="javascript&#58;alert('ok')" onsubmit="return checkTime(time)">
    <!-- for selects: use onsubmit="return checkTime(hours, minutes)" -->
    <select id="hours" name="hours">
    <option value="" selected="selected">--</option>
    <option value="00">00</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select><strong>:</strong><select id="minutes" name="minutes">
    <option value="" selected="selected">--</option>
    <option value="00">00</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    <option value="06">06</option>
    <option value="07">07</option>
    <option value="08">08</option>
    <option value="09">09</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
    <option value="49">49</option>
    <option value="50">51</option>
    <option value="51">51</option>
    <option value="52">52</option>
    <option value="53">53</option>
    <option value="54">54</option>
    <option value="55">55</option>
    <option value="56">56</option>
    <option value="57">57</option>
    <option value="58">58</option>
    <option value="59">59</option>
    </select><br /><br />
    <input type="text" name="time" value="" /><br /><br />
    <input type="submit" />
    </form>
    </body>
    </html>
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Lincoln NE
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the above code. I'm going to go with this function.

    Code:
    function checkTime(field) //use for text field
    {
    	if (!/^\d{2}:[0-5]\d$/.test(field.value))
    	{
    		alert('\nPlease enter a valid time in the format:\n\nhh:mm\n\nThank you.');
    		field.focus();
    		field.select();
    		return false;
    	}
    	return true;
    }
    but I still need to add the functionality to limit the the hour just from 01 to 12 and the minutes from 01 to 59. (example, user can not type 25:66)

    Also, I want the user to be forced to enter the (AM/PM) after the hh:mm)

    basically, I want to alert the user unless they type in the time in the follow format (hh:mm AM/PM)
    can someone help me modify the code above to accomplish this. Thanks for any help

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    function checkTime(field) //use for text field
    {
    	if (!/^(0[1-9]|1[0-2]):[0-5]\d ?(A|P)M$/i.test(field.value))
    	{
    		alert('\nPlease enter a time in the format:\n\nhh:mm AM/PM\n\nThank you.');
    		field.focus();
    		field.select();
    		return false;
    	}
    	return true;
    }
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Lincoln NE
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adios,

    Thanks for taking the time to get this function for me. I appreciate your help.
    cb


Bookmarks

Posting Permissions

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