FORM VALIDATION| need help! | Cant add variable
JavaScript that helps to validate my feedback form. This script has 4 variabels I think, name | email gender | message . I do not need gender var I would like to add a number var and validate it as well, for example I dont care about amount of numbers or area code, but I need to eliminate symbols line % & @ and so on.
After playing with it I get sytax errors and so on. I really dont know JavaScript and killed more than a day trying to complete it.
If anyone can help me thank you in advance!
Code:// form validation function // function validate(form) { var name = form.name.value; var email = form.email.value; var gender = form.gender.value; var message = form.message.value; var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/; var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim); if(name == "") { inlineMsg('name','You must enter your name.',2); return false; } if(!name.match(nameRegex)) { inlineMsg('name','You have entered an invalid name.',2); return false; } if(email == "") { inlineMsg('email','<strong>Error</strong><br />You must enter your email.',2); return false; } if(!email.match(emailRegex)) { inlineMsg('email','<strong>Error</strong><br />You have entered an invalid email.',2); return false; } if(gender == "") { inlineMsg('gender','<strong>Error</strong><br />You must select your gender.',2); return false; } if(message == "") { inlineMsg('message','You must enter a message.'); return false; } if(message.match(messageRegex)) { inlineMsg('message','You have entered an invalid message.'); return false; } return true; } // START OF MESSAGE SCRIPT // var MSGTIMER = 20; var MSGSPEED = 5; var MSGOFFSET = 3; var MSGHIDE = 3; // build out the divs, set attributes and call the fade function // function inlineMsg(target,string,autohide) { var msg; var msgcontent; if(!document.getElementById('msg')) { msg = document.createElement('div'); msg.id = 'msg'; msgcontent = document.createElement('div'); msgcontent.id = 'msgcontent'; document.body.appendChild(msg); msg.appendChild(msgcontent); msg.style.filter = 'alpha(opacity=0)'; msg.style.opacity = 0; msg.alpha = 0; } else { msg = document.getElementById('msg'); msgcontent = document.getElementById('msgcontent'); } msgcontent.innerHTML = string; msg.style.display = 'block'; var msgheight = msg.offsetHeight; var targetdiv = document.getElementById(target); targetdiv.focus(); var targetheight = targetdiv.offsetHeight; var targetwidth = targetdiv.offsetWidth; var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2); var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET; msg.style.top = topposition + 'px'; msg.style.left = leftposition + 'px'; clearInterval(msg.timer); msg.timer = setInterval("fadeMsg(1)", MSGTIMER); if(!autohide) { autohide = MSGHIDE; } window.setTimeout("hideMsg()", (autohide * 1000)); } // hide the form alert // function hideMsg(msg) { var msg = document.getElementById('msg'); if(!msg.timer) { msg.timer = setInterval("fadeMsg(0)", MSGTIMER); } } // face the message box // function fadeMsg(flag) { if(flag == null) { flag = 1; } var msg = document.getElementById('msg'); var value; if(flag == 1) { value = msg.alpha + MSGSPEED; } else { value = msg.alpha - MSGSPEED; } msg.alpha = value; msg.style.opacity = (value / 100); msg.style.filter = 'alpha(opacity=' + value + ')'; if(value >= 99) { clearInterval(msg.timer); msg.timer = null; } else if(value <= 1) { msg.style.display = "none"; clearInterval(msg.timer); } } // calculate the position of the element in relation to the left of the browser // function leftPosition(target) { var left = 0; if(target.offsetParent) { while(1) { left += target.offsetLeft; if(!target.offsetParent) { break; } target = target.offsetParent; } } else if(target.x) { left += target.x; } return left; } // calculate the position of the element in relation to the top of the browser window // function topPosition(target) { var top = 0; if(target.offsetParent) { while(1) { top += target.offsetTop; if(!target.offsetParent) { break; } target = target.offsetParent; } } else if(target.y) { top += target.y; } return top; } // preload the arrow // if(document.images) { arrow = new Image(7,80); arrow.src = "images/msg_arrow.gif"; } </script>
this is the form
thankxCode:<form name="form" id="form" class="form" action="mypage.php" onsubmit="return validate(this)" method="post"> <label for="name">Full Name:</label> <input type="text" name="name" id="name" /> <label for="email">Email Address:</label> <input type="text" name="email" id="email" /> <label for="gender">Gender:</label> <select name="gender" id="gender"> <option value ="">Please Select</option> <option value ="male">Male</option> <option value ="female">Female</option> </select> <label for="message">Message:</label> <input type="text" name="message" id="message" /> <input type="submit" value="Submit" class="submit" /> </form>



Reply With Quote

Bookmarks