input mask in text fields

Replies: 0

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!