Best method for captcha validation?

So I have this javascript:

// window.validatorClass =
window.validator = [];

function validatorForm(options) {
  this.fields = [];
  this.validationSoftFail = false;
  this.validationHardFail = false;
  this.options = $.extend({
      // These are the defaults.
      soft: true,
      activeForm: false,
      showSuccess: true,
      submitTo: "",
      requiredMessage: "This is a required field.",
      parent: "form-group",
      helper: "form-control-feedback",
      validationStates: {
        valid: {
          parent: "has-success",
          input: "form-control-success"
        },
        warning: {
          icon: "has-warning",
          color: "form-control-warning"
        },
        invalid: {
          icon:"has-danger",
          color:"form-control-danger"
        }
      },
      formats: {
        alpha: {
          regex: /^[a-zA-Z0-9]+/,
          message: "This field only accepts alphabetic characters. (a-z)"
        },
        alphanumeric: {
          regex: /^[a-zA-Z0-9]+/,
          message: "This field does not accept any special characters. (a-z, 0-9)"
        },
        creditcard: {
          regex: /^d{16}/,
          message: "Please enter a valid credit card number."
        },
        date: {
          regex: /([0-9]{4}.[0-9]{1,2}.[0-9]{1,2})|([0-9]{1,2}.[0-9]{1,2}.[0-9]{4})/,
          message: "Please enter a valid date. (YYYY-MM-DD)",
        },
        decimal: {
          regex: /^\d+$/,
          message: "Please enter a decimal value (xxx.xx)"
        },
        email: {
          regex: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/,
          message: "Please enter a valid email address. (email@domain.com)"
        },
        numeric: {
          regex: /^\d+$/,
          message: "This field only accepts numbers. (0-9)"
        },
        phone: {
          regex: /^([0-9]{3}[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4})/,
          message: "Please enter a 10 digit phone number. (xxx-xxx-xxxx)"
        },
        time: {
          regex: /[0-9]{1,2}(\:[0-9]{0,2})?/,
          message: "Please enter a valid time (xx:xx)"
        },
        url: {
          regex: /^\d+$/,
          message: "Please enter a valid url. (www.website.com/example)"
        }
      }
  }, options);

  this.validate = function() {
    for (index in this.fields) {
      var field = this.fields[index].validate(this.options);
    }
  }
}

function validatorField($element) {
  this.element = $element;
  this.formGroup = this.element.closest(".form-group");
  this.formFeedback = this.formGroup.find(".form-control-feedback");
  this.id = this.element.attr("id");
  this.data = this.element.data("validator").split("|");
  this.validationSoftFail = false;
  this.validationHardFail = false;
  this.fieldType = "*"
  this.required = false;
  this.format = false;
  this.minLength = false;
  this.matchValue = false;
  this.matchField = false;

  // Determine type of input field
  if (this.element.is(":text")) {
    this.fieldType = "text"
  }
  else if (this.element.is(":checkbox")) {
    this.fieldType = "checkbox"
  }
  else if (this.element.is(":radio")) {
    this.fieldType = "radio"
  }
  else {
    console.warn("validator - Unknown element");
  }
  // Object Methods
  this.init = function() {
    // Process Options
    for (option in this.data) {
      var input_option = this.data[option];
      if (input_option == "required") {
        this.required = true;
      }
      else if (input_option.substring(0,7) == "format:") {
        this.format = input_option.substring(7,input_option.length)
      }
      else if (input_option.substring(0,4) == "min:") {
        this.minLength = input_option.substring(4,input_option.length)
      }
      else if (input_option.substring(0,7) == "equals:") {
        this.matchValue = input_option.substring(7,input_option.length)
      }
      else if (input_option.substring(0,6) == "match:") {
        this.matchField = input_option.substring(6,input_option.length)
      }
    }
    return true;
  }

  this.init();

  this.validatePrep = function() {
    this.formFeedback.text("");
    if (this.validationSoftFail) {
      this.element.removeClass("form-control-warning");
      this.formGroup.removeClass("has-warning");
      this.validationSoftFail = false;
    }
    if (this.validationHardFail) {
      this.element.removeClass("form-control-danger");
      this.formGroup.removeClass("has-danger");
      this.validationHardFail = false;
    }
  }
  this.validateComplete = function(options) {
    if (this.validationHardFail) {
      this.element.addClass("form-control-danger");
      this.formGroup.addClass("has-danger");
      this.formFeedback.text(this.validationMessage);
    }
    else {
      if (this.validationSoftFail) {
        this.element.addClass("form-control-warning");
        this.formGroup.addClass("has-warning");
        this.formFeedback.text(this.validationMessage);
      }
      else {
        if (options.showSuccess) {
          this.element.addClass("form-control-success");
          this.formGroup.addClass("has-success");
        }
      }
    }
  }
  this.validateRequired = function(options) {
    if (this.fieldType == "text"){
      if (this.element.val().length == 0) {
        this.validationSoftFail = true;
        this.validationMessage = options.requiredMessage;
        return false;
      }
    }
    if (this.fieldType == "checkbox") {
      if (!this.element.is(":checked")) {
        this.validationSoftFail = true;
        this.validationMessage = options.requiredMessage;
        return false;
      }
    }
    return true;
  }

  this.validateFormat = function(options) {
    if (this.format == "date") {
      if (!this.element.val().match(options.formats.date.regex)) {
        this.validationHardFail = true;
        this.validationMessage = options.formats.date.message;
      }
    }
    if (this.format == "phone") {
      if (!this.element.val().match(options.formats.phone.regex)) {
        this.validationHardFail = true;
        this.validationMessage = options.formats.phone.message;
      }
    }
    if (this.format == "email") {
      if (!this.element.val().match(options.formats.email.regex)) {
        this.validationHardFail = true;
        this.validationMessage = options.formats.email.message;
      }
    }
  }

  this.validateMinLength = function(options) {
    if (this.element.val().length != this.minLength) {
      this.validationSoftFail = true;
    }
  }

  this.validate = function(options){
    this.validatePrep(options);
    if (this.required){
      if (!this.validateRequired(options)) {
        return this.validateComplete(options); // If required but no value, skip validations
      }
    }
    else {
      // Check for empty and exit?
    }
    if (this.format){
      this.validateFormat(options);
    }
    if (this.minLength){
      this.validateMinLength(options);
    }
    return this.validateComplete(options);
  }

}


(function ( $ ) {
    $.fn.validator = function() {
      action = "init";
      options = {};
      if (arguments.length == 1) {
        if (typeof(arguments[0]) == "string") {
          action =  arguments[0];
        }
        else {
          options =  arguments[0];
        }
      }
      else if (arguments.length == 2) {
        action = arguments[0];
        options = arguments[1];
      }

      var $form_this = $(this);
      var form_index = $form_this.data("validator-index");

      if (action == "init") {
        var vin = new validatorForm(options);
        vin.fields = $form_this.find(":input").map(function() {
          var $input_this = $(this);
            if ($input_this.attr('data-validator')) {
              var field = new validatorField($input_this);
              return field;
            }
          }).toArray();
        if (form_index) {
          window.validator[form_index];
        }
        else {
          window.validator.push(vin);
          form_index = (window.validator.length-1); // Minus 1 because array is 0 based
          $form_this.data("validator-index", form_index)
        }
        console.log("validator - Form Initialized", vin);
      }
      if (action == "validate") {
        var vin = window.validator[form_index];
        var validation = vin.validate();
      }
    };

}( jQuery ));

It currently validates a number of items but not Google Recaptcha. What would be the best method to add validation for recapthca’s widget?

<div name="active_recaptcha" class="g-recaptcha form-control" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S" data-validator="required" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.