alechill / livevalidation

Open source javascript library for slick, powerful, and easy client-side validation.
http://livevalidation.com
Other
151 stars 57 forks source link

Tweak to support NUMBER inputs on Mobile. #19

Open BrianPMucha opened 10 years ago

BrianPMucha commented 10 years ago

At line 229 simply add...

case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'NUMBER'): return LiveValidation.TEXT;

This allows LiveValidation to treat number fields with it's text validation logic. Presence and Numericality work fine.

BrianPMucha commented 10 years ago

To clarify, LV works fine with number inputs on desktop, because desktop browsers ignore the unknown number type and treat them as text.

But on mobile they are sort of a special case of text input. (Number inputs are cool because the browser will give a number pad rather than full keyboard.) The getElementType function throws an error when it encounters a number input, but only on mobile.

BrianPMucha commented 10 years ago

Here's my complete change to support all the html5 mobile input types.

/**
 *  gets the type of element, to check whether it is compatible
 *
 *  @var validationFunction {Function} - validation function to be used (ie Validate.Presence )
 *  @var validationParamsObj {Object} - parameters for doing the validation, if wanted or necessary
 */
getElementType: function(){
  switch(true){
    case (this.element.nodeName.toUpperCase() == 'TEXTAREA'):
    return LiveValidation.TEXTAREA;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'EMAIL'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'DATE'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'DATETIME'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'TIME'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'MONTH'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'NUMBER'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'TEL'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'URL'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'TEXT'):
    return LiveValidation.TEXT;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'PASSWORD'):
    return LiveValidation.PASSWORD;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'CHECKBOX'):
    return LiveValidation.CHECKBOX;
  case (this.element.nodeName.toUpperCase() == 'INPUT' && this.element.type.toUpperCase() == 'FILE'):
    return LiveValidation.FILE;
  case (this.element.nodeName.toUpperCase() == 'SELECT'):
    return LiveValidation.SELECT;
    case (this.element.nodeName.toUpperCase() == 'INPUT'):
        throw new Error('LiveValidation::getElementType - Cannot use LiveValidation on an ' + this.element.type + ' input!');
    default:
        throw new Error('LiveValidation::getElementType - Element must be an input, select, or textarea!');
  }
},