Question

I am using the jQuery validate plugin to validate my inputs in a form.

The problem is that when a field is mandatory it shows this:

This field is required. 

Instead I would like to show a little icon just after the input, replacing that This field is required.

This is the code I am using:

echo "<script type=\"text/javascript\">
$(document).ready(function() {
    $('#submForm').validate({ 
        submitHandler: function(form) {
            // Do cleanup first
            $('input:text[value=\"\"]', '#submForm').remove();
            var serialized = $('#submForm').serialize();
             $.get('".$site['url']."modules/yobilab/copyright/classes/DO_submission.php', serialized);
            window.setTimeout('location.reload()', 8000);
            return false;
            form.submit(); 
        }
    })
});

Could you help me please?

Thank you!

Answer 1

$('#form').validate({
    rules: {
        field1: { required: true } },
    messages: {
        field1: { required : "Message that shows when required field isnt filled"} },
    submitHandler: {
        // whatever } 
});

Use the plug-in like this in order to have easier message / rule placement.

http://docs.jquery.com/Plugins/Validation <- check the possible rules and whatnot here. Not sure if the jquery version changes that much in this case.

EDIT: If you want to put an image instead of a message, you can just put the html code instead of the string message.

Ex:

field1: {
    required: "<img src='blabla.jpeg'>" }