Register Check Input

100%
<script>
    RegExp.quote = function(str) {
        return (str + '').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
    };
    $('.validation').hide();
    let $password = $("#field_password");
    let $email = $("#field_email");
    let $disclaimer = $("#disclaimer_box");
    let $register = $('#input_submit');
    let $validator = $('#clickable_button');
    let $popup = $('#check_popup');

    function isPasswordValid() {
        return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
    }

    function checkMinLength() {
        return true;
    }

    function checkMaxLength() {
        return true;
    }

    function checkMinNumber() {
        return true;
    }

    function checkMinUpperCase() {
        return true;
    }

    function checkMinLowerCase() {
        return true;
    }

    function checkMinCustomCharacters() {
        return true;
    }

    function isEmailValid() {
        var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regex.test($email.val());
    }

    function isCheckedAGB() {
        const disclaimer = document.getElementById('disclaimer_box');
        return disclaimer.checked;
    } <
    !--Can submit-- >
    function canSubmit() {
        return isPasswordValid() && isEmailValid() && isCheckedAGB();
    }

    function passwordEvent() {
        if (isPasswordValid()) {
            $password.next().hide();
        } else {
            $password.next().show();
        }
    }

    function emailEvent() {
        if (isEmailValid()) {
            $email.next().hide();
        } else {
            $email.next().show();
        }
    }

    function checkFields() {
        if (validateFields() !== "") {
            $validator.addClass('block');
            $popup.html(validateFields());
        } else {
            $validator.removeClass('block');
        }
    }

    function validateFields() {
        var message = ""
        if (!isEmailValid()) {
            message += "&check; E-Mail ist noch nicht korrekt ausgefüllt<br>";
        }
        if (!isPasswordValid()) {
            message += "&check; Passwort ist noch nicht korrekt ausgefüllt<br>";
        }
        if (!isCheckedAGB()) {
            message += "&check; Die AGBs wurden noch nicht bestätigt<br>";
        }
        return message;
    }

    function htmlDecode(input) {
        let doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.textContent;
    } <
    !--Enable or disable the submit button-- >
    function enableSubmitEvent() {
        $("#input_submit").prop("disabled", !canSubmit());
    } <
    !--Run passwords length check-- >
    $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);
    $email.focus(emailEvent).keyup(emailEvent).keyup(enableSubmitEvent);
    $disclaimer.click(enableSubmitEvent);
    $validator.hover(function() {
        if (!canSubmit()) {
            $popup.addClass('show');
        }
    }, function() {
        $popup.removeClass('show');
    });
    $(document).ready(function() {
        checkFields();
    });
    $(document).change(function() {
        checkFields();
    });
    $validator.click(checkFields); <
    !--Run submit button
    function code-- >
    enableSubmitEvent();
</script>
<script>

    RegExp.quote = function(str) {
        return (str+'').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
    };

    $('.validation').hide();

    let $password = $("#field_password");
    let $email = $("#field_email");
    let $disclaimer = $("#disclaimer_box");
    let $register =  $('#input_submit');
    let $validator =  $('#clickable_button');
    let $popup = $('#check_popup');

    function isPasswordValid() {
        return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
    }

    function checkMinLength() {
        ${#data.password_rules.min_length}$
        return ($password.val().length >= ${data.password_rules.min_length}$);
        ${/data.password_rules.min_length}$
        ${^data.password_rules.min_length}$
        return true;
        ${/data.password_rules.min_length}$
    }

    function checkMaxLength() {
        ${#data.password_rules.max_length}$
        return ($password.val().length <= ${data.password_rules.max_length}$);
        ${/data.password_rules.max_length}$
        ${^data.password_rules.max_length}$
        return true;
        ${/data.password_rules.max_length}$
    }

    function checkMinNumber() {
        ${#data.password_rules.min_number}$
        let numbers = ($password.val().match(/[0-9]/g)|| []);
        return (numbers.length >= ${data.password_rules.min_number}$);
        ${/data.password_rules.min_number}$
        ${^data.password_rules.min_number}$
        return true;
        ${/data.password_rules.min_number}$
    }

    function checkMinUpperCase() {
        ${#data.password_rules.min_upper_case}$
        let upper = ($password.val().match(/[A-Z]/g) || []);
        return (upper.length >= ${data.password_rules.min_upper_case}$);
        ${/data.password_rules.min_upper_case}$
        ${^data.password_rules.min_upper_case}$
        return true;
        ${/data.password_rules.min_upper_case}$
    }

    function checkMinLowerCase() {
        ${#data.password_rules.min_lower_case}$
        let lower = ($password.val().match(/[a-z]/g) || []);
        return (lower.length >= ${data.password_rules.min_lower_case}$);
        ${/data.password_rules.min_lower_case}$
        ${^data.password_rules.min_lower_case}$
        return true;
        ${/data.password_rules.min_lower_case}$
    }

    function checkMinCustomCharacters() {
        ${#data.password_rules.min_custom_characters}$
        let regex = new RegExp('[' + RegExp.quote(htmlDecode("${data.password_rules.custom_characters}$]")) + ']', 'g');
        let custom = ($password.val().match(regex) || []);
        return (custom.length >= ${data.password_rules.min_custom_characters}$);
        ${/data.password_rules.min_custom_characters}$
        ${^data.password_rules.min_custom_characters}$
        return true;
        ${/data.password_rules.min_custom_characters}$
    }

    function isEmailValid() {
      var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
      return regex.test($email.val());
    }

    function isCheckedAGB() {
        const disclaimer = document.getElementById('disclaimer_box');
        return disclaimer.checked;
    }

    <!--Can submit -->
    function canSubmit() {
        return isPasswordValid() && isEmailValid() && isCheckedAGB();
    }

    function passwordEvent() {
        if (isPasswordValid()) {
            $password.next().hide();
        } else {
            $password.next().show();
        }
    }

    function emailEvent() {
        if (isEmailValid()) {
            $email.next().hide();
        } else {
            $email.next().show();
        }
    }

    function checkFields() {
      if(validateFields() !== ""){
        $validator.addClass('block');
        $popup.html(validateFields());
      } else {
        $validator.removeClass('block');
      }
    }

    function validateFields(){
      var message = ""
      if(!isEmailValid()) {
        message += "&check; E-Mail ist noch nicht korrekt ausgefüllt<br>";
      }
      if (!isPasswordValid()) {
        message += "&check; Passwort ist noch nicht korrekt ausgefüllt<br>";
      }
      if (!isCheckedAGB()) {
        message += "&check; Die AGBs wurden noch nicht bestätigt<br>";
      }
      return message;
    }

    function htmlDecode(input) {
        let doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.textContent;
    }

    <!--Enable or disable the submit button-->
    function enableSubmitEvent() {
        $("#input_submit").prop("disabled", !canSubmit());
    }

    <!--Run passwords length check-->
    $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);

    $email.focus(emailEvent).keyup(emailEvent).keyup(enableSubmitEvent);

    $disclaimer.click(enableSubmitEvent);

    $validator.hover(function(){
      if(!canSubmit()) {
        $popup.addClass('show');
      }
    }, function(){
      $popup.removeClass('show');
    });

    $(document).ready(function() {
      checkFields();
    });

    $(document).change(function() {
      checkFields();
    });

    $validator.click(checkFields);

    <!--Run submit button function code-->
    enableSubmitEvent();
</script>
/* No context defined. */
  • Content:
    <script>
    
        RegExp.quote = function(str) {
            return (str+'').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&");
        };
    
        $('.validation').hide();
    
        let $password = $("#field_password");
        let $email = $("#field_email");
        let $disclaimer = $("#disclaimer_box");
        let $register =  $('#input_submit');
        let $validator =  $('#clickable_button');
        let $popup = $('#check_popup');
    
        function isPasswordValid() {
            return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
        }
    
        function checkMinLength() {
            ${#data.password_rules.min_length}$
            return ($password.val().length >= ${data.password_rules.min_length}$);
            ${/data.password_rules.min_length}$
            ${^data.password_rules.min_length}$
            return true;
            ${/data.password_rules.min_length}$
        }
    
        function checkMaxLength() {
            ${#data.password_rules.max_length}$
            return ($password.val().length <= ${data.password_rules.max_length}$);
            ${/data.password_rules.max_length}$
            ${^data.password_rules.max_length}$
            return true;
            ${/data.password_rules.max_length}$
        }
    
        function checkMinNumber() {
            ${#data.password_rules.min_number}$
            let numbers = ($password.val().match(/[0-9]/g)|| []);
            return (numbers.length >= ${data.password_rules.min_number}$);
            ${/data.password_rules.min_number}$
            ${^data.password_rules.min_number}$
            return true;
            ${/data.password_rules.min_number}$
        }
    
        function checkMinUpperCase() {
            ${#data.password_rules.min_upper_case}$
            let upper = ($password.val().match(/[A-Z]/g) || []);
            return (upper.length >= ${data.password_rules.min_upper_case}$);
            ${/data.password_rules.min_upper_case}$
            ${^data.password_rules.min_upper_case}$
            return true;
            ${/data.password_rules.min_upper_case}$
        }
    
        function checkMinLowerCase() {
            ${#data.password_rules.min_lower_case}$
            let lower = ($password.val().match(/[a-z]/g) || []);
            return (lower.length >= ${data.password_rules.min_lower_case}$);
            ${/data.password_rules.min_lower_case}$
            ${^data.password_rules.min_lower_case}$
            return true;
            ${/data.password_rules.min_lower_case}$
        }
    
        function checkMinCustomCharacters() {
            ${#data.password_rules.min_custom_characters}$
            let regex = new RegExp('[' + RegExp.quote(htmlDecode("${data.password_rules.custom_characters}$]")) + ']', 'g');
            let custom = ($password.val().match(regex) || []);
            return (custom.length >= ${data.password_rules.min_custom_characters}$);
            ${/data.password_rules.min_custom_characters}$
            ${^data.password_rules.min_custom_characters}$
            return true;
            ${/data.password_rules.min_custom_characters}$
        }
    
        function isEmailValid() {
          var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
          return regex.test($email.val());
        }
    
        function isCheckedAGB() {
            const disclaimer = document.getElementById('disclaimer_box');
            return disclaimer.checked;
        }
    
        <!--Can submit -->
        function canSubmit() {
            return isPasswordValid() && isEmailValid() && isCheckedAGB();
        }
    
        function passwordEvent() {
            if (isPasswordValid()) {
                $password.next().hide();
            } else {
                $password.next().show();
            }
        }
    
        function emailEvent() {
            if (isEmailValid()) {
                $email.next().hide();
            } else {
                $email.next().show();
            }
        }
    
        function checkFields() {
          if(validateFields() !== ""){
            $validator.addClass('block');
            $popup.html(validateFields());
          } else {
            $validator.removeClass('block');
          }
        }
    
        function validateFields(){
          var message = ""
          if(!isEmailValid()) {
            message += "&check; E-Mail ist noch nicht korrekt ausgefüllt<br>";
          }
          if (!isPasswordValid()) {
            message += "&check; Passwort ist noch nicht korrekt ausgefüllt<br>";
          }
          if (!isCheckedAGB()) {
            message += "&check; Die AGBs wurden noch nicht bestätigt<br>";
          }
          return message;
        }
    
        function htmlDecode(input) {
            let doc = new DOMParser().parseFromString(input, "text/html");
            return doc.documentElement.textContent;
        }
    
        <!--Enable or disable the submit button-->
        function enableSubmitEvent() {
            $("#input_submit").prop("disabled", !canSubmit());
        }
    
        <!--Run passwords length check-->
        $password.focus(passwordEvent).keyup(passwordEvent).keyup(enableSubmitEvent);
    
        $email.focus(emailEvent).keyup(emailEvent).keyup(enableSubmitEvent);
    
        $disclaimer.click(enableSubmitEvent);
    
        $validator.hover(function(){
          if(!canSubmit()) {
            $popup.addClass('show');
          }
        }, function(){
          $popup.removeClass('show');
        });
    
        $(document).ready(function() {
          checkFields();
        });
    
        $(document).change(function() {
          checkFields();
        });
    
        $validator.click(checkFields);
    
        <!--Run submit button function code-->
        enableSubmitEvent();
    </script>
    
  • URL: /components/raw/hub_registercheckinput/registerCheckInput.mustache
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub_Partial/registerCheckInput/registerCheckInput.mustache
  • Size: 5.3 KB
  • Handle: @hub_registercheckinput
  • Preview:
  • Filesystem Path: src/patterns/50-external/Xpresso/Hub_Partial/registerCheckInput/registerCheckInput.mustache

No notes defined.