input mask in text fields

  • Resolved Agencia 221B

    (@agencia221b)


    10 months ago

    Hi there!

    I have a text field (CPF) in my form, that is like a social security number here in my country. In this field I have a custom code that validates if the number inserted is valid. But this number has an oficial format witch is 000.000.000-00

    Not everybody fill in that way, so I really need two things:

    1. the field must not accept anything other than a number (no dots, no hyphen, no letters, etc)
    2. a mask for that field that adds the dots and the hyphen in correct places as the person puts in the numbers (and the value of this field is sent to the data base, email and google sheets integration with the dots and hyphen)

    The field already has a class ‘valida-cpf’ that allows the validation script to work on it. The absolute perfect solution would be that this validation script that i’m already using were incremented/modified to include this ‘only numbers’ and ‘field mask’ functions, in addition to the validation that it already does.

    But any solution that you guys can provide would be absolutelly awesome!

    Here is the validation script, for you guys see if it can be modified to add this two functions:

    <?php

add_action('wp_footer', function () { ?>
	<style>
		.forminator-label--validation {
			background-color: #F9E4E8;
			color: #E04562;
			display: block;
			font-size: 12px;
			font-family: inherit;
			font-weight: 500;
			padding: 2px 10px;
			border-radius: 2px;
			line-height: 2em;
			margin: 5px 0 0;
		}
	</style>
	<script>
		function cpfValido(cpf) {
			if (typeof cpf !== "string") return false
			cpf = cpf.replace(/[\s.-]*/igm, '')
			if (
				!cpf ||
				cpf.length != 11 ||
				cpf == "00000000000" ||
				cpf == "11111111111" ||
				cpf == "22222222222" ||
				cpf == "33333333333" ||
				cpf == "44444444444" ||
				cpf == "55555555555" ||
				cpf == "66666666666" ||
				cpf == "77777777777" ||
				cpf == "88888888888" ||
				cpf == "99999999999"
			) {
				return false
			}
			var soma = 0
			var resto
			for (var i = 1; i <= 9; i++)
				soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i)
			resto = (soma * 10) % 11
			if ((resto == 10) || (resto == 11)) resto = 0
			if (resto != parseInt(cpf.substring(9, 10))) return false
			soma = 0
			for (var i = 1; i <= 10; i++)
				soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i)
			resto = (soma * 10) % 11
			if ((resto == 10) || (resto == 11)) resto = 0
			if (resto != parseInt(cpf.substring(10, 11))) return false
			return true
		}

		(function($) {
			$(function() {
				var cvalinput = $('.valida-cpf input');

				$(cvalinput).bind('focusout', function() {

					if (cpfValido($(this).val())) {
						$(this).parent().find('label.forminator-label--validation').remove();
						$('button.forminator-button-submit').removeAttr('disabled');
					} else {
						if (!$(this).parent().find('label.forminator-label--validation').length) {
							$(this).parent().append('<label class="forminator-label--validation">CPF inválido</label>');
						}
						$('button.forminator-button-submit').attr('disabled', 'disabled');
					}
				});
			});
		})(window.jQuery);
	</script>
<?php }, 21); ?>

    Thanks in advance for the valuable help.

    Your guys are awesome!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @agencia221b,

    Could you please check and see whether the following update snippet from the shared code helps?

    <?php

add_action('wp_footer', function () { ?>
    <style>
        .forminator-label--validation {
            background-color: #F9E4E8;
            color: #E04562;
            display: block;
            font-size: 12px;
            font-family: inherit;
            font-weight: 500;
            padding: 2px 10px;
            border-radius: 2px;
            line-height: 2em;
            margin: 5px 0 0;
        }
    </style>
    <script>

        function cpfValido(cpf) {
            if (typeof cpf !== "string") return false
            cpf = cpf.replace(/[\s.-]*/igm, '')
            if (
                !cpf ||
                cpf.length != 11 ||
                cpf == "00000000000" ||
                cpf == "11111111111" ||
                cpf == "22222222222" ||
                cpf == "33333333333" ||
                cpf == "44444444444" ||
                cpf == "55555555555" ||
                cpf == "66666666666" ||
                cpf == "77777777777" ||
                cpf == "88888888888" ||
                cpf == "99999999999"
            ) {
                return false
            }
            var soma = 0
            var resto
            for (var i = 1; i <= 9; i++)
                soma = soma + parseInt(cpf.substring(i - 1, i)) * (11 - i)
            resto = (soma * 10) % 11
            if ((resto == 10) || (resto == 11)) resto = 0
            if (resto != parseInt(cpf.substring(9, 10))) return false
            soma = 0
            for (var i = 1; i <= 10; i++)
                soma = soma + parseInt(cpf.substring(i - 1, i)) * (12 - i)
            resto = (soma * 10) % 11
            if ((resto == 10) || (resto == 11)) resto = 0
            if (resto != parseInt(cpf.substring(10, 11))) return false
            return true
        }


        function formatCPF(cpf) {
            cpf = cpf.replace(/\D/g, '');
            cpf = cpf.replace(/(\d{3})(\d)/, '$1.$2');
            cpf = cpf.replace(/(\d{3})(\d)/, '$1.$2');
            cpf = cpf.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
            return cpf;
        }

        (function($) {
            $(function() {
                var cvalinput = $('.valida-cpf input');

                cvalinput.bind('input', function() {
                    var cpf = this.value.replace(/\D/g, '');
                    this.value = formatCPF(cpf);
                });

                $(cvalinput).bind('focusout', function() {
                    var cpf = this.value.replace(/\D/g, ''); 
                    if (cpfValido(cpf)) {
                        $(this).parent().find('label.forminator-label--validation').remove();
                        $('button.forminator-button-submit').removeAttr('disabled');
                    } else {
                        if (!$(this).parent().find('label.forminator-label--validation').length) {
                            $(this).parent().append('<label class="forminator-label--validation">CPF inválido</label>');
                        }
                        $('button.forminator-button-submit').attr('disabled', 'disabled');
                    }
                });
            });
        })(window.jQuery);
    </script>
<?php }, 21); ?>

    You can implement the above code using mu-plugins. Please check this link on how to implement the above code as a mu-plugins:
    https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

    Kind Regards,

    Nithin

    Thread Starter Agencia 221B

    (@agencia221b)

    Awesome! Works perfectly!

    Thats why you guys are the best support, and why I tell everyone about Forminator!

    Thank you very much!

    • This reply was modified 10 months ago by Agencia 221B. Reason: I found the solution
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘input mask in text fields’ is closed to new replies.