PAID MEMBERS

CSS AND STYLING

SCRIPTS AND HACKS

ghl-experts-logo-light
  • PAID MEMBERS

    CSS AND STYLING

    SCRIPTS AND HACKS

  • Regex Form Validator

    This script helps you validate your form data before submission as shown.

    To understand how this script works, check the following video tutorial:

    To get started, follow these steps:

    1. Add the following CSS in your form CSS section, notice this css contains two classes ‘no-validation’ and ‘yes-validation’ you can add your custom styles for the form button when validation is true for all elements or is not:

    .success {background-color: #d4edda;border-color: #c3e6cb;}.bad {background-color: #f8d7da;border-color: #f5c6cb;} .no-validation {cursor: not-allowed;} .yes-validation { cursor:pointer; }
    • 2. After you have added the custom CSS to your form, copy the following script to a custom script element on your form.
    • 3. Make sure you change the values of object keys in the validationConfig array as
      • 1. name: Provide query_key value of the input. If you do not want to validate a certain field just don’t add it to this array.
      • 2. action: Two events are supported and should be passed to this key i.e. “blur” and “keyup”.
      • 3. err_msg: You must provide an error message if a regex test fails.
      • 4.regex: You must provide a valid regex here. an example could be /^([0-9]{1,2})(.|-|\/)([0-9]{1,2})(.|-|\/)([0-9]{4})$/ notice this regex must be enclosed in slashes “/”. This particular regex validates a valid date in mm.dd.yyyy, mm-dd-yyyy or mm/dd/yyyy. Regex cannot be enclosed in quotes.
    • 4. You can add as many objects as you wish in this array.

    Copy the following script to the custom HTML block on your form

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script>
      var surveyButtonBehavior = "disable"; // can be set to "hide" as well
    
      var validationConfig = [
        {
          name: "2fa",
          action: "keyup",
          err_msg: "Veuillez rentrer le code reçu SVP",
          regex: /\b1991\b/,
        },
      ];
    
      /**Execute main script **/
      //Global vars
      var showNextButton = false;
      var validStatus = [];
      function validate(element, pattern, error_msg) {
        var parent = element.parent();
        var error = parent.find(".error-message").first();
    
        if (pattern.test(element.val())) {
          element.removeClass("bad");
          element.addClass("success");
          error.html("");
          return true;
        } else {
          element.removeClass("success");
          element.addClass("bad");
          error.html(error_msg);
          return false;
        }
      }
    
      //function to toggle next/submit button based on input values
      function showNext() {
        var vcount = validationConfig.length;
        var acount = 0;
        validationConfig.forEach(function (entry) {
          var name = fixName(entry.name);
          if (validStatus[name] === true) acount++;
        });
        if (acount == vcount) showNextButton = true;
        else showNextButton = false;
        if (showNextButton) {
          $(".btn-dark").show();
          if (surveyButtonBehavior == "disable")
            $(".ghl-button, .ghl-next-button, .ghl-mobile-next").attr(
              "disabled",
              false
            );
    
          if (surveyButtonBehavior == "hide")
            $(".ghl-button, .ghl-next-button, .ghl-mobile-next").show();
    
          //$(".btn-dark").removeClass('no-validation');
          //$(".btn-dark").addClass('yes-validation');
          //$(".btn-dark").removeAttr('disabled');
          //$(".btn-dark").css("filter","brightness(100%)");
        } else {
          $(".btn-dark").hide();
          if (surveyButtonBehavior == "disable")
            $(".ghl-button, .ghl-next-button, .ghl-mobile-next").attr(
              "disabled",
              true
            );
    
          if (surveyButtonBehavior == "hide")
            $(".ghl-button, .ghl-next-button, .ghl-mobile-next").hide();
    
          //$(".btn-dark").addClass('no-validation');
          //$(".btn-dark").removeClass('yes-validation');
          //$(".btn-dark").attr('disabled','true');
          //$(".btn-dark").css("filter","brightness(50%)");
        }
      }
    
      function fixName(query_key) {
        value = query_key;
        if (__NUXT__.data.surveyData !== undefined) {
          __NUXT__.data.surveyData.formData.slides.forEach(function (slide) {
            slide.slideData.forEach(function (sdata) {
              if (
                sdata.fieldKey !== undefined &&
                sdata.fieldKey === "contact." + query_key
              )
                value = sdata.id;
    
              if (
                sdata.hiddenFieldQueryKey !== undefined &&
                sdata.hiddenFieldQueryKey === query_key
              )
                value = sdata.id;
            });
          });
        } else {
          var nuxtFields = __NUXT__.data.formPayload.form.fields;
          nuxtFields.forEach(function (field) {
            if (
              field.fieldKey !== undefined &&
              field.fieldKey == "contact." + query_key
            )
              value = field.id;
          });
        }
        return value;
      }
    
      //document load event
      $(document).ready(function () {
        //ensure button is hidden
        showNext();
        //loop through config array of objects.
        validationConfig.forEach(function (entry) {
          var element_name = fixName(entry.name);
          var element = $('input[name="' + element_name + '"]');
          var parent = element.parent();
          parent.append("<div class='error-message'></div>");
          //if config for element requires blur action run this code
          if (entry.action == "blur") {
            element.blur(function () {
              //validate and store validation status to an array
              validStatus[element_name] = validate(
                element,
                entry.regex,
                entry.err_msg
              );
              //update next button status based on currently validated inputs
              showNext();
            });
          }
          //if config for element requires keyup action run this code
          if (entry.action == "keyup") {
            element.keyup(function () {
              //validate and store validation status to an array
              validStatus[element_name] = validate(
                element,
                entry.regex,
                entry.err_msg
              );
              //update next button status based on currently validated inputs
              showNext();
            });
          }
        });
      });
    </script>
    

    Few common regex are as follows

    Digits

    Whole Numbers

    /^\d+$/

    Decimal Numbers

    /^\d*.\d+$/

    Whole & Decimal Numbers

    /^\d*(.\d+)?$/

    Negative, Positive Whole + Decimal Numbers

    /^-?\d*(.\d+)?$/

    Whole + Decimal + Fractions

    /[-]?[0-9]+[,.]?[0-9]<em>([\/][0-9]+[,.]?[0-9]</em>)*/

    Alphanumeric Characters

    Alphanumeric without space

    /^[a-zA-Z0-9]*$/

    Alphanumeric with space

    /^[a-zA-Z0-9 ]*$/

    Password Strength

    Complex: Should have 1 lowercase letter, 1 uppercase letter, 1 number, 1 special character and be at least 8 characters long

    /(?=(.<em>[0-9]))(?=.</em>[!@#$%^&<em>()\[]{}-_+=~`|:;"'<>,./?])(?=.</em>[a-z])(?=(.<em>[A-Z]))(?=(.</em>)).{8,}/

    Moderate: Should have 1 lowercase letter, 1 uppercase letter, 1 number, and be at least 8 characters long

    /(?=(.<em>[0-9]))((?=.</em>[A-Za-z0-9])(?=.<em>[A-Z])(?=.</em>[a-z]))^.{8,}$/

    Username

    Alphanumeric string that may include _ and – having a length of 3 to 16 characters –

    /^[a-z0-9_-]{3,16}$/

    URL

    Include http(s) Protocol

    /https?:\/\/(www.)?[-a-zA-Z0-9@:%.<em>+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%</em>+.~#()?&//=]*)/

    Protocol Optional

    /(https?:\/\/)?(www.)?[-a-zA-Z0-9@:%.<em>+~#=]{2,256}.[a-z]{2,6}\b([-a-zA-Z0-9@:%</em>+.~#?&//=]*)/

    Dates

    Date Format YYYY-MM-dd using separator -<br>Date Format dd-MM-YYYY using separators - or . or / Date Format dd-mmm-YYYY using separators - or . or /
    /* Date Format YYYY-MM-dd */<br>/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))/
    /* Date Format dd-MM-YYYY or<br>dd.MM.YYYY or<br>dd/MM/YYYY<br>with check for leap year */<br>/^(?:(?:31(\/|-|.)(?:0?[13578]|1[02]))|(?:(?:29|30)(\/|-|.)(?:0?[1,3-9]|1[0-2])))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|.)0?2(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))(?:(?:1[6-9]|[2-9]\d)?\d{2})$/
    /* Date Format dd-mmm-YYYY or<br>dd/mmm/YYYY or<br>dd.mmm.YYYY */<br>/^(?:(?:31(\/|-|.)(?:0?[13578]|1[02]|(?:Jan|Mar|May|Jul|Aug|Oct|Dec)))|(?:(?:29|30)(\/|-|.)(?:0?[1,3-9]|1[0-2]|(?:Jan|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec))))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|.)(?:0?2|(?:Feb))(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|.)(?:(?:0?[1-9]|(?:Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep))|(?:1[0-2]|(?:Oct|Nov|Dec)))(?:(?:1[6-9]|[2-9]\d)?\d{2})$/

    Time

    Time Format HH:MM 12-hour, optional leading 0

    /^(0?[1-9]|1[0-2]):[0-5][0-9]$/

    Time Format HH:MM 12-hour, optional leading 0, Meridiems (AM/PM)

    /((1[0-2]|0?[1-9]):([0-5][0-9]) ?([AaPp][Mm]))/

    Time Format HH:MM 24-hour with leading 0

    /^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/

    Time Format HH:MM 24-hour, optional leading 0

    /^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/

    Time Format HH:MM:SS 24-hour

    /(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)/

    Phone Numbers

    International Phone Numbers – with optional country code/extension

    /* International Phone Numbers */<br>/^(?:(?:(?(?:00|+)([1-4]\d\d|[1-9]\d?))?)?[-.\ \\/]?)?((?:(?\d{1,})?[-.\ \\/]?){0,})(?:[-.\ \\/]?(?:#|ext.?|extension|x)[-.\ \\/]?(\d+))?$/

    Join our Facebook Group

    Join our Facebook Group to get support, platform insights, ask questions and receive updates.

    Latest Update

    Visit our changelog page to see our most recent update.

    Welcome to GHL Expert Tools

    We are still in the process of finalizing all of our trainings and setup instructions. If you need help in the meantime, please join our Facebook Group.

    Join our Facebook Group

    Join our Facebook Group to get support, platform insights, ask questions and receive updates.

    Latest Update

    Visit our changelog page to see our most recent update.

    ezgif.com-gif-maker

    Affiliate Area

    Join our affiliate program to earn commissions when you refer people to GHL Experts

    FOMO

    Capture leads before they leave the page by creating
    entincing offers that create a fear of missing out.

    Affiliate area

    Join our affiliate program to earn commissions when you refer people to GHL Experts

    © 2020 GHL Experts. All Rights Reserved. Made with Love from Montreal

    This site is not a part of the GoHighLevel website or HighLevel, LLC. Additionally, this site is not endorsed by GoHighLevel in any way. GoHighLevel is a trademark of HighLevel, LLC