Validating for digits in a textbox with jQuery Validation

Question

I have a form with a textbox that is validated for digits only. The errors are displayed in a jQueryUI modal window. However, when a non-digit is entered into the textbox, I end up with the same error message multiple times. And the more non-numeric values I enter, the more duplicates I get. Any suggestions would be greatly appreciated.

Here is the initial validation

enter image description here

Here is the validation partially fixed

enter image description here

Here is the validation message when I enter a non-numeric value. Notice the multiple Please enter only digits messages.

enter image description here

Here is the code.

var valForm = function(kit_id) {
    var form = $("#frm_" + kit_id);
    var strErrors = "<ul>";

        form.validate({
            errorClass: "error-class",
            errorElement: "div",
            errorPlacement: function(error, element) {
                console.log(error);
                strErrors += "<li>" + error[0].innerHTML + "</li>";
                $("#error_modal").html("");
                $("#error_modal").html(strErrors + "</ul>");
            }
        });

        form.find('input[name^="kit_name_"]').each(function () {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Please enter a name."
                }
            })
        });

        form.find('input[name^="kit_desc_"]').each(function() {
            $(this).rules("add", {
                required: true,
                messages: {
                    required: "Please enter a description."
                }
            });
        });

        form.find('input[name^="kit_qty_"]').each(function() {
            $(this).rules("add", {
                required: true,
                digits: true,
                messages: {
                    required: "Please enter a quantity."
                }
            });
        });

        if (! form.valid()) {
             $("#error_modal").dialog().siblings(".ui-dialog-titlebar").remove();
            strErrors = "";
        } else {
            form.submit();
        }
    };

Every time it calls the errorPlacement function you append the current error to strErrors. Nothing ever removes old errors from this, so it just grows and grows. — Barmar
– Barmar, Commented Jul 20, 2015 at 20:32
See this example on the jqueryvalidation.org website: jqueryvalidation.org/files/demo/errorcontainer-demo.html — Barmar
– Barmar, Commented Jul 20, 2015 at 20:35

Sparky · Accepted Answer · 2015-07-20 20:53:26Z

Your problem is caused by your implementation of errorPlacement...

errorPlacement: function(error, element) {
    console.log(error);
    strErrors += "<li>" + error[0].innerHTML + "</li>";
    $("#error_modal").html("");
    $("#error_modal").html(strErrors + "</ul>");
}

By default, the plugin creates the error message element and places it in the page as per whatever errorPlacement function is in place. Then whenever the error changes or clears, the plugin automatically updates the content of the error message element and toggles it. Your code is continually creating a new message, and the plugin cannot find an error message element to update or toggle.

In other words, errorPlacement is only designed to place one error message at a time for each input element. You're trying to force it into something else entirely.

Do you want an error summary in your modal? If so, then you need to refer to the documentation and use the showErrors option, which was designed for creating a custom error summary.

Collectives™ on Stack Overflow

Validating for digits in a textbox with jQuery Validation

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related