Home/ Questions/Q 7842387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T16:18:30+00:00

I am using jQuery Validator to validate user input. I am trying to figure

  • 0

I am using jQuery Validator to validate user input. I am trying to figure out when should i clear the custom error icon displayed next to the invalid element. The code posted below keeps appending the error icon. I tried to clear it in showErrors event, but no luck.

 $("#form1").validate({
                onfocusout: false,
                onKeyUp: false,

                rules: {

                 txtDate:{
                    required: true
                 },
                 txtType:{                   
                      required: true
                 },
                 ddlTime:{                   
                      required: true
                 }
               },
               messages: {
                ddlTime: {                   
                      required: "Please select an option for Time"
                 },
                 txtDate:{
                    required: "<br>Please enter valid date"
                 },
                 txtType: {                   
                      required: "<br>Please Enter valid type"
                 }
               },
               errorPlacement: function(error, element) {
                    error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
                    $('<div class="errorIcon"></div>').insertAfter(element);
                  }
             });

This is how my css looks like:

label.error {
    color: red;
    font-style: italic
}

    .errors { color: red; }
    .errorIcon 
    { 
        background: url(../errorIcon.png); 
        width: 16px; 
        height: 16px;
        display:inline;

    }

This is how my HTML Looks Like:

<body>
<html>
<head runat="server"></head>

        <form id="form1" runat="server">

            <ul id="dvErrorSummary" name="dvErrorSummary" class="errors"></ul>

             <select id="ddlTime" name="ddlTime" </select>
             <input id="txtDate" name="txtDate" />
             <input id="txtType" name="txtType" />

       </form>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is the piece, where you are adding the error message container

    errorPlacement: function(error, element) {
                    error.wrap("<li></li>").appendTo($("#dvErrorSummary")); 
                    $('<div class="errorIcon"></div>').insertAfter(element);
                  }

    May be use can check the length property to insert errorIcon only if the value is less than 1.

    • 0