Jquery Validation with errorContainer

Question

I'm using the Jquery Validation script found at http://jqueryvalidation.org/ and am wanting it setup so when you click a button (not a submit button!) it checks the form for validation. If there is an error, it displays the error next to the fields that have the error, but also displays a message on the bottom of the form saying there are errors above that need to be fixed.

I can't seem to get the bottom message working. I'm trying to use the errorContainer that Jquery Validation has but it doesn't seem to work.

HTML:

<form id="myform" method="post">
    <p>
        <label for="emailAddress">Email Address*</label>
        <input id="emailAddress" name="emailAddress" class="Span12 EmailAddress" type="email" data-rule-required="true" data-rule-email="true" data-rule-minlength="5" data-msg-required="Provide an email" data-msg-email="Provide a proper email" data-msg-minlength="Email must be at least 5 characters" />
    </p>
    <p>
        <input id="SendMessage" type="button" value="Send Message" class="Button ButtonLarge" />
        <div class="form-errors">
            <h4>There are errors in your form submission, please see details in the form!</h4>
        </div>
    </p>
</form>

Jquery:

$(document).ready(function() {
    $('#SendMessage').click(function () {
        $("#myform").valid({
            errorContainer: ".form-errors"
        });
    });
});

I have a JSFiddle using this code here:

http://jsfiddle.net/bluecaret/Qh485/

rogMaHall · Accepted Answer · 2013-10-24T01:35:44.777

2

The valid() method doesn't accept parameters and only returns a boolean (link), so if you still want to use valid() you'll have to go about it in different way.

I made a quick answer to your problem just by using an if statement and hiding or showing the message when the email is valid or invalid:

$(document).ready(function() {
    $('#myform').validate({
        //any parameters you want to add
    });
    $('#SendMessage').click(function () {
        if(!($("#myform").valid())){
            $('.form-errors').show();
            return false;
        } else {
            $('.form-errors').hide();
        }      
    });
});

Working fiddle

edited Oct 24 '13 at 01:35

answered Oct 23 '13 at 21:36

rogMaHall

681
4
9

Hm. That would work. The only reason I was using the vaild() was because I read somewhere else that it was needed to make the form work when a button is clicked (instead of a submit button). Putting validate() didn't work. Maybe there's a way to make it work for a button while using validate()? I might want other parameters later. – BlueCaret Oct 23 '13 at 21:38
1

If that's the case, you can run `validate()` before the click function to make use of any other parameters you might want to add in the future, and then run return false in the if statement. I'll update my code. – rogMaHall Oct 23 '13 at 21:45
1

@BlueCaret, Important to remember that `.validate()` is the method for plugin _initialization_ and `.valid()` is an optional method for programatically _testing_ the form. – Sparky Oct 24 '13 at 18:25

Jquery Validation with errorContainer

1 Answers1