I am having some issues trying to submit an HTML form using jQuery Validate. I am wanting to use the default HTML submit attribute on an input to redirect the user, yet my submit handler seems to be preventing me from doing so.
You will see the name attribute "retURL" on an input at the top of the form which redirects to Google.
I'm wanting to use jQuery validate to check if the form is valid then action the HTML submit to redirect the user to the desired link.
Here is my mark up:
<form id="testform" name="testform" class="test-form validate" method="post" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" data-script="/static/js/form-ebuLead-min.js">
<input type="hidden" name="formID" value="nPpNZLT_U0qn4QjQnfgSdw"/>
<input type="hidden" name="retURL" value="http://www.google.com">
<input type="hidden" name="oid" value="00D2000000007y2">
<input type="hidden" name="00N20000002A4au" type="text" value="<please populate with the page referrer information>"/>
<div class="smGrid12">
<span class="form-heading">Register your interest</span>
<p>Give us a few details on how we can help and we'll get back to you.</p>
</div>
<div class="smGrid12 lgGrid6">
<input id="businessName" name="businessName" type="text" tabindex="201" maxlength="50" placeholder="Business name">
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 lgGrid6">
<input id="yourName" name="yourName" type="text" tabindex="202" maxlength="50" placeholder="Your name">
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 lgGrid6">
<span class="form-sub-heading">Please contact me by</span>
<div class="smGrid6 no-pad pad-right">
<label for="email-radio" class="branded-radio-select is-selected">
Email
<input id="email-radio" name="contact-method_${asset.id}" type="radio" checked="checked" tabindex="203" value="email">
</label>
</div>
<div class="smGrid6 no-pad pad-left">
<label for="phone-radio" class="branded-radio-select">
Phone
<input id="phone-radio" name="contact-method_${asset.id}" type="radio" tabindex="204" maxlength="30" value="phone">
</label>
</div>
</div>
<div class="smGrid12">
<input id="emailAddress" class="email-input" name="emailAddress" type="email" tabindex="205" placeholder="Email Address">
<input id="phoneNumber" class="phone-input" name="phoneNumber" type="tel" tabindex="206" maxlength="30" placeholder="Phone Number">
<span class="error-msg email-phone-error-msg errorPlacement"></span>
</div>
<div class="smGrid12">
<textarea id="question" class="placeholderText" name="question" tabindex="207" rows="9" maxlength="300" placeholder="Specific Question"></textarea>
<span class="error-msg errorPlacement"></span>
</div>
<div class="smGrid12 mdGrid6">
<div class="branded-dropdown-select-wrap">
<select id="numberOfEmployees" class="branded-dropdown-select" name="numberOfEmployees" tabindex="208">
<option value="" selected disabled style="display:none;">Number of employees</option>
<option value="0-10">Less than 10 staff</option>
<option value="10-100">Between 10-100</option>
<option value="100+">100+ people</option>
</select>
</div>
</div>
<div class="smGrid12 mdGrid6">
<div class="branded-dropdown-select-wrap">
<select id="businessLocation" name="businessLocation" tabindex="209">
<option value="" selected disabled style="display:none;">Your business location</option>
<option value="Northern">Auckland</option>
<option value="Waikato">Bay of Plenty</option>
<option value="Southern">Canterbury</option>
<option value="Waikato">Gisborne</option>
<option value="Central">Hawke's Bay</option>
<option value="Central">Manawatu-Wanganui</option>
<option value="Southern">Marlborough</option>
<option value="Northern">Northland</option>
<option value="Southern">Otago</option>
<option value="Southern">Southland</option>
<option value="Central">Taranaki</option>
<option value="Southern">Tasman-Nelson</option>
<option value="Waikato">Waikato</option>
<option value="Central">Wellington</option>
<option value="Southern">West Coast</option>
</select>
</div>
</div>
<div class="smGrid12">
<input type="submit" name="submit" class="submit_form" value="Submit" tabindex="210" />
</div>
Here is my jQuery:
EbuLeadForm.prototype.setUpValidationRules = function () {
var self = this;
$j(self.formID).validate({
debug: true,
onclick: false,
onfocusout: false,
ignore: ":hidden", // Forces override of hidden elements!
rules: {
businessName : {
required: true,
minlength: 1
},
yourName : {
required: true,
minlength: 1
},
emailAddress : {
required: true,
email: true
},
phoneNumber : {
required: true,
number: true,
minlength: 6
},
question : {
required: true,
minlength: 1
}
},
messages: {
businessName: {
required: "Please enter your business name"
},
yourName: {
required: "Please enter your name"
},
emailAddress: {
required: "Please enter your email address"
},
phoneNumber: {
required: "Please enter your phone number",
number: "Please enter your phone number without spaces"
},
question: {
required: "Please enter your question"
}
},
errorPlacement : function(errorMsg, element) {
if (element[0].nodeName === 'SELECT' && element.hasClass('error')) {
element.next().addClass('error');
} else if (element[0].nodeName === 'SELECT') {
element.next().removeClass('error');
}
errorMsg.appendTo( element.parent().find('.errorPlacement') );
},
submitHandler : function (form) {
console.log("Form Submitted");
}
});
};
type="submit"... not asubmitattribute.