www.webdeveloper.com
Results 1 to 7 of 7

Thread: AJAX form field error checking.

  1. #1
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    AJAX form field error checking.

    few questions.

    1. 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?

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

  2. #2
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    261 view not one reply...

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by Nicholas Diaz View Post
    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
    ???
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  4. #4
    Join Date
    Oct 2012
    Posts
    36
    1. 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.

    2. 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:

    Code:
    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/pro...njection.shtml

  5. #5
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293

    code

    .js file

    Code:
       $(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
    Code:
      $(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();}
    }); 
    };

  6. #6
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    and here is the form


    Code:
    <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>

  7. #7
    Join Date
    Aug 2012
    Location
    TX
    Posts
    293
    and thank you Rh for not being wasting everyone's time posting something just to be a smart a

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles