Custom Input Types and Attributes

Here we make a custom time input with custom minlength and data-equals  attributes. New wave form development. jQuery Tools Validator makes it easy. 

<form id="myform" class="cols">
 
 <h3>HTML5 form with custom inputs</h3>

 <fieldset>
  <label> email * <input type="email" required="required" minlength="9" /> </label> 
  <label> username * <input type="text" name="username" minlength="5" /> </label> 
  <label> Password <input type="password" name="password" minlength="4" /> </label> 
  <label> Password check <input type="password" name="check" data-equals="password" /> </label>
 </fieldset> 
 
 <fieldset>
  <label> website * <input type="url" required="required" /> </label> 
  <label> name * <input type="text" name="name" required="required" maxlength="30" /> </label>  
  <label> age <input type="number" name="age" size="4" maxlength="3" /> </label> 
  <label> time <input type="time" name="time" maxlength="8" /> </label>
 </fieldset>

 <div class="clear"></div>
 
 <button type="submit">Submit form</button>
 
</form>

time input type

// Regular Expression to test whether the value is valid
$.tools.validator.fn("[type=time]", "Please supply a valid time", function(input, value) { 
 return /^\d\d:\d\d$/.test(value);
});

data-equals attribute

$.tools.validator.fn("[data-equals]", "Value not equal with the $1 field", function(input) {
 var name = input.attr("data-equals"),
  field = this.getInputs().filter("[name=" + name + "]"); 
 return input.val() == field.val() ? true : [name]; 
});

minlength attribute

$.tools.validator.fn("[minlength]", function(input, value) {
 var min = input.attr("minlength");
 
 return value.length >= min ? true : {     
  en: "Please provide at least " +min+ " character" + (min > 1 ? "s" : ""),
  fi: "Kentän minimipituus on " +min+ " merkkiä" 
 };
});

View Example