I recently put together a form enhanced using the Jquery framework and using a validation plugin in my contact page for a Website I’m building. There are two things I need to do to finish it and make it work like it should and/or like I want it to. First of all, I need to enter some code that will automatically generate a confirmation e-mail to the user upon clicking the submit button. I would also like it to generate an e-mail to me at the same time notifying me and containing the users information. The other thing I need to do is to get it to work in conjunction with a server-side script that will validate the form from there also and generate the emails from there.
I have a CGI script that works well for validating and generating the email, but I can’t get it to work with the Jquery form. I don’t want to revert to using the CGI script strictly because I like the way Jquery doesn’t require the page to reload or require me to have two extra pages; one for the thank you page and the other for the error page if the required fields aren’t filled in properly. When you hit the submit button it simply generates the thank you message on the spot without reloading the page - sweet.
I really don’t have a clue on how to implement this so I would appreciate at least a point in the right direction. Here is the link to the contact page on the Website: http://sitekitchen.us/morganaircraft/contact.html
I can’t seem to find the exact plugin I’m using, but it is called jquery.validate.pack.js and I believe I got it here: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Here is the JavaScript enhancement script, I am just using a simple “Feedback” form so the pertinent info is toward the bottom:
Thanks!
$(document).ready(function() {
// Password Strength
if ($('#sign-up').size()) {
$.getScript(
'js/jquery.passroids.min.js',
function() {
$('form').passroids({
main : "#password"
});
}
);
}
// Selectbox styling
if ($('form select').size()) {
$.getScript(
'js/jquery.selectbox.min.js',
function() {
$('select').selectbox();
// Wrap inputs with styling helper
$('input.selectbox').each(function() {
$(this).wrap('<span id="wrapper_' + $(this).attr('id') + '" class="selectbox-input-wrapper"></span>');
});
}
);
}
/*
* Form Validation
*/
// Set Defaults
jQuery.validator.setDefaults({
errorElement : 'a',
wrapper : 'li',
errorLabelContainer : '#form-messages ul',
focusInvalid: false,
onfocusout: false,
highlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0),
existingIcon = $('img.icon', errorContainer);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace any existing icon with error icon
if (existingIcon.size()) {
existingIcon.replaceWith('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Otherwise append to container
else {
errorContainer.append('<img src="images/icon-error.gif" alt="error" class="icon" />');
}
// Highlight field
$(element).addClass(errorClass);
},
unhighlight: function(element, errorClass) {
var errorContainer = $(element).parents('div').eq(0);
// Account for groups of questions
if ($(element).parents('.group').size()) {
errorContainer = $(element).parents('.group');
}
// Replace icon with that of success
if ($(':input.error', errorContainer).size() <= 1) {
$('img.icon', errorContainer).replaceWith('<img src="images/icon-valid.gif" alt="Valid" class="icon" />');
}
// Unhighlight field
$(element).removeClass(errorClass);
},
showErrors: function(errorMap, errorList) {
var numErrors = this.numberOfInvalids();
this.defaultShowErrors();
// Populate/update error message
if (!$('h2', errorContainer).size()) {
errorContainer.prepend('<h2></h2>');
}
if (numErrors) {
$('h2', errorContainer).html('<strong>Oops!</strong> Your form contains ' + numErrors + " error" + ((numErrors == 1) ? '' : 's') + ':');
$(this.currentForm).removeClass('valid');
}
// Success is ours!
else {
$('h2', errorContainer).text('All errors have been corrected, please continue');
$(this.currentForm).addClass('valid');
}
// Setup links
$('a', errorContainer).each( function() {
var el = $(this),
fieldID = el.attr('htmlfor'),
field = $('#' + fieldID);
// Add href attribute to linsk
el.attr('href', '#' + fieldID);
// Focus on click
el.bind('click', function() {
field.trigger('focus');
$('html,body').animate(
{scrollTop: field.offset().top - 20}, 100
);
return false;
});
});
},
submitHandler: function(form) {
$(form).hide();
$('<p class="introduction">Thank you for your interest! A confirmation email has been sent to you. If a response is required I will get back to you within two business days or sooner. Thank you!</p>')
.insertBefore(form)
.show();
$('html,body').animate(
{scrollTop: $("div#form-messages").offset().top}, 1000
);
}
});
// Add a placeholder for form messages
var errorContainer = $('<div id="form-messages"><ul></ul></div>').hide();
errorContainer.insertBefore('fieldset div:first');
// Bind event to invalid form submission
$("form").bind("invalid-form.validate", function(e, validator) {
errorContainer.show();
$('html,body').animate(
{scrollTop: errorContainer.offset().top - 20}, 100
);
errorContainer.focus();
});
// Override default messages
$.extend($.validator.messages, {
required : "This field is required",
email : "Please enter a valid email",
digits : "Please enter a numeric value"
});
/*
* Initiate Validation Plugin
*/
$('#sign-up form').validate({
rules : {
// Email
'email' : {
required : true,
email: true
},
// Password
'password' : {
required : true
},
// Password Confirmation
'password_confirmation' : {
required : true,
equalTo : '#password'
},
// Profile Link
'profile_link' : {
required : true
},
// Terms of Service
'agree_tos' : {
required : true
}
},
messages : {
'email' : {
required : 'Enter your email address',
email : 'Enter a valid email address, for example [email]user@example.com[/email]'
},
'password' : {
required : 'Ensure your passwords match'
},
'password_confirmation' : {
required : 'Confirm your password',
equalTo : 'Ensure your passwords match'
},
'profile_link' : {
required : 'Enter a link for your profile'
},
'agree_tos' : {
required : 'You must agree to the terms of service'
}
}
});
$('#feedback form').validate({
rules : {
// Name
'name' : {
required : true
},
// Email
'email' : {
required : true,
email: true
},
// Comments
'comment' : {
required : true
}
}
});
});