Download the code.

Example

<input type="password" id="password"/>

$('#password').showPassword('Show Characters as I Type');

Use

$('[type=password]').showPassword(string) creates a checkbox as above with string as the label. If the checkbox is checked then the password field is unmasked. $('type=password').showPassword(true) unmasks the field directly, and $('type=password').showPassword(false) restores masking.

The logical thing to do is to have a checkbox that would show the characters, and the easiest way to do that is to change the type of the input element from password to text.

For most browsers, this is nontrivial but doable. You have to detach the element first in order to change its type. But in Internet Explorer, there's no way to change it. One solution is to create a new input element with type text and copy all the other attributes into it, but that seems like overkill. All we need is a way for the user to see what he is typing, so a tooltip-like overlay would work.

This is what I came up with (note that it requires jQuery UI position:

<input type="password" id="password"/>
<label><input type="checkbox" id="check"/> Show characters as I type</label>

try{
  $('<input type="password">').detach().attr('type', 'text');
  $.fn.showPassword = function(shouldShow){
    var type =  shouldShow ? 'text' : 'password';
    return this.each(function(){
      /* from http://stackoverflow.com/questions/540851/jquery-change-element-type-from-hidden-to-input */
      marker = $('<span />').insertBefore(this);
      $(this).detach().attr('type', type).insertAfter(marker);
      marker.remove(); 
    });
  };
}catch(e){
  $.fn.showPassword = function(shouldShow){
    return this.each(function(){
      if (shouldShow){
        var span = $(this).siblings('.showPassword');
        if (span.length > 0){
          span.show();
        }else{
          span = $('<span>').addClass('showPassword').css({
            opacity: 0.9,
            background: 'white',
            position: 'absolute',
            fontFamily: 'sans-serif',
            paddingLeft: '2px'
          }).position({
            at: 'left bottom',
            of: this,
            my: 'left top'
          }).text(this.value).insertBefore(this);
          $(this).keyup(function(){ span.text(this.value); });
        }
      }else{
        $(this).siblings('.showPassword').hide();
      }
    });
  };
}
$('#check').change(function(){
  $('#password').showPassword($(this).is(':checked'));
});

Try this in Internet Explorer as well as a standards browser. The details are different, but the functionality is the same.

tl;dr

Download the code. Use $.validateHTML5(callback), where callback (result, data) is a function that is called with the result, a string that can be "valid" if the page validated, "invalid" if it did not, "warning" if it validated but is "in some way questionable", or "not validated" if some error occurred. data is the actual JSON output from the validator.

Discussion

Lots of sites have links like <a href="http://validator.w3.org/check/referer">Valid HTML</a>, which claims that the site is valid and allows you to click the link and check it, but it would be nice to have some way of actually validating the page that is being shown. Nice for me as the author, at least. I'm not sure anyone else cares.

Luckily, I've been doing everything recently in HTML5, and Validator.nu has a web service API with JSON output that we can use programmatically. We don't want to do this on the server side, since that takes time that our users don't need to waste. Also (I did this when playing around with it) you can end up in an infinite loop, where my server GETs the validator output, which GETs the page from the server, which GETs the validator output, which GETs the page from the server, ad infinitum.

So we want to send the page without validating it and then use AJAX to validate it. Fortunately, the validator allows JSONP, so we don't have to worry about same-origin security. Unfortunately, the documentation wiki is wrong about exactly what is returned, so it took some experimentation to get it to work.

See the example.

The W3C validator has a validator and does have a web service, but the only documented output format is SOAP. output=json works to produce JSON, but I can't find a way to get JSONP.

Download the code.

I've had some questions about extending flexcal so I created one that combines filtering, output formatting and drop-down menus.

The filtering will only allow dates going back 17 years, and the calendar will start on that date. The formatting will use European dates (d/m/y). The drop-down menus will be the ones from the original post, but instead of using aspect-oriented programming (flexcal('after', '_adjustHTML', function (cal){...) we will subclass the original widget.

Utility routines to create drop down menus (<select> elements):

function option(d, l10n, cal, isMonth, selected){
  return [
    '<option',
    selected ? ' selected="selected"' : '',
    ' value="', d.toString(), '">',
    isMonth ? l10n.monthNames[cal.m] : l10n.years(cal.y), 
    '</option>'
  ].join('');
}
window.monthSelect = function(currentdate, l10n){
  var f = l10n.calendar;
  var currentcal = f(currentdate), ret = [option(currentdate, l10n, currentcal , true, true)], d = currentdate;
  for (var cal = currentcal; d = cal.prev, cal = f(d), cal.y == currentcal.y; ){
    ret.unshift(option(d, l10n, cal, true, false));
  }
  for (cal = currentcal; d = cal.next, cal = f(d), cal.y == currentcal.y; ){
    ret.push(option(d, l10n, cal, true, false));
  }
  return $('<select>').html(ret.join(''));
};
window.yearSelect = function(currentdate, l10n, n){
  var f = l10n.calendar;
  var currentcal = f(currentdate), ret = [option(currentdate, l10n, currentcal , false, true)], d = currentdate;
  for (var i = 0, cal = currentcal; d = cal.prevYear, cal = f(d), i < n; ++i){
    ret.unshift(option(d, l10n, cal, false, false));
  }
  for (var i = 0, cal = currentcal; d = cal.nextYear, cal = f(d), i < n; ++i){
    ret.push(option(d, l10n, cal, false, false));
  }
  return $('<select>').html(ret.join(''));
};

<input id="fancyflexcalexample"/>

Create the actual calendar:

var startdate = new Date;
startdate.setFullYear(startdate.getFullYear()-17);
$.ui.flexcal.subclass('ui.fancyflexcal', {
  format: function(d){
    // use the utility function from jquery UI
    return $.datepicker.formatDate (this.options.dateFormat,d);
  },
  _adjustHTML: function(cal){
    this._super(cal);
    cal.find('.ui-datepicker-month').html(monthSelect(this.options.current, this.o.l10n));
    cal.find('.ui-datepicker-year').html(yearSelect(this.options.current, this.o.l10n, 5));
    var self = this;
    cal.find('select').bind('change', function(){
      self._setDate(new Date($(this).val()))
    }); 
  },
  options: {
    'class': 'multicalendar', // we'll need the extra room even with only one calendar
    dateFormat: 'dd/mm/yy'
  }
}); 
$('#fancyflexcalexample').fancyflexcal({
    position: 'bl',
    calendars: ['en','he-jewish'],
    filter: function(d) {return d >= startdate}, // filter is an option; set it in the instance
    current: startdate
});

Some Subtlety

This works as long as we're only setting the date using the calendar: the output format is what we expect. But we may want to allow the user to type a date into the input box and have it reflected in the calendar. We can watch the input box:

<input id="fancyflexcalexample2"/>

$('#fancyflexcalexample2').fancyflexcal({
    position: 'bl',
    'class': 'multicalendar',
    calendars: ['en','he-jewish'],
    filter: function(d) {return d >= startdate}, // filter is an option; set it in the instance
    current: startdate
}).keyup(function(){
  $(this).fancyflexcal('option','current',this.value);
});

But this doesn't work right: the input to the calendar simply uses new Date(this.element.val()) internally and according to the standard (section 15.9.1.15), the Date element accepts ISO format for dates (yy-mm-dd) and

If the String does not conform to that format the function may fall back to any implementation-specific heuristics or implementation-specific date formats.

To make this work, we need to override the internal methods for date strings. _createDate(d,oldd) returns a Date object from d; if it is not a valid date, returns oldd (if oldd is falsey then returns new Date). _date2string(d) returns the string representation of the Date d for use internally, as opposed to format(d) which returns the string representation of the Date d for output. The only requirement is that _createDate(_date2string(d))==d; _createDate has to understand the string that _date2string returns.

We can use datepicker's utility routines as well:

<input id="fancierflexcalexample"/>

$.ui.fancyflexcal.subclass('ui.fancierflexcal', {
  _createDate: function(d, oldd){
    // $.datepicker.parseDate either throws an error or returns null for invalid arguments
    try{
      return $.datepicker.parseDate (this.options.dateFormat, d) || this._super(d,oldd);
    }catch(e){
      return this._super(d,oldd);
    }
  },
  _date2string: function(d){
    return $.datepicker.formatDate (this.options.dateFormat, d);
  }
});
$('#fancierflexcalexample').fancierflexcal({
    position: 'bl',
    'class': 'multicalendar',
    calendars: ['en','he-jewish'],
    filter: function(d) {return d >= startdate}, // filter is an option; set it in the instance
    current: startdate
}).keyup(function(){
  $(this).fancierflexcal('option','current',this.value);
});

My flexcal plugin exposes a few useful methods, which I have not documented elsewhere. They are called, like all jQuery UI widget methods, by creating the widget: cal = $('input.date').flexcal() then invoking the method: cal.flexcal('setDate', '10/25/2011').

Getters

Setters

Plus, setting the options with option changes the calendar on the fly (except for url, which is evaluated only at creation; if you need to reset the HTML of the calendar, destroy it and instantiate a new one). Thus, $('input.date').flexcal('option', 'current', '1/1/2011') sets the highlighted date (displaying the appropriate month).

An inline flexcal

A quick inline datepicker, subclassed from flexcal, for use with the examples. It requires that the associated <div> be absolutely sized in height, which is not ideal.

$.ui.flexcal.subclass('ui.inlineflexcal', {
  _init: function(){
    this.options.box = this.options.box || this.element;
    this.show();
  },
  options: {
    position: {at: 'bottom', my: 'bottom'},
    speed: 0,
    hideOnOutsideClick: false
  }, 
  commit: function(d){
    this.element.val(this.format(d));
    this._setDate(d);
    this._trigger('commit', 0, d);
  }
});

<div><input id="example1"/><br/></div>

$('#example1').inlineflexcal({box: $('#example1').parent()});

Examples

filter, current

<span>Start Date:</span>
<div id="date1" style="display: inline-block"></div>
<span>End Date:</span>
<div id="date2" style="display: inline-block"></div>

$('#date1').inlineflexcal({
	commit: function(event, data){
		var startdate = data;
		var enddate = $('#date2').inlineflexcal('option', 'current');
		$('#date2').inlineflexcal('option', 'current', Math.max(startdate, enddate));
	}
});
$('#date2').inlineflexcal({
	filter: function (d){
		return d >= $('#date1').inlineflexcal('option','current');
	}
});

box, position

<span>Drag the calendar!</span> <input type="button" id="button2" value="Restore Position"/>
<div id="example2"></div>

$('#example2').inlineflexcal({reposition: false});
$('#example2').inlineflexcal('box').draggable().css('border', '10px inset purple');
$('#button2').click(function(){
  $('#example2').inlineflexcal('position'); // restore the correct position
});

Show/Hide

<label><input type="radio" name="radio3"/> Hide</label>
<label><input type="radio" name="radio3" checked="checked"/> Show</label>
<div id="example3"></div>

$('#example3').inlineflexcal();
$('[name=radio3]').first().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('hide');
});
$('[name=radio3]').last().change(function() {
  if ($(this).is(':checked')) $('#example3').inlineflexcal('show');
});

l10n

<label><input type="radio" name="radio4" checked="checked"/> Decimal</label>
<label><input type="radio" name="radio4"/> Hex</label>
<div id="example4"></div>

$('#example4').inlineflexcal();
$('[name=radio4]').first().change(function() {
  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', 'en');
});
$('[name=radio4]').last().change(function() {
  if ($(this).is(':checked')) $('#example4').inlineflexcal('option', 'l10n', {
	dayNamesMin: ['s','m','t','w', 't', 'f','s'],
	dates: function(n){
		return n.toString(16);
	},
	years: function(n){
		return n.toString(16);
	}
  });
});

tab, hidetabs

<label><input type="checkbox" name="check5"/> Hide Tabs</label><br/>
<label><input type="radio" name="radio5" checked="checked"/> English</label>
<label><input type="radio" name="radio5"/> Jewish</label>
<label><input type="radio" name="radio5"/> &#1506;&#1489;&#1512;&#1497;&#1514;</label>
<div id="example5"></div>

$('#example5').inlineflexcal({
  calendars: ['en', 'jewish', 'he-jewish'],
  'class': 'multicalendar',
  'set': function() {
    $('[name=radio5]').eq($('#example5').inlineflexcal('option', 'tab')).prop("checked",true);
  }
});
$('[name=check5]').change(function(){
	$('#example5').inlineflexcal('option', 'hidetabs', $(this).prop('checked'));
});
$('[name=radio5]').change(function() {
  $('#example5').inlineflexcal('option', 'tab', $('[name=radio5]').index(this));
});