JQuery Validation use different divs for different input elements for errors, and multiple error classes

Question

I'm using JQuery Validation on my form, and I'm trying to get the input elements to show a red border if the input is invalid, and also show the error message underneath the appropriate input element.

My HTML code is basically this:

<div id="formContainer">
<form id="mainForm" action="action.php" method="post">
    <input class="formTextBox" type="url" name="website" placeholder="website" required />
    <input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
    <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Snapshot my site</span> </button>
</form>
</div>

I've tried adding specific DIVs after the form (still in #formContainer), that will get populated with the error using the errorPlacement option. Inside the function I check the element's name attribute, and append the error to its corresponding div... but when I continue typing, or clicking between inputs, the error message keeps repeating and repeating and no error ever gets cleared (I see the same error message many times, one underneath the other).

I've tried putting each input element inside its own div (with a fixed width), and set the errorElement to DIV, so when JQuery Validation creates that new div and appends it next to the input element, it will get pushed underneath... but that caused some design issues, and I'd prefer the 2 error containers to be in the #formContainer div (and it seems a little bit wonky to do it that way).

Also, what do I do if need to style both the error on the input element, and the error message DIVs?

Here's a little illustration of what I had in mind: enter image description here

Thanks!

Hey, thanks a bunch. That helped me figure something out :) I tried that approach earlier, but had some layout issues. I did some more digging around after seeing you suggest this same method, and I fixed some issues in my CSS and now the red bars appear correctly under the input fields. Still wondering about styling 2 different error classes if anyone knows how to do it. Thanks again. — itai alter
– itai alter, Commented Mar 4, 2014 at 16:01
You should have shown your attempt out in the open in the OP, not hidden in a jsFiddle and not in comments. — Sparky
– Sparky, Commented Mar 4, 2014 at 16:37

Arun P Johny · Accepted Answer · 2014-03-04 17:11:15Z

Try

<div id="formContainer">
    <form id="mainForm" action="action.php" method="post" novalidate>
        <div class="input-control">
            <input class="formTextBox" type="url" name="website" placeholder="website" required />
        </div>
        <div class="input-control">
            <input class="formTextBox" type="email" name="email" placeholder="e-mail" required />
        </div>
        <button type="submit" class="buttonForm" id="submitBtn"> <span id="buttonContent">Submit</span> 
        </button>
    </form>
</div>

then

#formContainer {
    vertical-align: top;
}
.input-control {
    display: inline-block;
    vertical-align: top;
}
div.error {
    display: block;
    background-color: red;
    color: white;
}
input.error {
    border: 1px solid red;
}
.formTextBox {
    width: 210px;
    background-color: white;
    color: black;
}

and

jQuery(function ($) {
    var validator = $('#mainForm').validate({
        rules: {},
        messages: {},
        errorElement: "div"
    });
});

Demo: Fiddle

Collectives™ on Stack Overflow

JQuery Validation use different divs for different input elements for errors, and multiple error classes

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related