Solved

jquery ui datepicker validation

Posted on 2011-09-14
3
436 Views
Last Modified: 2012-05-12
Hi Experts,

I'm using a standard Jquery-UI datepicker and I'd like to add validation to the text field because visitors can just type any number in the field.

How can I do this?

Thanks,

HNM
0
Comment
Question by:HelpNearMe
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 36536385
set the onsubmit attribute of your form :

<form onsubmit="return validate()">

and use :

<script>
function validate() {
     var dateField = document.getElementsByTagName("myDate")[0].value;
     var dateFieldisValid =  /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(dateField); // YYYY-MM-DD
     if( ! dateFieldisValid ) alert( "please enter a valide date" );
     return dateFieldisValid; 
}
</script>

Open in new window

0
 

Author Comment

by:HelpNearMe
ID: 36537330
leakim971:

Thanks but that doesn't seem to work.  I've attached the form code perhaps you can see where the problem is?

BTW... it's not a jquery data picker like I thought it was.  And I didn't code this page.. I know this page.. it's horrible.  I've been asked to add date validation to it.

Thanks,

HNM
<!-- testing datepicker validation -->
<script type="text/javascript">
    function validate() {
        var dateField = document.getElementsByTagName("wedding_date")[0].value;
        var dateFieldisValid = /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(dateField); // YYYY-MM-DD
        if (!dateFieldisValid) alert("please enter a valid date");
        return dateFieldisValid;
    }
</script>

<!-- end -->


<form action="recibe_form.php" method="post" name="Registro" id="Registro" onsubmit="return validate()">

<table border="0" cellpadding="1" cellspacing="1">

                          <tbody>

                            <tr>

                              <td valign="middle" width="200"><strong> Wedding Date </strong> </td>

                              <td valign="middle"><input name="wedding_date" type="text" id="wedding_date" class="Texto_contenido requerido"  value="" size="10" />

                                    <img src="https://www.logiforms.com/jsimages/calendaricon.gif" alt="3" name="wedding_date_calimage" hspace="4" border="0" id="wedding_date_calimage" /></td>
                            </tr>
                          </tbody>
                        </table>

<input type="submit" class="Texto_titulo_index14Copy" value="Submit" name="Submit" />

</form>

Open in new window

0
 

Author Comment

by:HelpNearMe
ID: 36537341
The script is in the <head> section.. and of course all of this is wrapped in relevant body tags etc... the page works, except for the validation.

Thanks!

HNM
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now