dialog_user.js

var user_dialog = Dialog.define({
  input: {
    edit:        'boolean telling us whether we are editing or adding (default)',
    model:       'hash containing the current state of the user being edited',
    collection:  'array of all the *other* users, for uniqueness checking',
    ok_location: 'bottom (default) or top of the dialog box'
  },
  output: {
    ok:    'boolean as to whether the user okayed their changes or not',
    model: 'hash containing the updated state of the user being edited'
  },
  markup: [{
    div: {id: 'user_dialog', ui: {
      table: [
        {tr: [
          {td: {_class:'field_name', value:'Name'}},
          {td: [
            {input: {type:'text', id:'name', size:40, 
              value_eval: "input['model']['name']",
              validation: 'cannot_be_blank'}},
            {span: {id: 'err_msg_for_name', _class:'err_msg'}}
          ]}
        ]},
        {tr: [
          {td: {_class:'field_name', value:'Password'}},
          {td: [
            {input: {type:'password', id:'password', size:40,
                     validation: 'password_minimum_length'}},
            {span: {id: 'err_msg_for_password', _class:'err_msg'}}
          ]}
        ]},
        {tr: [
          {td: {_class:'field_name', value:'Confirm Password'}},
          {td: [
            {input: {type:'password', id:'confirm_password', size:40,
                     validation: 'confirmation_must_match'}},
            {span: {id: 'err_msg_for_confirm_password', _class:'err_msg'}}
          ]}
        ]}
      ]
      }}
    }],
  // These validations could be refactored for use across many dialogs.
  cannot_be_blank: function(field_id) {
      var field_len = $(field_id).length;
      if( field_len < 1 ) {
        $('err_msg_for_'+field_id).update( 'Name cannot be blank' )
      }
    },
  password_minimum_length: function(field_id) {
      var field_len = $(field_id).length;
      if( field_len < 3 ) {
        $('err_msg_for_'+field_id).update( 'Password must be at least 3 characters' )
      }
    },
  confirmation_must_match: function(field_id) {
      var my_value = $(field_id).value;
      var other_field_id = $(field_id).gsub(/confirm_/,'');
      var other_value = $(other_field_id).value;
      if( my_value != other_value ) {
        $('err_msg_for_'+field_id).update( 'Must match password' )
      }
    }
  });
// Implementation of the Dialog class is an exercise for the reader...