1
js/prototype/validation.js

I have two classes: validate-email, validate-mobilePhoneNumber

customer/form/login.phtml

In email input, the customer can log with the email address or a phone number, so what I would like to do is that when the user enters an email address, I validate the email class: validate-email and if he enters a phone number I validate it the phone class: validate-mobilePhoneNumber

<li>
    <label for="email" class="required"><em>*</em><?php echo $this->__('Email address or phone number')  ?></label>
    <div class="input-box">
         <input type="text" name="login[username]" value="<?php echo $this->escapeHtml($this->getUsername()) ?>" id="email" class="input-text required-entry " title="<?php echo $this->__('Email address or phone number') ?>" />
    </div>
</li>

EDIT: On the basis of the answer of Jaimin Sutariya

In js/prototype/validation.js we need to add a custom validation

Validation.add('validate-email-or-phone', 'Please enter a valid Email address or phone number.', function(v) {
return Validation.get('IsEmpty').test(v) || Validation.get('validate-email').test(v) || Validation.get('validate-mobilePhoneNumber').test(v)

})

2

You can achieve this by adding a custom validation to your form field. Add below validation script to your phtml file.

<script type="text/javascript">
//<![CDATA[
    Validation.add('validate-email-or-phone', 'Please enter a valid Email address or phone number.', function(v) {
        return Validation.get('IsEmpty').test(v) || Validation.get('validate-email').test(v) || /^(\+\d{1,3}[- ]?)?\d{10}$/.test(v)
    });
    Translator.add("Please enter a valid Email address or phone number.","<?php echo $this->__("Please enter a valid Email address or phone number."); ?>");
//]]>
</script>

You need to replace validate-email class with validate-email-or-phone in your textbox. This validation will check for email address and for mobile number it will accept all numbers included in this question.

You need to add CSV file for translation.

8
  • Yes, great @Jaimin, just i customized it else look my update. another question: you know how to put a translate function in a validation error Please enter a valid Email address or phone number.
    – Aamir
    Mar 15 '17 at 9:52
  • Double "and" in your answer. Small typo. :)
    – Max
    Mar 15 '17 at 9:59
  • Thanks. Updated answer please check, I think you know how to add translation using CSV file. Mar 15 '17 at 10:11
  • I want to declare two id for the same input field how to declare?
    – zus
    May 22 '20 at 6:09
  • 1
    @zus, You can use Validator.add function the second time and add the validation class in your input just like we add multiple classes on an html element. May 23 '20 at 2:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.