[Bug] Not working - jQuery Validation - Custom Messages and Rules

[Eccelor]

Version

2.2.2

Reproduction Link

https://codepen.io/pen/

Operating System

Windows 10

Device

N/A

Browser & Version

Firefox, Edge - Latest

Steps to reproduce

On the example login page, add jquery validate plugin supplied with template

Login Form

<form
    class="form"
    id="form-authenticate-user"
    data-ajax="true"
    data-ajax-url="/service/user/authenticate"
    data-ajax-method="POST"
    data-ajax-begin="OnAuthenticationBegin"
    data-ajax-success="OnAuthenticationSuccess"
    data-ajax-failure="OnAuthenticationFailure"
>
    <div class="card card-login card-hidden">
        <div class="card-header card-header-primary text-center">
            <h4 class="card-title">Login with</h4>
            <div class="social-line">
                <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
                    <i class="fa fa-facebook-f"></i>
                </a>
                <a href="#pablo" class="btn btn-just-icon btn-link btn-white">
                    <i class="fa fa-linkedin"></i>
                </a>
            </div>
        </div>
        <div class="card-body">
            <p class="card-description text-center" style="margin-right:-20px;">
                OR<br /><br />Login with your Email
            </p>
            <span class="bmd-form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="material-icons-outlined"
                                >alternate_email</i
                            >
                        </span>
                    </div>
                    <input
                        id="authenticate-input-email"
                        name="Email"
                        type="email"
                        class="form-control"
                        placeholder="Email"
                        required
                    />
                </div>
            </span>
            <span class="bmd-form-group">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="material-icons-outlined">lock</i>
                        </span>
                    </div>
                    <input
                        id="authenticate-input-password"
                        name="Password"
                        type="password"
                        class="form-control"
                        placeholder="Password"
                        required
                    />
                </div>
            </span>
        </div>
        <div
            class="text-center justify-content-center"
            style="margin-top:24px;"
        >
            <label
                id="authenticate-status"
                class="label"
                style="color: tomato;"
            ></label>
        </div>
        <div class="card-footer justify-content-center">
            <input
                id="button-authentication-submit"
                class="btn btn-primary btn-round"
                type="submit"
                value="Login"
                style="margin-bottom:12px;"
            />
        </div>
    </div>
</form>

JS for Login

function OnAuthenticationBegin(xhr)
{
    var textStatus = $('#authenticate-status');
    textStatus.empty();

    var buttonSubmit = $('#button-authentication-submit');

    var authenticateUserForm = $('#form-authenticate-user');
    authenticateUserForm.validate(
        {
            rules:
            {
                Email:
                {
                    required: true,
                    email: true
                },
                Password: 'required'
            },
            messages:
            {
                Email:
                {
                    required: 'Email is required',
                    email: 'Email is invalid'
                },
                Password:
                {
                    required: 'Password is required'
                }
            },
            submitHandler: function (form)
            {
                buttonSubmit.prop("disabled", true);
                buttonSubmit.html('Logging in..');
                return true;
            },
            invalidHandler: function (event, validator)
            {
                return false;
            }
        });

    //var inputEmail = $('#authenticate-input-email');
    //var inputPassword = $('#authenticate-input-password');
}

function OnAuthenticationSuccess(data, status, xhr)
{
    var textStatus = $('#authenticate-status');
    var buttonSubmit = $('#button-authentication-submit');

    if (data === "TRUE")
    {
        window.location.href = 'dashboard';
        textStatus.text("Successfully logged in!");
        buttonSubmit.prop("disabled", false);
        buttonSubmit.html('Login');
    }
}

function OnAuthenticationFailure(xhr, status, error)
{
    var inputPassword = $('#authenticate-input-password');
    var textStatus = $('#authenticate-status');
    var buttonSubmit = $('#button-authentication-submit');

    inputPassword.empty();
    buttonSubmit.prop("disabled", false);
    buttonSubmit.html('Login');
    switch (xhr.status)
    {
        case 403:
            textStatus.text('Invalid email or password.')
            break;

        default:
            textStatus.text('Trouble logging in! Try again later.')
            break;
    }
}

Try entering the email and password with validations, custom messages and rules specified in JS are ignored

What is expected?

Validate function should work with custom rules and messages as per jquery validation plugin's documentation

What is actually happening?

Custom messages and rules specified in JS are ignored for validation

---

Solution

Additional comments

Code provided here in steps to reproduce Didn't know how to reference pro template js and all from codepen, setup does not require build setup

[github-actions[bot]]

@Eccelor this issue was automatically closed because it did not follow the bellow rules:

IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/material-dashboard-pro

**If your issue was not created using the app above, it will be closed immediately.**

Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com

[Eccelor]

Hello, tried creating issue from there but seeing this error.