Custom Validation Rule for inputbox

[rutulritz]

Hi,

I have created custom Login page in the magento website. Now I am trying to add the custom validation rule method as below:
but it is not working . Can you please guide me on this?
1]Smart_PrivilegeActivation/layout/breeze_default.xml

2] Smart_PrivilegeActivation/web/js/validation.js

3] login form script :

<form id="privilege-activation-form">
        <input name="username" 
                                    value="<?php echo $block->escapeHtml($block->getUsername()) ?>" <?php if ($block->isAutocompleteDisabled()) : ?> 
                                    autocomplete="off"<?php endif; ?> 
                                    placeholder="<?php echo __('Email/Phone Number') ?>" 
                                    id="username-login" 
                                    type="text" 
                                    class="input-text" 
                                    title="<?php /* @escapeNotVerified */ echo __('email address') ?>" 
                                    data-validate="{required:true, 'validate-phone-email-custom':true}" 
                                    data-mage-init='{"mage/trim-input":{}}'
                                    data-msg-required="<?php echo __('This is a required field.')?>" />
</form>

 "#privilege-activation-form" : {
                "Smart_PrivilegeActivation/js/validation":{}
            },

On login page load getting below error:

Please help me and let me know what I am doing wrong here.

Thanks

[vovayatsyuk]

On your last screenshot, you have the text of an error: $ is undefined on line 4 in validation.js

You need to fix it in Smart_PrivilegeActivation/web/js/validation.js

(function ($) { // <-- what do you pass here? You didn't show that on the screenshot.
  ...

[rutulritz]

How Can I fix it?

Here is my validation.js file code.

define([
    'jquery'
], function ($) {
    'use strict';

    $.validator.validators['validate-phone-custom'] = [
        function (value) {

            var validRegexp, emails, i;
            console.log('ZAZAZAZ');
            if (!value) {
                return true;
            }
            validRegexp = /^(8)((([0-9]{8}|[0-9]{9}|[0-9]{10}|[0-9]{11}))|[0-9]{8}|[0-9]{9}|[0-9]{10}|[0-9]{11}|(([0-9]{8}|[0-9]{9}|[0-9]{10}|[0-9]{11})))$/; //eslint-disable-line max-len

            var phone = value;
            if (phone.startsWith("62")) {
                phone = "+62" + phone.substring(2);
            }
            else if (phone.startsWith("0")) {
                phone = "+62" + phone.substring(2);
            }
            else if (!phone.startsWith("+62")) {
                phone = "+62" + phone;
            }
            var phoneno = phone.substring((3));

            var result = $.mage.isEmptyNoTrim(phoneno) || !validRegexp.test(phoneno);
            if (result) {
                $('#phone').val(phone);
                return true;
            }
            return false;
        },
        $.__('Please  enter phone number starting with 8 and should be around 9 to 12 digits.')
    ];
});

[rutulritz]

Same above error I am getting

[vovayatsyuk]

Do you mean you get $ is undefined on line 4? But there is no $ on line 4 in your latest code. I’m confused now.

[rutulritz]

$.validator......

[vovayatsyuk]

Hey dude, I think you are very busy and don’t have time to write a full sentences, I fully understand this.

Please create a public git repo with your module and readme file with detailed instruction on how to install it and where can I see the error after installation.

[rutulritz]

Oh sorry, @vovayatsyuk ,

I was not working on last 2 days, thats why I could not reply above.

Let me check and confirm again the javascript files.

Thanks