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

[Eccelor]

Version

2.2.2

Reproduction link

https://codepen.io/gohopac/pen/RwpXxMN

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 setup form and js as specified in codepen 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

Didn't know how to reference pro template js and all from codepen, setup does not require build setup

[groovemen]

Hello @Eccelor,

Thank you for using our products, please make sure that you have imported the jquery.validate.min.js file into your page, and also you can check our form validate page. Please check the setFormValidation() function. Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

[Eccelor]

I have already imported jquery.validate.min.js in the page. Have browsed through documentation also but it does not provide any reference to custom rules and messages specified in JS. I have tried using data- attributes too but I guess it won't be supported considering the earlier version of validation plugin.

Any references to setFormValidation()? Could not find anything on it.

[Eccelor]

@groovemen Any updates on this?

[groovemen]

Hello again,

Sorry for this late response, unfortunately, we are not doing custom support. You can also check the jQuery Validate plugin's documentation: https://jqueryvalidation.org/documentation/. Also, we partnered with a web/mobile agency which has a lot of experience in custom development so please contact the team here: https://services.creative-tim.com/ and they will come with more details regarding your project.

Please let us know if we can help with any other details.

Best, Creative Tim Staff

[Eccelor]

Hi @groovemen, this is not a request for custom development / custom support. jQuery validation support is provided by your theme as per your documentation.

This works on the dashboard sample pages (https://demos.creative-tim.com/material-dashboard-pro/examples/forms/validation.html) but does not work on your sample login / register pages (https://demos.creative-tim.com/material-dashboard-pro/examples/pages/login.html). I have already included jquery.validate.min.js on that page and have included relevant code to make it work. But this apparently, is not supported. Please refer to following code.

HTML

<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

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;
    }
}

Please reopen the issue and look into this.

[groovemen]

Hello again,

We have tested the jQuery.validation on the Login page from our product and you were right that is not working just by including the script into the file. We have made some workaround and noticed that the init function is looking after $(element).closest('.form-group') and the inputs from the login card has other structure and classes. Please check the following page where we have fixed this issue: login.html.zip

Please let us know if we can help you with anything else.

All the best, Stefan

[Eccelor]

Hi, haven't checked this yet but the changes in the structure and classes of form inputs removes the prepend icons (icons before field inputs). Is there any way to add the icons with these changes?

[Eccelor]

Also, I see that you have added following script to the login page with validate function. How will I be able to keep that part common on all similar forms and still customize rules and messages as per my code provided above?

[Eccelor]

@groovemen any updates on this?

[groovemen]

Hello @Eccelor,

You can create the initialization script into the _ready file to propagate for all the inputs. The customization rules can be set over there. All the best, Stefan