Use jquery/jquery.validate to validate form data; submit data with ajax/js/php; show loading/sucess/failure messages as specified

Use PHP and Jquery... Attached is [login to view URL] containing a html/php document ([login to view URL]), a stylesheet ([login to view URL]), some js/jquery ([login to view URL]), and some images. The html/php document simulates a document on my website. The purpose of this project is to: 1. use [login to view URL] to validate the form fields as specified in the detailed instrcutions. 2. once validation is complete, show the loader animation and message as specified in the detailed instructions. 3. while the loader animation is showing, use ajax/js/php to * secure the input (htmlspecialchars, etc.), * insert the inpute as a row in an sql table * send an email to the sysAdmin containing the values of the fields * send an email to the user that message has been recieved * append a line to a log file with a timestamp and the values of the fields. 4. Show a success message (or failure message) when done as specified in the instructions. 5. Make sure page refresh resets the form. 6. Prevent malicious users from submitting the form many times to flood my server or DB. ## Deliverables See [login to view URL] attached. The php file is an html file that simuates the layout of my webpage. In the html, there is a div.right-region that contains (essentially) the following basic structrure div.right-region div.form-block div.form-header div.form-body form#front-form input#front-contact-fullname input#front-contact-phone input#front-contact-email textarea#front-cpontact-message a#front-form-submit div.form-result [login to view URL] [login to view URL] [login to view URL] div.form-footer form#front-form has 4 fields and a submit link input#front-contact-fullname input#front-contact-phone input#front-contact-email textarea#front-cpontact-message a#front-form-submit Note: Each field has some default text in the html that tells the user what to put in the fieild. In the [login to view URL], there are 2 functions (defValue() and defValueTextarea()) that get called on the inputs and textarea in the $(document).ready(function(){}). What these functions do is, when the user clicks in a field, they empty the default value. If the user blurs the field without inputting anything, or if the user blurs the field leaving an empty string, these funtions put the default text back into the field. Leave these funtions alone, Just FYI. =================================================== Here are the project requirements. =================================================== 1. Validation: Wait to validate until the submit link "a#front-form-submit" is clicked. When the user clicks the submit link "a#front-form-submit", use [login to view URL] to validate the form with the following rules: * "input#front-contact-fullname": Requried. Must text AND text must not be the default text. * "input#front-contact-phone": Required, must have a phone number * "input#front-contact-email": NOT requried. BUT this must be a valid form email address if on submit the field contains ANY text that is not the default text or an empty string ''. * "front-contact-message": NOT required, may contain any text, empty string '' or default text. (so no need to [login to view URL] this field) =================================================== 2. Highlight errors. The 3 input fields are preceeded by a div with names like div#msg-name which conain a span with an error message i have already marked up and styled. if "front-contact-fullname" is invalid * removeClass "hide" from div#msg-name addClass "bad" to input#front-contact-fullname* if "front-contact-phone" is invalid * removeClass "hide" from div#msg-phone addClass "bad" to input#front-contact-phone* if "front-contact-email" has text invalid text (text which is not empty string '', default text, or valid email address) * remove class "hide" from div#msg-phone add class "bad" to input#front-contact-phone* NOTE: you can click on the "Demo Validate" link at the bottom of the page which click is bound to sampleValidate() in the script.js. This will show what it would look like if all validated fields were invalid. You can click =================================================== 3. Allow user to correct errors in the form. When the user puts focus in an invalid field, onBlur revalidate that field immediatley. If the field is valid, removeClass "bad" from that input field and addClass "hide" to the message field for that input. If the field is still invalid, onBlur, keep it with the error styles. NOTE: you can click on the "Demo All Valid" link at the bottom of the page which click is bound to sampleRemoveValidationStyles () in the script.js. This will show what it would look like when all the validatoin failures are fixed. When the user clicks submit link again, revalidate again as above. If field(s) are still invalid, add the error classes to the invalid fields, as above. =================================================== 4. Execute the submit form functions. When all the form fields are valid: * - run showLoader() function in the [login to view URL] to hide the form and show the loading animation and message.(Please check that this function does the job correctly, and if not fix it.)* * - Store all the field values in PHP variables (I'll use these later and so can you)* * - Secure the fields for secure transport (at a minimum, trim the text and replace htmlSpecialChars). But do what you think is secure. I am not an expert.* * - Insert the text into a MySQL database table, using the following parameters:* host: "localhost" sqlUser: "user1" password: "password" database: "db01" table: "info_form" columns: "info_form_id" int (auto incriment id key in the mysql database) "fullname" Varchar(100) "email" Varchar(200) "phone" Varchar(50) "message" Varchar(5000) * - select the info_form_id auto increment key and store in a PHP variable e.g. $rowID (for me to use later) - send an email as follows:* To: an addresss I will hard code in the php, so can you put whatever email you like in your code. From: the website default addresss I will hard code in the php, so you put whatever. Subject: "New Message" Body: ### New Contact Name: [value of "front-contact-fullname"] Phone: [value of "front-contact-phone"] Email: [Value of "front-contact-email"] Message: [Value of "front-contact-message"] * - If a valid email was provided in the form, send an email to that address also:* To: [Value of "front-contact-email"] From: an addresss I will hard code in the php, so you put whatever. Subject: "Your Message has been received" Body: Dear [value of "front-contact-fullname"]: Someone will contact you shortly. Thanks, Company * - Append the the date-time and field values to a log file as follows:* filename: file $_SERVER['DOCUMENT_ROOT'].'/logs/[login to view URL]'; Append a line to the end of the file with this format: [Date/Time Stamp]:[Bool],[Bool],[Bool]:[value of "front-contact-fullname"]||||[value of "front-contact-phone"]||||[Value of "front-contact-email"]||||[Value of "front-contact-message"] . "\n"; NOTE: the first three Bool are 1. did the sql insert sucessfully 2. did the 1st email send sucessfully 3. did the 2nd email send sucessfully NOTE: use 4 pipes |||| to separate the values of the fields. * - As long as the log file was sucessfully written, show the success message by running showSuccess() in the [login to view URL] (Please check that this function does the job correctly, and if not fix it.)* * - if the SQL insert, emails, and log file write all fail, then run showFailure() in the script.js. Do what you can to make sure this never gets shown please. (Please check that this function does the job correctly, and if not fix it.)* ========================================================================================= 4. If the page is refreshed the form should be reset and return to it's original state. Please make it do this. ========================================================================================= 5. The user should be allowed to submit the form a few times in a session, but I don't want my competitors to flood my system with form submission. Please implement some logic to prevent a user from submitting more than 2 forms in a 1 hour period (or do what you think is better to prevent such flooding, but advise me first what you will do)' That's it. If you have a better way to do any of the above, run it by me. * * *This broadcast message was sent to all bidders on Thursday Jun 14, 2012 4:46:57 PM: The original attached zip archive was corrupt. A new [login to view URL] has been attached. * * *This broadcast message was sent to all bidders on Thursday Jun 14, 2012 4:47:58 PM: The original attached zip archive was corrupt. A new [login to view URL] has been attached.