Adicione validações aos formulários da sua loja

Embora a validação dos formulários por Javascript não deva ser a única forma de validar as informações inseridas pelo usuário, por outro lado, ela definitivamente melhora a usabilidade e eficiência da loja. 

Com o Magento essa tarefa é mais simples, a plataforma utiliza a biblioteca Prototype para gerenciar as validações dos formulários. Em suma, tudo que você precisa fazer ao escrever um formulário é atribuir nomes de classes aos campos de entrada e passar o ID do formulário para o objeto VarienForm.

Exemplo básico de utilização

Por exemplo, podemos ilustrar a utilização da validação no código abaixo:

<form id="my-custom-form" action="" method="post">
    <label for="firstname"><?php echo $this->__('First name') ?> <span class="required">*</span></label><br />
    <input id="firstname" name="firstname" class="input-text required-entry" />
    <label for="lastname"><?php echo $this->__('Last name') ?> <span class="required">*</span></label><br />
    <input id="lastname" name="lastname" class="input-text required-entry" />
    <label for="useremail"><?php echo $this->__('Email') ?> <span class="required">*</span></label><br />
    <input type="text" name="useremail" id="useremail" class="input-text required-entry validate-email" />
    <input type="submit" name="submit" value="<?php echo $this-/>__('Submit') ?>" />
</form>
<script type="text/javascript">
    //< ![CDATA[
        var customForm = new VarienForm('my-custom-form');
    //]]>
</script>

Quais são as validações padrão do Magento?

Para responder essa pergunta, podemos navegar até o arquivo js/prototype/validation.js, pois é nesse arquivo que estão os métodos com as respectivas validações. Deste modo conseguimos separar uma lista com as classes e as mensagens de retorno, essa lista de classes foi montada com base na versão 1.9 do Magento.

• validate-no-html-tags: HTML tags are not allowed
• validate-select: Please select an option
• required-entry: This is a required field
• validate-number: Please enter a valid number in this field
• validate-number-range: The value is not within the specified range
• validate-digits: Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas
• validate-digits-range: The value is not within the specified range
• validate-alpha: Please use letters only (a-z or A-Z) in this field
• validate-code: Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter
• validate-code-event: Please do not use “event” for an attribute code
• validate-alphanum: Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed
• validate-alphanum-with-spaces: Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field
• validate-street: Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field
• validate-phoneStrict: Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
• validate-phoneLax: Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890
• validate-fax: Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890
• validate-date: Please enter a valid date
• validate-date-range: The From Date value should be less than or equal to the To Date value
• validate-email: Please enter a valid email address. For example johndoe@domain.com
• validate-emailSender: Please use only visible characters and spaces
• validate-password: Please enter 6 or more characters without leading or trailing spaces
• validate-admin-password: Please enter 7 or more characters. Password should contain both numeric and alphabetic characters
• validate-cpassword: Please make sure your passwords match
• validate-both-passwords: Please make sure your passwords match
• validate-url: Please enter a valid URL. Protocol is required (http://, https:// or ftp://)
• validate-clean-url: Please enter a valid URL. For example http://www.example.com or www.example.com
• validate-identifier: Please enter a valid URL Key. For example “example-page”, “example-page.html” or “anotherlevel/example-page”
• validate-xml-identifier: Please enter a valid XML-identifier. For example something_1, block5, id-4
• validate-ssn: Please enter a valid social security number. For example 123-45-6789
• validate-zip: Please enter a valid zip code. For example 90602 or 90602-1234
• validate-zip-international: Please enter a valid zip code
• validate-date-au: Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006
• validate-currency-dollar: Please enter a valid $ amount. For example $100.00
• validate-one-required: Please select one of the above options
• validate-one-required-by-name: Please select one of the options
• validate-not-negative-number: Please enter a number 0 or greater in this field
• validate-zero-or-greater: Please enter a number 0 or greater in this field
• validate-greater-than-zero: Please enter a number greater than 0 in this field
• validate-special-price: The Special Price is active only when lower than the Actual Price
• validate-state: Please select State/Province
• validate-new-password: Please enter 6 or more characters without leading or trailing spaces
• validate-cc-number: Please enter a valid credit card number
• validate-cc-type: Credit card number does not match credit card type
• validate-cc-type-select: Card type does not match credit card number
• validate-cc-exp: Incorrect credit card expiration date
• validate-cc-cvn: Please enter a valid credit card verification number
• validate-ajax: ”
• validate-data: Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter
• validate-css-length: Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%
• validate-length: Text length does not satisfy specified text range
• validate-percents: Please enter a number lower than 100.’, {max:100}
• required-file: Please select a file
• validate-cc-ukss: Please enter issue number or start date for switch/solo card type

Validação personalizada

Com lista acima são várias as opções de validação, porém é possível adicionar regras de validação personalizadas, basta criar um arquivo Javascript com qualquer nome que desejar na pasta js da instalação do Magento.

Por exemplo, vamos modificar uma das regras de validação padrão, certamente a melhor maneira é criar um método com o mesmo nome e carregá-lo após o método original. Dessa maneira as chamadas serão redirecionadas para o método customizado em vez do original. O método que vamos substituir é o método de validação de email, queremos que ele aceite apenas endereços de e-mail terminados em @gmail.com.

Então criamos o arquivo Javascript e colocamos na pasta js.

js/custom-validation.js

Validation.add('validate-email', 'Please enter a valid Gmail address. For example johndoe@gmail.com.', function(v) {
    return Validation.get('IsEmpty').test(v) || /^([a-zA-Z0-9]+[a-zA-Z0-9._%-]*@gmail\.com)$/i.test(v)
})

Em seguida, precisamos incluir o script de validação, para isso vamos usar o método addJs, que adicionará o arquivo Javascript ao cabeçalho da loja. A chamada do script deve ser feita no arquivo page.xml, que é localizado no diretório app/design/frontend/base/default/layout/page.xml.

<default>
    <reference name="head">
        <action method="addJs"><script>custom-validation.js</script></action>
    </reference>
</default>

Conclusão

Resumindo, o Magento por si só já possui várias opções de validação, e além do que é padrão, podemos sobrescrever ou criar novas validações para atender as necessidades de cada projeto.