I feel we’re getting close lol.
I’ve made those updates and found a couple additional issues in there. I have the errors now showing on the html page when a required field isn’t filled out, which is a huge step forward!
It seems I’m at the last issue after all your help and that is this: Now the form will only be submitted if I fill out ALL the fields, even through I only want to require 4 of them (policyName, homePhone, workPhone). This is got me wanting to poke out my eyes because i know it’s in my JS code (at least i think it is) but I thought I commented out all the code requiring the optional fields:
`
$(document).ready(function() {
$('#agents input:submit').click(function() {
$('#agents form').attr('action', 'http://' + document.domain + '/agents/php/feedback_custom.php');
$('#agents form').submit();
});
$('form #response').hide();
$('#submit').click(function(e) {
// prevent forms default action until
// error check has been performed
e.preventDefault();
// grab form field values
var valid = '';
var is_errors = '';
var policyNameResponse = '';
var homePhoneResponse = '';
var workPhoneResponse = '';
/*
var filerNameResponse = '';
var policyResponse = '';
var insCompanyResponse = '';
var agentNameResponse = '';
var vinResponse = '';
var dateOfLossResponse = '';
var yearResponse = '';
var makeResponse = '';
var modelResponse = '';
var bodyStyleResponse = '';
var damagedGlassResponse = '';
*/
var antiSpamResponse = '';
var required = ' is required.';
//Custom Information
var name = $('form #policyName').val();
var homePhone = $('form #homePhone').val();
var workPhone = $('form #workPhone').val();
var antiSpam = $('form #antiSpam').val();
/*
var filerName = $('form #filerName').val();
//Insurance Information
var policy = $('form #policy');
var insCompany = $('form #insCompany').val();
var agentName = $('form #agentName').val();
var vin = $('form #vin').val();
var dateOfLoss = $('form #dateOfLoss').val();
//Vehicle Information
var year = $('form #year').val();
var make = $('form #make').val();
var model = $('form #model').val();
var bodyStyle = $('form #bodyStyle').val();
var vin = $('form #vin').val();
//var damagedGlass = $('form #damagedGlass').val();
//Spam Info
var honeypot = $('form #honeypot').val();
var humanCheck = $('form #humanCheck').val();
var antiSpam = $('form #antiSpam').val();
var is_errors = false;
// perform error checking
//Customer
//Insurance
if (policy == '' || policy.length <=5) {
policyResponse += '<p>Policy number' + required + '</p>';
is_errors = true;
}
if (insCompany == '' || insCompany.length <3) {
insCompanyResponse += '<p>Insurance Company Required</p>';
is_errors = true;
}
if (agentName == '' || agentName.length <= 6) {
agentNameResponse += '<p>Please include your name in the ' + '"Sent By"' + 'field</p>';
is_errors = true;
}
if (vin == '' || vin.length <= 3) {
vinResponse += '<p>Cause of loss' + required + '</p>';
is_errors = true;
}
//Vehicle
if (year == '' || year.length < 4) {
yearResponse += '<p>Vehicle year (ex: 2011)' + required + '</p>';
is_errors = true;
}
if (make == '' || make.length <=2) {
makeResponse += '<p>Vehicle make' + required + '</p>';
is_errors = true;
}
if (model == '' || model.length < 2) {
modelResponse += '<p>Vehicle model' + required + '</p>';
is_errors = true;
}
if (bodyStyle == '') {
bodyStyleResponse += '<p>Please select a body style</p>';
is_errors = true;
}
if (vin == '' || vin.length <= 16) {
vinResponse += '<p>Vin number' + required + '</p>';
is_errors = true;
}
if (damagedGlass == '') {
damagedGlassResponse += '<p>Damaged Glass' + required + '</p>';
is_errors = true;
}
*/
if (name == '' || name.length <= 2) {
policyNameResponse += '<p>Policy holder name' + required +'</p>';
is_errors = true;
}
if (homePhone == '' || homePhone.length < 7) {
homePhoneResponse += '<p>Home phone' + required + '</p>';
is_errors = true;
}
if (workPhone == '' || workPhone.length < 7) {
workPhoneResponse += '<p>Wome phone' + required + '</p>';
is_errors = true;
}
if (antiSpam == '' || antiSpam > 20) {
antiSpamResponse += '<p>Anti-Spam' + required + '</p>';
is_errors = true;
}
/*if (honeypot != 'http://') {
valid += '<p>Spambots are not allowed.</p>';
is_errors = true;
}
if (humanCheck != '') {
valid += '<p>A human user' + required + '</p>';
is_errors = true;
} */
// let the user know if there are erros with the form
if (valid != '' || is_errors) {
//#####Required fields
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
'<strong>Please correct the form errors.</strong>' + '</div>'
).fadeIn('fast').focus();
if (policyNameResponse != '') {
$('form #policyNameResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
policyNameResponse + '</div>'
).fadeIn('fast');
}
if (homePhoneResponse != '') {
$('form #homePhoneResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
homePhoneResponse + '</div>'
).fadeIn('fast');
}
if (workPhoneResponse != '') {
$('form #workPhoneResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
workPhoneResponse + '</div>'
).fadeIn('fast');
}
if (antiSpamResponse != '') {
$('form #antiSpamResponse').removeClass().addClass('error')
.html('<div class="alert alert-danger">'+
antiSpamResponse + '</div>'
).fadeIn('fast');
}
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else {
$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast').fadeOut('fast');
var formData = $('form').serialize();
submitForm(formData);
}
});
});
function submitForm(formData) {
$.ajax({
type: 'POST',
url: '../agents/php/feedback_custom.php',
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success:
function(data) {
//we are getting data.error (from ajax, which is formData) and data.msg from our feedback.php
$("#thankYouModal").modal('show');
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
$('form #response').removeClass().addClass('error')
.html('<div class="alert alert-danger">' +
'<p>There was an <strong>ERROR SENDING THE FORM</strong><br>Please make sure you have filled out the required fields and resend the form.</p>' +
'</div>').fadeIn('fast');
}
});
};`
What is causing it to act this way?