Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweak to support NUMBER inputs on Mobile. #19

Open
BrianPMucha opened this issue Apr 29, 2014 · 2 comments
Open

Tweak to support NUMBER inputs on Mobile. #19

BrianPMucha opened this issue Apr 29, 2014 · 2 comments

Comments

@BrianPMucha
Copy link

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
Copy link
Author

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
Copy link
Author

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!');
  }
},

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant