Java Ninja Chronicles By Norris Shelton

Things I learned in the pursuit of code

jQuery makes it pretty easy to create form validation. All it takes it first setting the form up to validate when it submits.

<script type="text/javascript">
     $(document).ready(function() {
          $('#myForm').validate();
     });
</script>

Then you indicate the type of validations that should occur. There are a couple of ways to do this. The easiest for me is to add the validations as if they are CSS classes for the individual fields. In this example, I indicate that I want the field to be required and the value should be a valid date. Some of the other validations that are available are email, minlength, maxlength, min, max. The entire list is available here

<form name="myForm" id="myForm" action="">
        <input class="required date" type="text" id="myId" name="myDate" size="10" value="${yesterday}">
</form>

Error display is handled for you automatically. Standard validation messages are already set-up and the messages appear in red to the right of any invalid field.

By default, the validation is not triggered until the field is submitted, but any fields flagged by invalid are re-checked when they are changed.

December 15th, 2010

Posted In: javascript, JQuery

One Comment

There are two date pickers. jQuery has one, but it is simplified. The one that I like to use is by Keith Wood. His datepicker plugin formed the basis of the jQuery datepicker plugin. Keith’s plugin is available here.

Here is an example of the calendar.  The calendar will have the following features:

  • default date (defaultDate)
  • maximum date (maxDate)
  • triggering icon

Here is the script for the calendar

$(document).ready(function() {
     $('#recentDate').datepick({
          defaultDate: -1,
          maxDate: -1,
          showTrigger: '#recentDateImg'
     });
});

Here is what the html looks like:

<label for="recentDate">
     Recent <input type="text" id="recentDate" name="recentDate" size="10" value="${yesterday}">
     <div style="display:none">
          <img id="recentDateImg"
               src="/intranet-templating/bhsi/js/images/calendar.gif"
               alt="Recent Date"
               class="trigger">
     </div>
</label>

Notice that the triggering icon is surrounded by a DIV that is set to not display. If this is not done, then 2 icons will be displayed.

This is what the screen will look like:

Here is what the calendar looks like when it is open.  Notice that the dates after yesterday are greyed-out and are not selectable.  This is the maxDate at work.

 

In this case, maxDate was specified as -1.  That means today’s date minus 1 day or yesterday.  You can specify a date that is relative to today by using d for days, w for weeks, m for months, y for years or just specify a date as a string or as javascript.  If you are using a relative date, you can string them together.  -1d -1m is a month from yesterday.  Positive and negative numbers are allowed.

December 8th, 2010

Posted In: javascript, JQuery

Leave a Comment

$('.detail').click( function() {
       $dialog.dialog({title:$(this).attr('title')});
       $dialog.html('<div class="loading-center" />');
       $dialog.dialog('open');    
       $.get( $(this).attr('href'), function(data) {
           $dialog.html(data);
       });
       return false;
   });
<a class="detail" title="Smith, Tara (BHE)" href="/intranet-templating/employeedir/employeedetails.do?userId=221014">Smith, Tara (BHE)</a>

class=”detail” is how the links are selected

November 29th, 2010

Posted In: JQuery

Tags: , , , ,

Leave a Comment

« Previous Page
WP to LinkedIn Auto Publish Powered By : XYZScripts.com