I have some jQuery validation code I'm trying to apply to a form at this page: https://www.kevinmangles-magician.com/bookings.php. So I'm using jQuery with a PHP based website.
We're getting some empty forms returned despite the default validation and this app.js code should be fixing it. But the validation is not working.
I have the form being sent to sendmail.php in my code. The jQuery should stop it if there are any invalid or empty fields. There are no JS console errors but the class "needs-filled" is not being added to any fields.
/*Form Validation*/
/*
Created 09/27/09
Questions/Comments: jorenrapini@gmail.com
COPYRIGHT NOTICE
Copyright 2009 Joren Rapini
*/
// contact_name, email, message, accept
// Place ID's of all required fields here.
required = ["contact_name", "e_mail", "message", "accept"];
// If using an ID other than #email or #error then replace it here
email = $("#e_mail");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";
$("#contact-form").submit(function(){
//Validate required fields
for (i=0;i<required.length;i++) {
var input = $('#'+required[i]);
if ((input.val() == "") || (input.val() == emptyerror)) {
input.addClass("needs-filled");
input.val(emptyerror);
errornotice.fadeIn(750);
} else {
input.removeClass("needs-filled");
}
}
// Validate the e-mail.
if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("needs-filled");
email.val(emailerror);
}
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needs-filled")) {
return false;
} else {
errornotice.hide();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function() {
if ($(this).hasClass("needs-filled") ) {
$(this).val("");
$(this).removeClass("needs-filled");
$("p").click(function() {
$("#error").remove();
});
}
});
I'm expecting Red filled input boxes on the linked form and error messages within thwm.