Open BrianPMucha opened 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.
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!');
}
},
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.