Question

I use Validate.Js to validate my HTML form using jQuery & it works perfectly.
But I need to show the errors beside each field, instead it shows a summary of all errors at the top of the page.

HTML:

<div class="success_box">All of the fields were successfully validated!</div>
<div class="error_box"></div>

    <form name="example_form">
    <label for="req">Required field:</label>
    <label for="alphanumeric">Alphanumeric field:</label>
    <div id="AlphaNumeric"></div>

    <input name="req" id="req" />
    <input name="alphanumeric" id="alphanumeric" />

    <label for="password">Password:</label>
    <label for="password_confirm">Password Confirmation (match password):</label>

    <input name="password" id="password" type="password" />
    <input name="password_confirm" id="password_confirm" type="password" />

    <label for="email">Email:</label>
    <label for="minlength">Min length field (min. 8 chars):</label>

    <input name="email" id="email" />
    <input name="minlength" id="minlength" />

    <label for="tos_checkbox">Required checkbox (example: Terms of Service)</label>
    <input name="tos_checkbox" id="tos_checkbox" type="checkbox" />

    <button class="button gray" type="submit" name="submit">Submit</button>
</form> 

JavaScript:

    new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
    }, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
    }, {
    name: 'password',
    rules: 'required'
    }, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
    }, {
    name: 'email',
    rules: 'valid_email'
    }, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
    }, {
    name: 'tos_checkbox',
    display: 'terms of service',
    rules: 'required'
    }], function(errors, event) {
    var SELECTOR_ERRORS = $('.error_box'),
        SELECTOR_SUCCESS = $('.success_box');

    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }

        SELECTOR_SUCCESS.css({ display: 'none' });
        SELECTOR_ERRORS.fadeIn(200);
    } else {
        SELECTOR_ERRORS.css({ display: 'none' });
        SELECTOR_SUCCESS.fadeIn(200);
    }

    if (event && event.preventDefault) {
        event.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
    });

Is there a method to change the display style? And are there any better scripts that can do this?

Answer 1

Quote: “But I need to show the errors beside each field, instead it shows a summary of all errors at the top of the page. … … Is there a method to change the display style?”

NO. As per documentation, there is no listed option for how to place the error messages.

Since the plugin’s description says, “Modeled off the CodeIgniter form validation API”, that tells me that the whole point is to show error messages in a single summary box above the form just like CodeIgniter validation does. You simply chose the wrong plugin if you want individual error messages next to each field.

Quote: “… And are there any better scripts that can do this?”

YES. The jQuery Validate plugin is developed by someone from the jQuery team. There is a huge base of support and tons of options.

“The plugin is written and maintained by Jörn Zaefferer, a member of
the jQuery team, lead developer on the jQuery UI team and maintainer
of QUnit. It was started back in the early days of jQuery in 2006, and
updated and improved since then.”

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/

By default, errors are shown “next to” each field.

See demo: http://jsfiddle.net/UGyXP/

jQuery:

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                email: true
            }
        }
    });

});

HTML:

<form id="myform">  
     <input type="text" name="field1" />
     <input type="text" name="field2" />
     <input type="submit" />
</form>