thunderxhosting
New Member
i am new but committed. i built form that i need to validate external w/js file.i tried to use this post but cannot duplicate the results ::\[code\]http://stackoverflow.com/questions/841119/inline-javascript-form-validation\[/code\]this is link to my code so far including css and js files \[code\]http://jsbin.com/oligol/1/edit\[/code\]really appreciate any attention thanxthis is my html:\[code\]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>xxx</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css" media="all">@import "css/master.css";</style> <style type="text/css" media="all">@import "css/master.css";</style><script src="http://stackoverflow.com/questions/15732175/contact.js" type="text/javascript"></script></head><body><div id="page-container"> <div id="header"> <img src="http://stackoverflow.com/questions/15732175/images/header.jpg" width="900" height="243" /></div> <div id="main-nav"> <ul id="navlist"> <li id="active"><a href="http://stackoverflow.com/questions/15732175/index.html" >HOME</a></li> <li><a href="http://stackoverflow.com/questions/15732175/req.html">REQUIREMENTS</a></li> <li><a href="http://stackoverflow.com/questions/15732175/Links.html">LINKS</a></li> <li><a href="http://stackoverflow.com/questions/15732175/feedback.html">TESTIMONIALS</a></li> <li><a href="http://stackoverflow.com/questions/15732175/contact.html" id="current">CONTACT US</a></li> </ul> </div> <p> </p><div id="content"> <p><p><p>xxxxxxx welcomes all correspondence.<br /> Please use the form below for any questions, feedback and suggestions.<br /> or call <strong><em>xxx xxx </em> xxx.xxx.7009 </strong><br /> All information is confidential<br /> <!-- <b>* required fields</b>--><form onSubmit="return checkForm(); method="post" action="[email protected]" > <fieldset><strong>* required fields</strong> <legend>Contact Form</legend> <label for="name"> Name : <span class="required"></span></label> <div class="input"> <input type="text" name="txtName" id="name" size="30" /><span class="message"></span> </div> <div class="error" id="emailError"> Required: Please enter your email address </div> <div class="error" id="emailError2"> This doesn't look like a real email address, please check and reenter </div> <label for="FieldData2"><strong> E-mail address * :</strong> </label> <div class="input"> <input type="text" name="FieldData1" id="FieldData2" value="" size="30" /><span class="message"></span> </div> <label for="comments"> <strong>Message * :</strong> </label><span class="message"></span> <div class="input"> <textarea name="Message" id="message" margin-left="20px" margin-bottom="20px" rows="18" cols="40"> </textarea> <input type="submit" value="http://stackoverflow.com/questions/15732175/Send Message" name="submit" > </div> </fieldset> </form> </div> <div id="footer"> <p>Copyrights 2013 xxx xxx | Web Design by xxx</p></div></body></html>\[/code\]this is my css:\[code\]@charset "UTF-8";/* CSS Document */html, body { margin: 0; padding: 0;}body { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 14px; background-image: url(../images/backgrd.jpg); }.hidden { display: none;}#page-container { width: 900px; margin: auto;}#containerdiv { float: left; position: relative; } .cornerimage { position: absolute; top: 0; left: 0; } #main-nav { margin-top: -142px; height: 40px;}#navlist { margin-left: 290px; padding:0; text-align: left;}#navlist ul, #navlist li {margin: 0;padding: 0;color: #000000;font-family: Arial, Helvetica, Verdana, sans-serif;font-weight:bold;font-size: 16px;display: inline;list-style-type: none;}#navlist a:link, #navlist a:visited { line-height: 20px; margin: 0 10px 0 10px; text-decoration: none; color: #CDCDCD;}#navlist a:link#current, #navlist a:visited#current,#navlist a:hover { border-bottom: 3px solid #000000; padding-bottom: 2px; background: clear; color: #000000;}#header { height: 243px; background: #CDCDCD; }#sidebar-a { float: right; width: 181px; height: 441px;}#ftcredits { text-align: left; padding: 5px 0 5px 0; font-family:Tahome, Arial, Helvetica, Sans-serif; font-size: 11px; color: #5d3b28;}#ftcredits a:link, a:visited { color: #666633; text-decoration: none;}#ftcredits a:hover { color: #db6d16;}#content { padding-left: 70px; padding-right: 10px; background: #CDCDCD; overflow: hidden; }#footer { font-family:Tahome, Arial, Helvetica, Sans-serif; font-size: 11px; color: #333333; background: #CDCDCD; padding: 1px 20px; line-height: 13px; border-top: 2px solid #5d3b28;}#footer a { color: #003366; text-decoration: underline; }#footer a:hover { color: #003366;}h1 {color: #801F18; font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 21px; font-weight: bold; text-align: center; padding-bottom: 15px;}h2 { color: #801F18; font-size: 18px; font-weight: bold; text-align: center; padding-bottom: 15px;}h5 { font-size: 15px; color: #663333; line-height:150%}exc { font-size: 17px; color: #000000; line-height:150%}p { line-height:150%}h3 { color: #666633; font-family: Arial, Helvetica, Verdana, sans-serif;font-size: 11px;height: 350px;margin-top: -350px;margin-left: 460px;}hr { width: 100%; border-top: 2px solid #333333; border-bottom: 0; float: left; line-height: 13px;}.double_column_list li {float:left; width:50%;}fieldset{ padding:10px; width:600px;}label {width:170px; float:left; text-align:right; clear:both; margin-bottom:20px; }.input {width:350px; float:left; margin-left:10px; }error{ }#content a { color: #003366; text-decoration: underline; }#content h2 { margin: 0; padding: 0; padding-bottom: 15px;}#content p { margin: 0; padding: 0; line-height:150%; padding-bottom: 15px;}.container1 { display: inline; float: left; width: 320px; height:200px; padding: 10px; margin-bottom: 20px; -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border: 1px solid #black; zoom: 100%; background-color: rgba(83,85,89,0.3);}.container2 { width: 320px; height:200px; padding: 10px; margin-left: 50px; margin-bottom: 20px; display: inline; float: left; /*-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); border: 1px solid #black; zoom: 100%; background-color: rgba(83,85,89,0.3);*/}\[/code\]this is my js file:\[code\] function checkForm() { hideAllErrors(); var formIsValid = /*showErrorAndFocusIf('FieldData0', isEmpty, 'nameError')*/ /*&&*/ showErrorAndFocusIf('FieldData2', isEmpty, 'emailError'); showErrorAndFocusIf('FieldData2', isAnInvalidEmail, 'emailError2'); /*&& showErrorAndFocusIf('FieldData3', isEmpty, 'categoryError')*/ showErrorAndFocusIf('FieldData1', isEmpty, 'messageError'); /* For debugging, lets prevent the form from submitting. */ if (formIsValid) { alert("Valid form!"); return false; } return formIsValid;}function showErrorAndFocusIf(fieldId, predicate, errorId) { var field = document.getElementById(fieldId); if (predicate(field)) { document.getElementById(errorId).style.display = 'inline'; if (field.select) { field.select(); } field.focus(); return false; } return true;}function isEmpty(field) { return field.value =http://stackoverflow.com/questions/15732175/='';}function isAnInvalidEmail(field) { var email = field.value; var ok = "1234567890qwertyuiop[]asdfghjklzxcvbnm.@-_QWERTYUIOPASDFGHJKLZXCVBNM"; for(i = 0; i < email.length; i++){ if(ok.indexOf(email.charAt(i)) < 0) { return true; } } re = /(@.*@)|(\.\.)|(^\.)|(^@)|(@$)|(\.$)|(@\.)/; re_two = /^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; return re.test(email) || !re_two.test(email);}function hideAllErrors() { /*document.getElementById("nameError").style.display = "none"*/ document.getElementById("emailError").style.display = "none"; document.getElementById("emailError2").style.display = "none"; /*document.getElementById("categoryError").style.display = "none"*/ document.getElementById("messageError").style.display = "none";}\[/code\]