1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Javascript Validation of ReCaptcha

Discussion in 'Web Design & Development' started by EspressoBean, May 15, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. EspressoBean

    EspressoBean Thread Starter

    Joined:
    Feb 29, 2016
    Messages:
    264
    So I have a javascript validation form that works fine but I need to add support for Google's ReCaptcha widget. What would be the best way to do this?

    Code:
    // 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._%+-][email protected][A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/,
              message: "Please enter a valid email address. ([email protected])"
            },
            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 ));
    ReCaptcha Code:

    HTML:
    <div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    You don't need to alter your js validation as the Google ReCaptcha is independent. Just follow this guide for integration;)
    I recommend that you edit your original post and take out the ReCaptcha key line:eek:
     
  3. EspressoBean

    EspressoBean Thread Starter

    Joined:
    Feb 29, 2016
    Messages:
    264
    It may be independent but I still need the validation know if it was entered or not.
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    In my experience, submission is inhibited by the ReCaptcha, until it has been clicked upon, at which point the user can submit for validation ...
     
  5. EspressoBean

    EspressoBean Thread Starter

    Joined:
    Feb 29, 2016
    Messages:
    264
    The other reason is that I want to inform the user that they need to complete the recaptcha as an error message.
     
  6. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    Your js validation will not be entered unless the ReCaptcha is done, so an error message would never be necessary ...
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    Bare in mind that if your js validation is invoked, then the ReCaptcha was done;)
     
    Last edited: May 16, 2018
  8. EspressoBean

    EspressoBean Thread Starter

    Joined:
    Feb 29, 2016
    Messages:
    264
    Yes but I still need to have the javascript flag it if there is an issue with the recaptcha.
     
  9. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    Not possible, I'm afaid. It's not how the ReCaptcha app rolls. As I mentioned, it is entirely independant and does not interact, except to lift the submit inhibit after successful processing.
    You might want to consider writing your own Captcha to interact with your js validation, but this may be beyond your js capabilities (it is mine:()
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,242
    First Name:
    Jim
    As an alternative, consider using html5's input validation, as described here
     
  11. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1210252

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice