CODEWITHSUNDEEP
jqueryjquery-validate
BlueCaret
BlueCaret

Reputation: 5030

Jquery Validation with errorContainer

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/

Upvotes: 2

Views: 1806

Answers (1)

rogMaHall
rogMaHall

Reputation: 691

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

Upvotes: 2

Related Questions