Profile:Edit with jquery.validate

Question

Does anyone have jquery.validate working with Profile:Edit?

I have a form set up with jquery validation working using jquery.validate.js, everything working as expected.

As soon as I try to use the {exp:profile:register}{/exp:profile:register} tags the JS stops working.

I've stripped my form down to a single element to try and identify where I am going wrong. If I comment-out the exp:profile:register tags the JS works, but with the tags in-place Profile:edit registration works but no JS.

HTML:

{exp:profile:register id="register" return="account"}
<h1>Register</h1>
<legend>Login details</legend>
<form class="form-horizontal" id="signupForm" method="post" action="">
<label for="email">Email </label>
<input id="email" name="email" type="email" class="required form-control">
<input class="btn btn-default" type="submit" value="Register" id="submit">
</form><!-- form -->
{/exp:profile:register}

JS:

$().ready(function() {
    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
        },
        errorPlacement: function(error, element) {
        // Append error within linked label
        $( element )
            .closest( "form" )
                .find( "label[for='" + element.attr( "id" ) + "']" )
                    .append( error );
        },
        errorElement: "span",
        messages: {
            email: "Please enter a valid email address"
        }
    });
});

Any help would be massively appreciated.

Cheers

Answer 1

The profile:register form extends the channel:form tag (docs), and by default the Channel Form includes a copy of jQuery. Sunce your validation is working on a raw form, I assume this means you're already loading jQuery into your template, so the conflicting version of jQuery is likely what's causing the error.

To fix this, add include_jquery="no" as a parameter on your profile:register tag.