locked
Clear Jquery validation error messages RRS feed

  • Question

  • User-1642816421 posted

    Dear All,

    I have a master page in which there is form tag, and i have created a content page from that master page. There are several textboxes, one dropdownlist and a button in that page. When the user click on the button im validating the page with jquery validator , for that im calling a function via onclientclick. Which is calling a js function,written in js file. What i want to do is when i change the dropdown i want to remove the validation errors. I have tried .resetForm(). But it is having no effect. i will post the js file for validation

        <script type="text/javascript">
            function leavevali() {
                //alert('im called!');
                jQuery(document).ready(function () {
                    leaveval.init();
                });
            }
        </script>

    var leaveval = function () {
    
        var runSetDefaultValidation = function () {
            $.validator.setDefaults({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) { // render error placement for each input type
                    if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
                        error.insertAfter($(element).closest('.form-group').children('div').children().last());
                    } else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
                        error.appendTo($(element).closest('.form-group').children('div'));
                    } else {
                        error.insertAfter(element);
                        // for other inputs, just perform default behavior
                    }
                },
                ignore: ':hidden',
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error');
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').addClass('has-error');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                }
            });
        };
        var runLeaveFormValidator = function () {
            var form = $('#form1');
            var errorHandler = $('.errorHandler', form);
            form.validate({
                rules: {
                    ctl00$ContentPlaceHolder1$ddlltype: {
                        required: true
                    },
                    ctl00$ContentPlaceHolder1$txtdate: {
                        required: true
                    },
                    ctl00$ContentPlaceHolder1$ddlper: {
                        required: true
                    },
                    ctl00$ContentPlaceHolder1$txtreason: {
                        required: true
                    },
                    ctl00$ContentPlaceHolder1$ddljobc: {
                        required: true
                    },
                    ctl00$ContentPlaceHolder1$txtphone: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 10
                    }
                },
                submitHandler: function (form) {
                    errorHandler.hide();
                    form.submit();
                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    errorHandler.show();
                }
            });
        };
        return {
            //main function to initiate template pages
            init: function () {
                runSetDefaultValidation();
                runLeaveFormValidator();
            }
        };
    } ();

    How to tackle this. can anyone help me on this. Im stuck in this thing.

    Thanks in advance,

    Agaile

    Thursday, February 4, 2016 4:13 PM

Answers

  • User61956409 posted

    Hi Agaile,

    As far as I know, the elements will be add a specific class to indicate “has-error” if validating failed using jQuery validator. If you’d like to remove error message within form when you select a new option of dropdown, you could try to loop through elements and dynamically remove “has-error” class and error message.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 5, 2016 7:23 AM