jQuery Validation plugin using rules and messages when using .valid()

Question

When using the jQuery validation plugin, What is the right way to use rules and methods when using .valid(). I previously used to use .validate(), but since I had to keep a button outside the form, I was forced to switch to using .valid(). But now, I don't get those custom error messages like it used to before. How do I get this right?

I suspect, the way I'm using .valid() is wrong. I tried may things, but failed at all of them.

<!DOCTYPE HTML>
<html>
<head>

<title>Test Validation Plugin</title>

<script type="text/javascript" src="/resources/scripts/jq.js"></script>
<script type="text/javascript" src="/resources/scripts/temp.js"></script>
<script type="text/javascript" src="/resources/scripts/validate.js"></script>

<body>
    <form id="createAccount">
        <input type="text" class="titlea" name="titlea" value="" autocomplete="off">
        <label for="titlea" generated="true" class="error titlea" style=""></label>

        <br>
        <br>

        <input type="text" class="titleb" name="titleb" value="" autocomplete="off">
        <label for="titleb" generated="true" class="error titleb" style=""></label>

    </form>

    <br>

    <button id="btn">Process</button>

</body>
</html>

jQuery code

$('#btn').click(function() {
    rules: {
        titlea: {
            required: true,
            minlength: 5,
            maxlength: 24
        },
        titleb: {
            required: true,
            minlength: 5,
            maxlength: 24
        },
    },
    messages: {
        titlea: {
            required: 'Please choose a title',
            minlength: 'Title A should be at least 5 characters',
            maxlength: 'Title A cannot exceed 24 characters'
        },
        titleb: {
            required: 'Please choose a title',
            minlength: 'Title B should be at least 5 characters',
            maxlength: 'Title B cannot exceed 24 characters'
        },
    }

    ('#createAccount').valid() { // Is this where the problem is?
        // Submit the form using jQuery ajax
    }
});

Arun P Johny · Accepted Answer · 2014-07-22 05:30:26Z

1

There are many syntax issues, it should be

//register the validator
$('#createAccount').validate({
    rules: {
        titlea: {
            required: true,
            minlength: 5,
            maxlength: 24
        },
        titleb: {
            required: true,
            minlength: 5,
            maxlength: 24
        },
    },
    messages: {
        titlea: {
            required: 'Please choose a title',
            minlength: 'Title A should be at least 5 characters',
            maxlength: 'Title A cannot exceed 24 characters'
        },
        titleb: {
            required: 'Please choose a title',
            minlength: 'Title B should be at least 5 characters',
            maxlength: 'Title B cannot exceed 24 characters'
        },
    }
});

$('#btn').click(function (e) {
    //check validate
    if ($('#createAccount').valid()) {
        e.preventDefault()
    }
});

answered Jul 22, 2014 at 5:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

2 Comments

jmenezes Over a year ago

Ok. So, .validate and .valid need to be kept separate.

jmenezes Over a year ago

Works nicely. Thanks for helping.

Collectives™ on Stack Overflow

jQuery Validation plugin using rules and messages when using .valid()

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