0

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

  • Does the profile:register tag include it own javascript on the page maybe? Any errors in the browser console? – Derek Hogue Nov 18 '15 at 21:02
  • In the error console I get the following when trying to use the Profile:Edit tags: Uncaught TypeError: $(...).validate is not a function – James Olver Nov 19 '15 at 17:59
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.