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
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