Métodos customizados de validação com jquery validation

Em outro post, demostrei como validar formulários utilizando o jquery validation, entretanto, neste post, irei abordar aspectos um pouco mais avançado, que é a criação de métodos customizados para validação.

Além dos métodos nativos, disponíveis no jquery validator, também podemos criar os nossos próprios métodos de validação e incorpora-los ao plugin, permitindo que ele se adapte a realidade da nossa aplicação.

Primeiros passos

Para criar nossa validação, basta chamar o método addMethod do jquery validator, passando com argumento três parâmetros, que são eles:

  1. Nome do método que será utilizado nas regras de validação, assim como, url, email.
  2. Método de validação, onde recebe 2 parâmetros obrigatórios: valor e elemento dom do campo. Também é possível receber um terceiro parâmetro em caso de validações que são necessários mais de um parâmetro de comparação. Ex: range(1, 5).
  3. Já no terceiro parâmetro é onde devemos informar a mensagem que será exibida caso os dados não sejam válidos.

Abaixo segue um exemplo de como adicionar métodos de validação ao plugin.

Obs: Nota-se que no método de validação é retornado this.optional( element ) ou sua validação, este método não é obrigatório, porém essencial para que seu método de validação possa ser reutilizado, ou seja, ao retornar this.optional passando o elemento, será ignorada sua regra de validação caso o campo não seja definido como obrigatório e seu valor mantenha-se vazio, porém no caso do usuário informar um caractere que seja, a validação será executada normalmente.

Utilizando os nossos métodos

Após criada nossa validação, o processo de utilização segue o mesmo critério dos métodos nativos do plugin.

Método de validação de cpf

Como brinde, deixo abaixo um dos métodos de validação que é mais comum no dia a dia, servindo como base para que você desenvolva seus próprios métodos.

Para utiliza-lo basta:

Até mais.

1 Comentário

  1. Olá, muito útli e funcional seu validador de CPF. Só faltou validar cpfs inválidos como ‘000.000.000-00’, ‘111.111.111-11’ etc. Fiz uma alteração e agora está validando. Segue abaixo.

    jQuery.validator.addMethod( “cpf”, function(value, element) {
    var is_valid = false;

    var regex_cpf_format = /^d{3}.?d{3}.?d{3}-?d{2}$/;
    var regex_cpf_repeat = /^(0{11}|1{11}|2{11}|3{11}|4{11}|5{11}|6{11}|7{11}|8{11}|9{11})$/;
    if ( regex_cpf_format.test( value ) && !regex_cpf_repeat.test( value.replace(/[^0-9]/, ” ) ) ) {
    is_valid = true;
    }

    if ( is_valid ) {
    var cpf = value.replace( /[^0-9]/g,”);

    var a = [], b = 0, digits = 11;
    for ( i = 0; i < 11; i++ ){
    a[i] = cpf.charAt( i );
    if ( i < 9 ) {
    b += ( a[i] * –digits );
    }
    }

    if ( ( x = b % 11 ) < 2 ) {
    a[9] = 0;
    } else {
    a[9] = 11 – x ;
    }

    b = 0;
    digits = 11;
    for ( y = 0; y < 10; y++ ) {
    b += ( a[y] * digits– );
    }
    if ( ( x = b % 11 ) < 2) {
    a[10] = 0;
    } else {
    a[10] = 11 – x;
    }

    if ( ( cpf.charAt( 9 ) != a[9] ) || ( cpf.charAt( 10 ) != a[10] ) ) {
    is_valid = false;
    }
    }

    var teste = value;

    if(teste.localeCompare('000.000.000-00') == 0 || teste.localeCompare('111.111.111-11') == 0 || teste.localeCompare('222.222.222-22') == 0 || teste.localeCompare('333.333.333-33') == 0
    || teste.localeCompare('444.444.444-44') == 0 || teste.localeCompare('555.555.555-55') == 0 | teste.localeCompare('666.666.666-66') == 0 ||
    teste.localeCompare('777.777.777-77') == 0 || teste.localeCompare('888.888.888-88') == 0 || teste.localeCompare('999.999.999-99') == 0) {
    is_valid = false;
    }

    return this.optional( element ) || is_valid ;

    }, "Informe um número de cpf válido." );

    Reply

Leave a Comment.