Android - text inputs not validating with custom validation plugin

Question

I'm working on this plugin and I got a bug report saying that there were some problems with Android 2.3.

I downloaded the Android SDK, and tried the plugin in 2.3 and what seems to happen is that text inputs don't validate and the error doesn't show or gets buggy. Other inputs validate fine. I tried in Android 4.0+ and seems to be working fine. I don't know where to start, since I don't know where the problem is coming from and I don't have an actual Android phone to debug these things, and the emulator lacks development tools and stuff.

I doubt posting a code dump here would help but this is the validate() method which can be found in js/idealforms.js. The "bug" must be coming from either here or somewhere else in that file, unless is CSS related, which I don't think so.

/** Validates an input
 * @memberOf Actions
 * @param {object} input Object that contains the jQuery input object [input.input]
 * and the user options of that input [input.userOptions]
 * @param {string} value The value of the given input
 * @returns {object} Returns [isValid] plus [error] if it fails
 */
validate: function (input, value) {

  var isValid = true,
      error = '',
      $input = input.input,
      userOptions = input.userOptions,
      userFilters = userOptions.filters

  if (userFilters) {

    // Required
    if (!value && /required/.test(userFilters)) {
      error = (
        userOptions.errors && userOptions.errors.required
          ? userOptions.errors.required
          : 'This field is required.'
      )
      isValid = false
    }

    // All other filters
    if (value) {
      userFilters = userFilters.split(/\s/)
      for (var i = 0, len = userFilters.length; i < len; i++) {
        var uf = userFilters[i],
            theFilter = typeof Filters[uf] === 'undefined' ? '' : Filters[uf],
            isFunction = typeof theFilter.regex === 'function',
            isRegex = theFilter.regex instanceof RegExp
        if (
          theFilter && (
            isFunction && !theFilter.regex(input, value) ||
            isRegex && !theFilter.regex.test(value)
          )
        ) {
          isValid = false
          error = (
            userOptions.errors && userOptions.errors[uf] ||
            theFilter.error
          )
          break
        }
      }
    }

  }

  return {
    isValid: isValid,
    error: error
  }
}

Can anybody please help me? I want to make this plugin work in as many platforms as possible, but it's hard to do it without having an actual Android phone.

Answer 1

Is that the current code?

I can't point to anything specific which would cause your problem but sometimes these types of errors are caused by quirks in the specific browser version so there a few things I would check:

(1) I know semi-colons are supposedly "optional" in Javascript but I have seen wacky behaviour is some browsers (particularly mobile ones - this is learned from experience) if you don't include them. I would add them after every statement.

(2) I see you refer to a Filters variable here:

        theFilter = typeof Filters[uf] === 'undefined' ? '' : Filters[uf],

Did you mean userFilters...or is Filters a global variable not shown here?

(3) This variable declaration:

$input = input.input,

Are you really meaning to call the variable $input? It isn't used anywhere.

(4) When you use && and || together I would explicitly indicate the groupings via parenthesis:

if (
      theFilter && (
        isFunction && !theFilter.regex(input, value) ||
        isRegex && !theFilter.regex.test(value)
      )
    )

  error = (
    userOptions.errors && userOptions.errors[uf] ||
    theFilter.error
  )

Hope this helps.