validação de campos telefone e email

pedrogodoy
(@pedrogodoy)

7 years, 3 months ago

Utilizamos o plugin em nossa loja e estamos com alguns problemas no checkout. Alguns clientes estão preenchendo os campos de telefone e cep incorretamente, e o pagar.me está dando pendência na venda.

O que acontece é que a validação pelo plugin é feita em JS e acaba sobrepondo qualquer validação que crio, seja em php usando os hocker do Woo, seja em JS no front-end, mesmo utilizando máscara para os campos.

O campo de telefone, por exemplo, basta estar preenchido com 1 ou 3 caracteres que o plugin já abre o popup do sandbox, para preenchimento dos dados de cartão de crédito. O ideia seria refinarmos a validação, para que além de preenchido, o campo corresponda com o padrão que a pagar.me solicita, referenciado aqui:
https://docs.pagar.me/v2/docs/overview-transacao

Analisando o plugin em:
woocommerce-pagarme\assets\js\checkout.js
// Phone fields.
if ( isset( $( ‘#billing_phone’ ) ) ) {
phone = getNumbers( $( ‘#billing_phone’ ).val() );
data.customerPhoneDdd = phone.substr( 0, 2 );
data.customerPhoneNumber = phone.substr( 2 );
}

nesta linha, analisa apenas se o campo está preenchido. Como posso fazer a validação e retornar erro, caso não esteja no padrão necessário?

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

Viewing 4 replies - 1 through 4 (of 4 total)

rmachado1
(@rmachado1)

7 years ago

Gostaria de retomar essa questão. Não sei se você teve algum sucesso em solucionar este caso @pedrogodoy?

Realmente o campo telefone deveria avaliar um mínimo de dígitos, inputs com (11) ou (11)11 acabam passando pela validação. Também tentei de várias formas, mas não consigo impedir a abertura do popup do Pagarem com esse campo telefone inválido Seria possível avaliar novamente este caso? Acredito que não tenha uma complexidade tão grande.

Obrigado.
Thread Starter pedrogodoy
(@pedrogodoy)

7 years ago
Consegui resolver amigo!

Não é uma solução permanente, portanto deve ser aprimorada de acordo com a sua necessidade ok. Segue:

Arquivo do Plugin:
– wp-content/plugins/woocommerce-pagarme/includes/class-wc-pagarme-api.php
– vá ate a LINHA 663
– o que precisa ser feito é adicionar uma condição para validar os campos de CEP e TELEFONE.
– usei a validação abaixo:

if ( ! empty( $_POST['pagarme_checkout_token'] ) )

e substitui:
```
if ( ! empty( $_POST['pagarme_checkout_token'] ) ) {
				$token = sanitize_text_field( wp_unslash( $_POST['pagarme_checkout_token'] ) );
				$data  = $this->generate_checkout_data( $order, $token );

				// Cancel the payment is irregular.
				if ( isset( $data['error'] ) ) {
					$this->cancel_transaction( $order, $token );
					$order->update_status( 'failed', $data['error'] );

					return array(
						'result'   => 'success',
						'redirect' => $this->gateway->get_return_url( $order ),
					);
				}

				$transaction = $this->do_transaction( $order, $data, $token );
			} else {
				
				$transaction = array( 'errors' => array( array( 'message' => __( 'Missing credit card data, please review your data and try again or contact us for assistance.', 'woocommerce-pagarme' ) ) ) );
				
			}
```
por:
```
if ( ! empty( $_POST['pagarme_checkout_token'] ) ) {
				$token = sanitize_text_field( wp_unslash( $_POST['pagarme_checkout_token'] ) );
				$data  = $this->generate_checkout_data( $order, $token );

				// Cancel the payment is irregular.
				if ( isset( $data['error'] ) ) {
					$this->cancel_transaction( $order, $token );
					$order->update_status( 'failed', $data['error'] );

					return array(
						'result'   => 'success',
						'redirect' => $this->gateway->get_return_url( $order ),
					);
				}

				$transaction = $this->do_transaction( $order, $data, $token );
			} else {
				
				//LINHA 663-672 ADICINAS 03/01/18 - POR PEDRO GODOY
				$cont_phone = strlen( $_POST['billing_phone'] );
				$cont_cep = strlen( $_POST['billing_postcode'] );
								
				if( $cont_phone < 15 ) :					
					$transaction = array( 'errors' => array( array( 'message' => __( 'Preencha corretamente o <strong>Telefone</strong>.', 'woocommerce-pagarme' ) ) ) );
					
				elseif( $cont_cep < 9 ) :					
					$transaction = array( 'errors' => array( array( 'message' => __( 'Preencha corretamente o <strong>CEP</strong>.', 'woocommerce-pagarme' ) ) ) );
					
				else :					
					$transaction = array( 'errors' => array( array( 'message' => __( 'Missing credit card data, please review your data and try again or contact us for assistance.', 'woocommerce-pagarme' ) ) ) );
					
				endif;				
				
			}
```
Fiz uma validação simples por quantidade de caracteres:
```
$cont_phone = strlen( $_POST['billing_phone'] );
if( $cont_phone < 15 ) 
```
você pode fazer o ajuste que achar melhor. No meu caso, apenas essa validação funcionou. O cliente parou de receber pedidos com erro.

Espero que possa ter ajudado.

abs.,
rmachado1
(@rmachado1)

7 years ago

@pedrogodoy obrigado por compartilhar sua solução.

Editar diretamente no plugin é meio complicado, apesar de não do plugin não ter tantos updates.

Essa volição vai entrar apenas após o usuário digitar os dados do cartão, correto? Em termos de usabilidade, a validação tem que ser antes do popup do pagarme.

Mas vi aqui que os pedidos ficam cancelados, então de fato a solução funciona, porém, como você mesmo disse, não é permanente.

De qualquer forma, obrigado pela disponibilidade de compartilhá-la comigo. Valeu! Abraço.

Thread Starter pedrogodoy
(@pedrogodoy)

7 years ago

“Essa volição vai entrar apenas após o usuário digitar os dados do cartão, correto?”
Na verdade não, essa validação ocorre no checkout antes do popup da pagar.me.

Uma outra solução é validar pelo JS. É mais rápido e o plugin já utiliza essa validação. Eu comecei a esboçar uma alteração no JS e deu erro, fui para o PHP e funcionou de cara, portanto parei por ai. Quando tiver oportunidade corrijo no JS e posto aqui.

*ao alterar o plugin, coloque nos comentários no começo da página uma referência à sua alteração. abs.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘validação de campos telefone e email’ is closed to new replies.