Validating for digits in a textbox with jQuery Validation -

i have form textbox validated digits only. errors displayed in jqueryui modal window. however, when non-digit entered textbox, end same error message multiple times. , more non-numeric values enter, more duplicates get. suggestions appreciated.

here initial validation

here validation partially fixed

here validation message when enter non-numeric value. notice multiple please enter digits messages.

here 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 name."                 }             })         });          form.find('input[name^="kit_desc_"]').each(function() {             $(this).rules("add", {                 required: true,                 messages: {                     required: "please enter description."                 }             });         });          form.find('input[name^="kit_qty_"]').each(function() {             $(this).rules("add", {                 required: true,                 digits: true,                 messages: {                     required: "please enter quantity."                 }             });         });          if (! form.valid()) {              $("#error_modal").dialog().siblings(".ui-dialog-titlebar").remove();             strerrors = "";         } else {             form.submit();         }     }; 

your problem caused 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, plugin creates error message element , places in page per whatever errorplacement function in place. whenever error changes or clears, plugin automatically updates content of error message element , toggles it. code continually creating new message, , plugin cannot find error message element update or toggle.

in other words, errorplacement designed place 1 error message @ time each input element. you're trying force else entirely.

do want error summary in modal? if so, need refer documentation , use the showerrors option, designed creating custom error summary.