Validação de formulário personalizado - Magento


18

Estou tentando implementar alguma validação de formulário personalizado no Magento usando jQuery, mas não tenho certeza se tenho o método correto.

Basicamente, preciso validar o seguinte:

  1. Apenas os campos numéricos precisam ter .00 para validar 1 a 1,00

  2. As letras precisam estar em maiúsculas

  3. Não pode ter um número maior que 9,99

  4. Não há espaços nos campos

Estou pensando em usar jQuery e comecei a escrever algo para validar o formulário:

<script>
    jQuery(document).ready(function() {
        jQuery.validator.addMethod("integer", function(value, element) {
            return this.optional(element) || /^-?\d+$/.test(value);
        }, "A positive or negative non-decimal number please");

        function(field, length) {
            if (!numericRegex.test(length)) {
                return false;
            }
            return (field.value.length <= parseInt(length, 4));
        },
    }
</script>

O problema é que não consigo encontrar as funções para os outros campos de validação e poderia fazer com alguma assistência, por favor ???

Respostas:


25

Excelente pergunta!

Você não precisa do jQuery para isso. Você pode fazer isso com o validador de formulário Magento embutido. Primeiro, o javascript para configurar o formulário para validação deve ser colocado no seu modelo de formulário:

<script type="text/javascript">
  var myForm= new VarienForm('[your form id]', true);
</script>

Agora prepare seus campos de formulário adicionando as classes css apropriadas.

Não pode ter um número maior que 9,99

<input type="text" class="required-entry validate-digits-range digits-range-0-9.99"/>

Nenhum espaço nos campos

<input type="text" class="required-entry validate-alphanum"/>

É isso aí! Para os casos de uso mais específicos, você precisará adicionar regras de validação personalizadas:

Apenas os campos numéricos precisam ter .00 para validar 1 a 1,00

Validation.add('validate-float','Input must be in the form of 0.00',function(v){
    return Validation.get('IsEmpty').test(v) || (!/\./.test(v));
});

Que então é validado com o seguinte:

<input type="text" class="required-entry validate-float"/>

As letras precisam estar em maiúsculas

Este é semelhante, o regex deve testar um intervalo de maiúsculas:

Validation.add('validate-uppercase','Input must be in uppercase',function(v){
    return Validation.get('IsEmpty').test(v) || (!/^[A-Z]+$/.test(v));
});

E usado como:

<input type="text" class="required-entry validate-uppercase"/>

Obrigado mano, você tem me ajudado ultimamente !!
user1704524

@philwinkle como restringir valores flutuantes / decimais junto com a validação para 0?
Slimshadddyyy

@Vikram, você pode abrir uma nova pergunta e fornecer um caso de uso?
18714 philwinkle

isso é possível que este VarienForm use para dois formulários em arquivo único
ND17 18/15

3

Existem muitas classes para validação de dados:

'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-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. Leading or trailing spaces will be ignored.'
'validate-admin-password'       => 'Please enter 7 or more characters. Password should contain both numeric and alphabetic characters.'
'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 &quot;example-page&quot;, &quot;example-page.html&quot; or &quot;anotherlevel/example-page&quot;.'
'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-state'                => 'Please select State/Province.'
'validate-new-password'         => 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.'
'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.'
'validate-cc-ukss'              => 'Please enter issue number or start date for switch/solo card type.'
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.