mshallop pro asked 7 years ago


Question about using mdb 4.3.1 with jquery-validator: I'm getting this behavior: On form load: https://ibb.co/dCECT5 form load during ajax validation: https://ibb.co/huSXT5 ajax-validation and then on lose-focus: https://ibb.co/i5fVFk lost-focus How would I re-direct the javascript messages from jquery-validator so that, optimally, they appear below the input text as error-text instead of replacing the labels assigned to the form control? Less-optimally, to replace the label text? thanks! --mike

mshallop pro answered 7 years ago


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

mshallop pro answered 7 years ago


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

Edyta Dabrowska free answered 7 years ago


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,

mshallop pro answered 7 years ago


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

Edyta Dabrowska free answered 7 years ago


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,

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No