Hi My jQuery that i have used to validate my form more easily works fine, but it is not compatible in internet explorer 7 and 8, why is this? when clicking submit it bypasses the js and goes to the next page. It works in Firefox, Safari, Opera, Chrome. Below is the coding.It is more of a jQuery problem, CSS is fine. How can i validate the image field as well? so users can only upload PNG, JPG, GIF images with a size of 800KB and below. And somehow upload the folder to a folder without the need of a server. (i was playing around with a PHP script somewhere online to see how upload would work, and it worked, but never saw the coding. it said you didnt need a real server, you could do it so you could have it on your local host using like XAMMP <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Dirt Devil | Competition Form</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> <link rel="stylesheet" type="text/css" href="styles.css"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"></style> <script> $(document).ready(function(){ $("#customer").validate({ rules: { image: "required" } }); }); </script> </head> <body> <center> <div id="full"> <div id="content"> <form action="Confirmation.html" id="customer" class="validate" method="post"> <fieldset> <div class="field"> <label for="first_name">First Name</label> <input type="text" name="first_name" id="first_name" class="required" /> </div> <div class="field"> <label for="last_name">Last Name</label> <input type="text" name="last_name" id="last_name" class="required" /> </div> <div class="field"> <label for="name">Your Little Devils Name</label> <input type="text" name="name" id="name" class="required" /> </div> <div class="field"> <label for="age">Your Little Devils Age</label> <input type="text" name="age" id="age" class="required" /> </div> <div class="field"> <label for="image">Upload a photo of your devil</label> <input type="file" name="image" id="image" class="required" /> </div> <fieldset> <div class="field checkbox"> <p><span class="field"> <input type="checkbox" name="terms" id="terms" class="required" /> </span></p> </div> </fieldset> <fieldset> <div class="field" id="terms_block"> <label for="terms" title="Terms"></label> </div> </fieldset> <fieldset> <div class="button" id="next"> <input name="" type="submit" class="action" value="Submit" /> </div> </fieldset> </form> </div> <div id="complete"> <div id="description"></div> <div id="outercont"></div> <!--<div id="userdetails"></div>--> <div id="uploadbtn"></div> <div id="imageuploadtxt"></div> <div id="submitbtn"><a href="../Confirmation.html"></a></div> <div id="checkbox"></div> <div id="termscond"></div> <div id="kid2"></div> <div id="kid1"></div> </div> </div> </center> </body> </html> Code (markup): im wrapping my coding in the coding tags but it comes out on all one line? why is that? can a moderator sort it out for me please? cheers
XAMPP is a "real server". It's the same server (Apache) that's used on most sites on the internet. (Yes - the most used web server in the world is free.) <script> $(document).ready(function(){ $("#customer").validate({ rules: { image: "required" } }); }); </script> <form action="Confirmation.html" id="customer" class="validate" method="post"> <input name="" type="submit" class="action" value="Submit" /> </form> Code (markup): That's the active code on your page. When you click the submit button, the user is sent to Confirmation.html. Your jQuery isn't doing anything, since you have no element with an id of customer, and it's in document ready code, so it would fire when the page has loaded, not when the user submits it. You need to redesign your code before you rewrite it. It's not just a typo or a little error, it's an error in the concept of how the page is supposed to work.
thanks for yur response, how would you go about writing it then? the way i coded it, it works on all browsers except IE 7 and 8 so i guess it must be right? im a newbie at this jQuery and Javascript stuff. its just confusing at the moment. I guess IE 7 and 8 are strict on jQuery/Javascript.