JQuery - Showing Wrong and Right icons for Validation

Question

I have a form and JQuery validation. Everything works fine. Instead of showing messages, I want to show icons.

The wrong icon is working, but I have some problem with

Answer 1

Unfortunately, the validation in the Fiddle is not always working for correct validation, but you can try to adjust $('.valid').after('<div class="valid"></div>'); to $('.valid').after('<div class="validicon"></div>'); and rename your class valid to validicon. Otherwise the input that will be set to class valid will be applied the css with width 15px etc and therefore not be visible.

Update: For the follow-up issues mentioned in the comments: You can try to add display:inline-block; to class erroricon. And as kind of second workaround - if it's ok for you to display kind of an erroricon inside the input instead of next to it, an easy way would be this:

input.valid {
   background-image: url('http://dummyimage.com/15x15/00ff11/fff.png&text=+');
   background-position: top right;
   background-size: 15px 15px;
   background-repeat: no-repeat;
}

Update 2: I've just checked the options for the validate plugin. It's possible to add a label for valid elements by extending your settings for validate() like this:

$("#TestForm'").validate({
   // keep your other settings/options for rules
   // and messages here and add:
  success: function(label) {  
   label.addClass("valid");
  }
});  

As mentioned in the comments, it's only possible to use css pseudo elements like :after or :before for container elements, not for elements like input or image. Good explanation for this provided at this comment by Robert Koritnik: Can I use the :after pseudo-element on an input field?. In case it's possible to add a label with approach suggested above, you can add css for label.valid:after {... in the same way as for label.error:after.

Update 3: For the next approach mentioned in the comments by OP - as adding the label with class valid doesn't seem to work - I just adjusted the Fiddle.
HTML adjustment - I moved the <span class="add"></span> after the <input> instead of wrapping the input in the span.
jquery adjustment:

if ($('#TestForm input').hasClass('valid')) {
  $('.add').addClass('validicon');
 } else {
  $('.add').removeClass('validicon');
}

As mentioned, if the input is valid, the Fiddle throws a network error 403 CSRF verification failed, but it should work on the actual site.

Update 4: New approach using the options of jquery validate instead of trying a workaround. Adjusted Fiddle to display valid icon on submit without sending the form.

HTML:

<form id="TestForm">
 <input type="text" id="txtIn" name="txtIn" />
 <p></p>
 <button id="submit">Submit</button>
</form>

CSS:

label {
 display: inline-block;
 margin-left:10px;
 width: 15px;
 height: 15px;
}
label.error {
 background-color: red;
}
label.valid {
 background-color: blue;
}

jquery:

$(document).ready(function () {

  var messages = {
    'txtInRequired': ""
  };

  $('#TestForm').validate({
    rules: {
        txtIn: {
            required: true,
            rangelength: [8, 16]
        }
    },
    messages: {
        txtIn: messages.txtInRequired
    },
    onfocusout: function (element) {
        this.element(element);
    },
    success: function (label, element) {
        if ($(element).hasClass("valid")) {
            label.addClass("valid");
        }
    },
    submitHandler: function (form) {
        alert('form is valid');
        return false;
    },
    focusInvalid: false,
    focusCleanup: true,
    onkeyup: false
  });
});

For reference for these adjustments: http://jqueryvalidation.org/category/plugin/

Short explanation:
Setting focusInvalid: false: The input won't get focus when the form was submitted and the input is invalid, necessary to combine with focusCleanup: true : when the input gets focus, validation is "cleaned", so the error or icon label won't be displayed. onkeyup: false : on enter the input is not validated. And finally: the success: function (label, element) { .. } adds class valid to the label in case the element is valid.

Reference: http://jqueryvalidation.org/validate/