jquery-validator

ok -- I think I finally figured all this out... Thanks to matt2's issue of ensuring that the error-text label gets stretched out, I am now correctly displaying feedback according to the mdb style.

                if (res == "success") {
                    $('#username').addClass('valid').removeClass('invalid');
                    $('#username_label').attr('data-success', 'ok');
                } else {
                    $('#username').addClass('invalid').removeClass('valid');
                    $('#username_label').attr('data-error', 'username is taken');
                }

Thanks for all the help! --mike

---

Hello, in order to help you, I need some more information. Please tell me which jQuery plugin are you using? It would also be useful if you could send me some of your code snippets. Regards,

---

Morning, I spent some time studying this yesterday, including the demo in the doc. I feel I can offer a better problem description now. mdb pro 4.3.1 w/bootstrap jquery 3.1.1 jquery-validate 1.16.0 The form is a simple registration form - for sake of brevity, let's just limit the form to a text input box called username. My jquery-validator code looks like this:

    $('#register-form').validate ({
        // validation rules for registration form
        debug: true,
        errorClass: "active",
        rules: {
            name: {
                required: true,
                minlength: 5,
                maxlength: 20
            }
        },
        messages: {
            name: {
                required: "Please enter your full name",
                minlength: "A minimum of 5 characters is required for a username",
                maxlength: "No more than twenty characters allowed for a username"
            },
        },
        submitHandler: function(form){
            form.submit();
        }
    });

The HTML for the form control:

                    <form id="register-form">
                        <div class="md-form">
                            <i class="fa fa-user prefix"></i>
                            <input type="text" id="username" name="username" class="form-control validate">
                            <label for="username" data-error="" data-success="ok">Username</label>
                        </div>

What's currently happening is that, when I enter a user name of a couple characters, the error text appears in the label above the input control, the input control under-line turns green, and a green "ok" appears in the label ::after the control. Should also point out that the error text isn't mine, or isn't what I've defined in the messages section in the above javascript: minlength: "A minimum of five characters is required" maxlength: "Please enter no more than 20 characters" I think that what I want to do in the javascript is replace the control class but I'm not javascript-savvy/experienced enough to derive this bit. Something like: $(element).addClass("invalid").removeClass("valid"); Where the element is the username form control. I'm not getting a lot out of the doc (components -> inputs -> error/success messages) as the examples are limited to classes email and password only. How does this css validation work for vanilla text input controls where you want to specify min/max length, for example? Hopefully this provides a much better description of the issue... thank you for the response and assistance! --mike

---

Please first try adding for eg. minlength="6" maxlength="10" to your input field. In label, you can also specify error/success message you want to be shown. Let me know if you need further help. Regards,

---

Hi Edyta, Thank you for your response. If I understand you correctly, adding those params to the input field makes the validation checks the responsibility of mdb and not another library such as jquery-validator. However, there's going to be times when I require javascript validation. For example, to use an ajax request back to the server to see if a username or an email is already in use. In these cases, how do I push messages back, from the javascript event, so that they appear in their proper places in the mdb controls/labels/form? That's really the primary issue here. Thanks! --mike

---