AJAX form field error checking.

This site is best viewed in a modern browser with JavaScript enabled.

Nicholas_Diaz

few questions.

if i have 20 form fields and im passing them along throught he .js file do i need to put each var in the .js file or just the ones im checking for errors or that are required?

or do I place every var that will be sent to the php file so the php file can then handle the information and send the email?

where is a good place to look on how to code error checking... for instance email. or phone.. etc.

Nicholas_Diaz

261 view not one reply...

Logic_Ali

Nicholas Diaz;1267257 wrote:
261 view not one reply...

That's because they were all hoping to see some code that would make sense of your question.

and im passing them along throught he .js file

???

rh_lloydnorthov

It depends on how the form works - Are you just using the AJAX call to validate the from fields, and then allowing the form to submit normally if the validation is passed, or does the AJAX call perform both validation AND submission? if the former, you only need to pass though the form fields you want to validate, if the latter you will need to pass all the form fields through.
You can use regular expressions to check check email adresses, phone numbers and zip/post codes, for example you can use this for email addresses:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

You pass the email form field contents into the function and it returns true if the address is valid, false if invalid.

Bearing in mind that javascript validation is for the user's convenience and should always be combined with server-side validation, never rely on javascript form validation as:
a) javascript can be turned off
b) someone who knows a little about HTML can send POST data directly to the form action URL, evading any javascript validation.

Specific security issues relating to email forms:
http://www.thesitewizard.com/php/protect-script-from-email-injection.shtml

Nicholas_Diaz

.js file

   $(document).ready(function() {
$('#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 required = ' is required.';
	var date = $('form #date').val();
	var position = $('form #position').val();
	var email = $('form #email').val();
	var experience = $('form #experience').val();
	var lname = $('form #lname').val();
	var fname = $('form #fname').val();
	var mname = $('form #mname').val();
	var dob = $('form #dob').val();
	var dl = $('form #dl').val();
	var address = $('form #address').val();
	var city = $('form #city').val();
	var state = $('form #state').val();
	var zip = $('form #zip').val();
	var telephone = $('form #telephone').val();
	var cell = $('form #cell').val();
	var efname = $('form #efname').val();
	var elname = $('form #elname').val();
	var relationship = $('form #relationship').val();
	var ephone = $('form #ephone').val();	
	var ecell = $('form #ecell').val();
	var availability = $('form #availability').val();
	var previouse = $('form #previous').val();
	var company = $('form #company').val();
	var supervisor = $('form #supervisorphone').val();
	var leaving = $('form #leaving').val();
	var sex = $('form #signature').val();
	var proof = $('form #signature').val();
	var signature = $('form #signature').val();
	var datesign = $('form #signature').val();

// error checking 

// let the user know if there are erros with the form
if(valid != ''){
$('#response').removeClass().addClass('error').html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal'); 
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else{
$('#response').removeClass().addClass('processing').html('Sending message...').fadeIn('normal'); 
var formData = $('form').serialize();
submitForm(formData); 
} 

});
});

// make our ajax request to the server
function submitForm(formData){
$.ajax({ 
type: 'POST',
url: 'actions/appSubmit.php', 
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data){
$('#response').removeClass().addClass((data.error === true) ? 'error' : 'success').html(data.msg).fadeIn('fast'); 
if($('#response').hasClass('success')){
setTimeout("$('#response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#response').removeClass().addClass('error').html('<p>There was a<strong> ' + errorThrown +'</strong> error due to a<strong> ' + textStatus +'</strong> condition.</p>').fadeIn('fast');
}, 
complete: function(XMLHttpRequest, status){$('form')[0].reset();}
}); 
};

php file

  $(document).ready(function() {
$('#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 required = ' is required.';
	var date = $('form #date').val();
	var position = $('form #position').val();
	var email = $('form #email').val();
	var experience = $('form #experience').val();
	var lname = $('form #lname').val();
	var fname = $('form #fname').val();
	var mname = $('form #mname').val();
	var dob = $('form #dob').val();
	var dl = $('form #dl').val();
	var address = $('form #address').val();
	var city = $('form #city').val();
	var state = $('form #state').val();
	var zip = $('form #zip').val();
	var telephone = $('form #telephone').val();
	var cell = $('form #cell').val();
	var efname = $('form #efname').val();
	var elname = $('form #elname').val();
	var relationship = $('form #relationship').val();
	var ephone = $('form #ephone').val();	
	var ecell = $('form #ecell').val();
	var availability = $('form #availability').val();
	var previouse = $('form #previous').val();
	var company = $('form #company').val();
	var supervisor = $('form #supervisorphone').val();
	var leaving = $('form #leaving').val();
	var sex = $('form #signature').val();
	var proof = $('form #signature').val();
	var signature = $('form #signature').val();
	var datesign = $('form #signature').val();

// error checking 

// let the user know if there are erros with the form
if(valid != ''){
$('#response').removeClass().addClass('error').html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('normal'); 
}
// let the user know something is happening behind the scenes
// serialize the form data and send to our ajax function
else{
$('#response').removeClass().addClass('processing').html('Sending message...').fadeIn('normal'); 
var formData = $('form').serialize();
submitForm(formData); 
} 

});
});

// make our ajax request to the server
function submitForm(formData){
$.ajax({ 
type: 'POST',
url: 'actions/appSubmit.php', 
data: formData,
dataType: 'json',
cache: false,
timeout: 7000,
success: function(data){
$('#response').removeClass().addClass((data.error === true) ? 'error' : 'success').html(data.msg).fadeIn('fast'); 
if($('#response').hasClass('success')){
setTimeout("$('#response').fadeOut('fast')", 5000);
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('#response').removeClass().addClass('error').html('<p>There was a<strong> ' + errorThrown +'</strong> error due to a<strong> ' + textStatus +'</strong> condition.</p>').fadeIn('fast');
}, 
complete: function(XMLHttpRequest, status){$('form')[0].reset();}
}); 
};

Nicholas_Diaz

and here is the form

<form id="english1" name="english1" method="post" action="actions/appSubmit.php" enctype="multipart/form-data"> 
<h1><center>Application For Employment</center></h1>
<br />
<center><strong>Experience:</strong></center>
<textarea class="tBox" name="experience" id="experience"></textarea>
<br /><br />
<br /><br />
<div style="float_left">
<p class="labelL"><strong>Date:</strong><input type="text" name="date" id="date" /> 
</p></p><br /><br />
<br />


<p class="labelL"><strong>Position:</strong><input type="text" name="position" id="position" /> 
</p></p><br />
<br />


<p class="labelL"><strong>Email:</strong><input type="text" name="email" id="email" /> 
</p></p><br />
<br />
</div>


<h2>Personal Information<span style="float:right; color:#F00; margin-right: 10px">Emergency Contact</span></h2>
<br /> <br /> 

<div style="float:right">
<p class="labelER"><strong>First_Name:</strong><input type="text" name="ename" id="ename" />
</p></p><br />
<br /> 

<p class="labelER"><strong>Last_Name:</strong><input type="text" name="elname" id="elname" />    

</p></p><br />
<br /> 

<p class="labelER"><strong>Relationship:</strong><input type="text" name="relationship" id="relationship" /> 
</p></p><br />
<br /> 


<p class="labelER"><strong>Phone:</strong><input type="text" name="ephone" id="ephone" />   

</p></p><br />
<br /> 


<p class="labelER"><strong>Cell:</strong><br /><input type="text" name="ecell" id="ecell" /> 
</p></p><br />
<br /> 
</div>

<div style="float:left">
<p class="labelL"><strong>First_Name:</strong><input type="text" name="fname" id="fname" />
</p></p><br />
<br /> 

<p class="labelL"><strong>Last_Name:</strong><input type="text" name="lname" id="lname" />    

 </p></p><br />
<br /> 

<p class="labelL"><strong>Middle_Name:</strong><input type="text" name="mname" id="mname" /> 
</p></p><br />
<br /> 

<p class="labelL"><strong>DOB:</strong><input type="text" name="dob" id="dob" />   

</p></p><br />
<br /> 


<p class="labelL"><strong>DL#:</strong><br /><input type="text" name="dl" id="dl" /> 
</p></p><br />
<br /> 
</div>


<div class="clear"></div>
<br />







<h2>Current Residence<span style="float:right; margin-right: 30px">Availability To Work</span></h2>
 <br />
<div class="rBox"
<p><strong>Are You Available For All Shifts?</strong><br /><br />
<input type="radio" name="availability" id="availability" value="yes">
<label for="availability">Yes</label>
<input type="radio" name="availability" id="availability" value="no" />
<label for="availability">No</label>

<br />
<br />
<br />

<p><strong>Have You Ever Worked Or Applied At SSS Before?</strong><br /><br />
<input type="radio" name="previous" id="previous" value="yes">
<label for="previous">Yes</label>
<input type="radio" name="previous" id="previous" value="no" /> 
<label for="previous">No</label>


</div>






  <div style="float_left">
<p class="labelL"><strong>Address:</strong><input type="text" name="address" id="address" />
 </p></p><br />
<br />
<br />

<p class="labelL"><strong>City:</strong><br /><input type="text" name="city" id="city" /> 
</p></p><br />
<br />

<p class="labelL"><strong>State:</strong>
<select style="width:158px" name="state" id="state">
<option value="">State
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="NC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="DC">Washington D.C.
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</SELECT></center>
</p></p><br />
<br /> 


<p class="labelL"><strong>Zip_Code:</strong><input type="text" name="zip" id="zip" /> 
</p></p><br />
<br /> 

<p class="labelL"><strong>Telephone:</strong><input type="text" name="telephone" id="telephone" /> 
</p></p><br />
<br /> 

<p class="labelL"><strong>Cell_Phone:</strong><input type="text" name="cell" id="cell" />
</p></p><br />
<br /> 

 </div>
    <div class="clear"></div>
 <br />


<h3>Previouse Employment</h3>
<br />

<center><strong><span style="margin-left:55px">Reason For Leaving:</span></strong></center>
<textarea class="tBox" name="leaving" id="leaving"></textarea>


<div style="float_left">
<p class="labelL"><strong>Company:</strong><input type="text" name="company" id="company" /> 
</p></p><br /><br />
<br />


<p class="labelL"><strong>Title:</strong><input type="text" name="title" id="title" /> 
</p></p><br />
<br />

<p class="labelL"><strong>Supervisor:</strong><input type="text" name="supervisor" id="supervisor" /> 
</p></p><br />
<br />

<p class="labelL"><strong>Supervisor_Phone:</strong><input type="text" name="supervisorphone" id="supervisorphone" /> 
</p></p><br />
<br />
</div>


<h3>Equal Employment Opportunity</h3>
<p>
We do not discriminate against qualified applicants based upon any protected group status, including but not limited to 
race, color, creed, religion, sex (except where it is a bona fide occupational qualification), national origin, ancestry, age,
marital status, military or veteran status, sexual orientation, physical or mental disability or medical condition as defined
by applicable equal opportunity laws. </p>
<p>
To help us comply with federal/state equal opportunity record keeping, reporting and other legal requirements, we 
would appreciate you voluntarily providing the information below.</p>
<p>
I certify that the information on this application is correct and I understand that any misrepresentation or omission of 
any information will result in my disqualification from consideration for employment or, if employed, my dismissal.  I 
understand that this application is not a contract, offer, or promise of employment and that if hired, I will be able to 
resign at any time for any reason. Likewise, the company can terminate my employment at any time with or without 
cause, unless otherwise required by law.</p>
<p>
Offers reasonable accommodation in the employment process for individuals with disabilities.  If you need assistance 
in the application or hiring process to accommodate a disability, you may request an accommodation at any time
</p> 
<br />
 <h3>Additional Information</h3>
 <br />
Are You Male Or Female?
<br />
Male&nbsp; <input type="radio" name="sex" id="sex" value="male" /> &nbsp;&nbsp;&nbsp;Female&nbsp; <input type="radio" name="sex" id="sex" value="female" /> &nbsp;&nbsp;&nbsp;Choose Not To Respond&nbsp; <input type="radio" name="sex" id="sex" value="noresponse" />
<br /> <br />
Can you Provide Proof Of Work Authorization In The United States&nbsp; <input type="radio" name="proof" id="proof" value="yes" />Yes
<input type="radio" name="proof" id="proof" value="no" />No 
 <br /> <br />
By signing I confirm that I have read, understand and insure all the information provided on this application is correct.
<br /><br />
<div id="response"><!--This will hold our error messages and the response from the server. --></div>  

Signature Of Applicant:&nbsp;<input type="text" name="signature" id="signature" /> &nbsp;&nbsp; Date:&nbsp;<input type="text" name="datesign" id="datesign" /> <input class="submit" type="submit"  id="submit" value="Submit Application" />&nbsp;&nbsp;<input type="reset" name="reset" value="Reset All Fields" />    

<div class="inputs">
                    <input type="hidden" name="honeypot" id="honeypot" value="http://" />            

                    <input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />
        </form>

Nicholas_Diaz

and thank you Rh for not being wasting everyone's time posting something just to be a smart a