0

Tenho um input que pega o cpf do usuário e a validação é feita em php.

class CPF {

protected $field_id;

public function __construct( $field_id ) {
    $this->field_id = $field_id;
}

/**
 * Check if provided CPF is valid
 *
 * This method performs several verification including
 * the Brazilian Federal Revenue algorithm.
 *
 * @link https://www.geradorcpf.com/algoritmo_do_cpf.htm
 *
 * @return bool If it's valid or not.
 */
public function is_valid() {

    if ( empty( $this->field_id ) ) {
        wp_die( 'Ocorreu um erro na validação do CPF. Por favor, entre em contato com o administrador.' );
    }

    // Get posted field and make and remove any characters but numbers.
    $cpf = preg_replace( '/[^0-9]/', '', Input::get_unverified_posted( 'field_' . $this->field_id ) );

    // Add leading zeros in order to make sure the value has exact 11 characters.
    $cpf = str_pad( $cpf, 11, '0', STR_PAD_LEFT );

    // Check required length.
    if ( strlen( $cpf ) != 11 ) {
        return false;
    }

    // Check for dummy repeated sequence. Ex: 111.111.111-11.
    if ( preg_match( '/(\d)\1{10}/', $cpf ) ) {
        return false;
    }

    // Check against Brazilian Federal Revenue algorithm.
    for ( $t = 9; $t < 11; $t++ ) {
        for ( $d = 0, $c = 0; $c < $t; $c++ ) { // @codingStandardsIgnoreLine WordPress.CodeAnalysis.AssignmentInCondition
            $d += $cpf{$c} * ( ( $t + 1 ) - $c );
        }
        $d = ( ( 10 * $d ) % 11 ) % 10;
        if ( $cpf{$c} != $d ) {
            return false;
        }
    }
    return true;
}

}

Porém para facilitar para o usuário, queria que no momento que ele digitar o CPF se ele não obedecer a regra o campo ficasse com a borda vermelha.

Porém somente tenho acesso á classe do input, pois o mesmo é gerado por u plugin, que faz um um foreach, tem alguma forma de eu conseguir fazer isso somente com o id que no meu caso é id="field_13".

1
  • Modifiquei a pergunta, na outra o usuário usou o pattern, acho que não vai funcionar aqui. Commented 28/11/2018 às 17:38

1 Resposta 1

1

Use o evento onKeyup no input e se a validação não satisfazer, adicione uma classe 'has-error' no mesmo. Se a validação satisfazer, remova a classe anteriormente citada.

Abaixo implementei pra servir de exemplo pra você:

const inputCpfElement = document.getElementById('inputCpf');

inputCpfElement.addEventListener('keyup', function(ev) {
  const input = ev.target;
  const value = ev.target.value;

  if (value.length <= 3) {
    input.classList.add('--has-error');
    
  } else {
    input.classList.remove('--has-error');
  }
});
.field {
  border: 1px solid #ccc;
  outline: none;
}

.field.--has-error {
  border-color: #f00;
}
<p>Valida se o tem mais de 3 caracteres digitados.</p>
<form>
  <label>Cpf: <input type="text" id="inputCpf" class="field" /></label>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .