All of the fields in this form are required. 1. Inline validation activates for text fields. Is there a way to make make it work for "select" fields? 2. If a user doesn't enter anything, and submits the form, what code is needed to make all of the error messages appear on the form? Currently, only the first message appears when the form is submitted. Need the Function error message to appear as well. <html> <head> <style type="text/css"> .inlineErrrorMsg { color:red; margin: 0px 0px; padding-left: 25px; background-position: 0px left; background: transparent url(../images/downarrow.png) no-repeat center left;} </style> </head> <body> <script Language="JavaScript" Type="text/javascript"> <!-- function ValidateInLine(theForm) { if (NewProductForm.ProductName.value == "") { document.getElementById("nameError").innerHTML = "Please enter the Name of your Product:"; document.getElementById("nameError").style.display = "block"; document.getElementById("nameError").scrollIntoView(); theForm.ProductName.focus(); return (false); } else { document.getElementById("nameError").style.display = "none"; } if (NewProductForm.ProductName.value.length < 2) { document.getElementById("nameError").innerHTML = "Please enter at least 2 characters for the Name of your Product:"; document.getElementById("nameError").style.display = "block"; document.getElementById("nameError").scrollIntoView(); theForm.ProductName.focus(); return (false); } else { document.getElementById("nameError").style.display = "none"; } if (theForm.Function.selectedIndex < 0) { var divID = document.getElementById("FunctionError") divID.innerHTML = "Please select at least one Function of your Product:"; divID.style.display = "block"; divID.scrollIntoView(); theForm.Function.focus(); return (false); } else { divID.style.display = "none"; } return (true); } //--></script><FORM METHOD="POST" action="newproduct-add.asp" name="NewProductForm" onsubmit="return ValidateInLine()" language="JavaScript"> <div class="inlineErrrorMsg" id="nameError" style="display: none;"></div> <p align="left" style="margin-left: 20"> <b> <a name="ProductName"></a>*Name of Product: </b> <INPUT onkeypress="return check(event)"name="ProductName" id="prodname" size="64" maxlength="255" onblur="ValidateInLine()"></P> <div class="inlineErrrorMsg" id="FunctionError" style="display: none;"></div> <P> <b>*Function:</b> (To select more than one, hold down Ctrl key and click.) <BLOCKQUOTE> <P> <select size="8" name="Function" multiple onblur="ValidateInLine()"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> <option value="F">F</option> <option value="G">G</option> <option>Other</option> </select> If "Other", please specify: <INPUT onkeypress="return check(event)"type="text" name="function_othertext" size="20"> </p></BLOCKQUOTE> <P style="text-align: center; margin-left: -80px;"> <BR> <INPUT onkeypress="return check(event)"TYPE=submit VALUE="Next" name="Next"> <INPUT onkeypress="return check(event)"type="reset" value="Cancel" name="Cancel" onClick="cancel()"><p> </p> </b> </FORM> <script> function resetForm() { document.getElementById("NewProductForm").reset(); } </script> </body> </html> Code (markup):
Question #1: http://stackoverflow.com/questions/...lected-value-of-dropdownlist-using-javascript Question #2: If you see in the validation checks you are doing you are returning false which is stopping the form from processing but is also stopping the execution of the JavaScript. What you need to do is set a variable called "error" to false and then when validation fails set that to true. If error is true at the end of the form show the errors. Let me know if you need anything else.
Thanks, again, for your response. Question 1: To clarify, I want an error message to appear indicating that the Required select/or checkbox/or radio button is answered (before clicking on Submit). The only way I can think of this working is to somehow automatically set the focus on the first input of the set, so that when the user clicks to the next field, it would trigger the error message indicating the required select/checkbox/radio. What are your thoughts on this? Queston2: Will work on this one and let you know.
You can accomplish that with using focus and blur events. Have a read of this: http://javascript.info/tutorial/focus-blur Thanks
You could use the change event handler for that: http://api.jquery.com/change/ Edit: Just noticed you want this in native JS: http://stackoverflow.com/questions/...io-button-input-type-radio-doesnt-work-as-one