Show validation Error beside Fields Javascript

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?

You will have to modify Validate.js

howderek
– howderek

2013-02-03 16:44:50 +00:00
Commented Feb 3, 2013 at 16:44 — howderek
– howderek, Commented Feb 3, 2013 at 16:44

Sparky · Accepted Answer · 2013-02-03 17:23:43Z

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>

edited Feb 3, 2013 at 17:23

answered Feb 3, 2013 at 16:45

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sana Joseph Over a year ago

I read some bad reviews regarding Jquery Validation, is that true ?

Sparky Over a year ago

@SanaJoseph, no, it's not true. IMO, somebody who was part of the jQuery development team knows what they're doing when writing a jQuery plugin.

Collectives™ on Stack Overflow

Show validation Error beside Fields Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related