October 8, 201312 yr Hi, I have a form with 4 fields. I've got everything working except the validation js ... or is it something to do with the css?? What's happening at the moment is that when I hit submit without filling in any fields the background colour and font change on the Enquiry field, but not on the 3 other fields. I've been trying to fix it for a couple of hours but just can't see why the other 3 fields are not picking up the "needsfilled" style while the Enquiry box is!!! Thanks to anyone who can help. HTML, CSS and JS I'm using is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Form Validation</title> <link href="scchome.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="validation.js"></script> </head> <body> <form method="post" id="theform" action="consultation.php"> <fieldset> </p> <p> Your Name:<br /> <input type="text" class="txt" id="Name"/> </p> <p> Telephone Number:<br /> <input type="text" class="txt" id="Telephone"/> </p> <p> Email Address:<br /> <input type="text" class="txt" id="EmailAddress"/> </p> <p> Additional information:<br /> <textarea name="Enquiry" type="txt" id="Enquiry"/></textarea> </p> <p id="error">Please complete all fields before submitting.</p> <div id="submitbtns"> <p> <input type="submit" value="Submit" style="height: 25px; width: 247px"/> </p> <p> <input type="reset" value="Reset" style="height: 25px; width: 247px"/></p> </div> </fieldset> </form> </body> </html> @charset "utf-8"; /* CSS Document */ /* Form style */ fieldset { border: 0px solid #005184; margin-top: 0px; padding: 4px 0px 20px 0px; } legend { font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; padding: 0px 15px opx 15px; font-style: normal; color:#ff9933; } input.txt { font: 0.9em Arial, Helvetica, sans-serif; color: #1067a3; width: 240px; min-height: 22px; background-color:#FFFFB3; border: 2px inset #9999cc; } textarea{ font: 0.9em Arial, Helvetica, sans-serif; color: #1067a3; width: 240px; min-height: 120px; background-color:#FFFFB3; border: 2px inset #9999cc; } form p { clear: left; margin: 0; padding: 0; padding-top: 8px; } form p label { float: left; clear:left; width: 0%; font: 1.0em Arial, Helvetica, sans-serif; padding: 0px 0px 4px 0px; margin: 0px 0px 15px 0px; color:#333333; } #submitbtns{ float:left; width:330px; min-height: 30px; font-family:Arial, Helvetica, sans-serif; font-size: 1.1em; margin: 0px 0px 10px 0px; padding: 0px; border: 0px solid #38e92b; z-index:3; } /*End of form style */ /* Validation */ #error { color:red; font-size:9px; display:none; } .needsfilled { background-color:red; color:#ffffff; font-size:14px; text-align:center } $(document).ready(function(){ // Place ID's of all required fields here. required = ["Name", "Telephone", "EmailAddress", "Enquiry", ]; // If using an ID other than #email or #error then replace it here name = $("#Name"); email = $("#EmailAddress"); errornotice = $("#error"); // The text to show up within a field when it is incorrect emptyerror = "Please fill out this field."; nameerror = "Please enter your name."; emailerror = "Please enter your email address."; $("#theform").submit(function(){ //Validate required fields for (i=0;i<required.length;i++) { var input = $('#'+required[i]); if ((input.val() == "") || (input.val() == emptyerror)) { input.addClass("needsfilled"); input.val(emptyerror); errornotice.fadeIn(750); } else { input.removeClass("needsfilled"); } } // Validate the e-mail. if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) { email.addClass("needsfilled"); email.val(emailerror); } //if any inputs on the page have the class 'needsfilled' the form will not submit if ($(":input").hasClass("needsfilled")) { return false; } else { errornotice.hide(); return true; } }); // Clears any fields in the form when the user clicks on them $(":input").focus(function(){ if ($(this).hasClass("needsfilled") ) { $(this).val(""); $(this).removeClass("needsfilled"); } }); }); Thanks for any help in advance.
October 8, 201312 yr Before you add the class 'needsFilled' you should remove the 'txt' class because that's what is overriding the new style (as it has background color etc set).
October 8, 201312 yr Author I tried that and you're right thank you. But the text area and the input fields both have styles set - background colours etc . . . So I don't get why the input fields styles override the error style? How else can I style the input fields if I remove the style class?? Thanks again!
October 9, 201312 yr Author Hi, I've changed the css to try and remove the class style from This: input.txt { font: 0.9em Arial, Helvetica, sans-serif; color: #1067a3; width: 240px; height: 22px; background-color:#FFFFB3; border: 2px inset #9999cc; } To this: input[type=text] { font: 0.9em Arial, Helvetica, sans-serif; color: #1067a3; width: 240px; height: 22px; background-color:#FFFFB3; border: 2px inset #9999cc; } Still overrides the javascript!!! Any ideas please? I need to be able to keep the style of the input fields but they also need to be able to change for the js validation. Thanks.
October 9, 201312 yr Author Solved!!! I just added the !important tag on the error code. I'm sure I'd of made a better brick layer!!! Thanks again anyway.
Create an account or sign in to comment