i am making this form page where users input their first and last name as well as email address and phone number. i need a message to be placed next to each field (success if info it put in. ERROR if nothing is typed in)
now the question i have is how do i get my phone number field working and email? I need the phone number to have at least one dash so it will be valid and the email to have the @ symbol for it to be valid. how do i go about on doing this? i have this much done so far. someone please help
Code:// JavaScript Document function setupForm() { var fname_valid = false; var lname_valid = false; var phone_valid = false; var email_valid = false; var url_valid = false; var check = document.createElement("img"); check.setAttribute('src','img/check.jpg'); var stop = document.createElement("img"); stop.setAttribute('src','img/stop.jpg'); document.myform.fname_name.onblur = function() { var fname = document.getElementById('fname'); var span = fname.getElementsByTagName('span'); if(this.value.length > 0) { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Success!')); fname_valid = true; } else { span[0].firstChild.nodeValue = "Success!"; fname_valid = true; } } else { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Error!')); fname_valid = false; } else { span[0].firstChild.nodeValue = "Error!"; fname_valid = false; } } } document.myform.fname_name.onfocus = function() { var fname = document.getElementById('fname'); var span = fname.getElementsByTagName('span'); span[0].firstChild.nodeValue = "Enter the Correct Text!"; } // LAST NAME document.myform.lname_name.onblur = function() { var lname = document.getElementById('lname'); var span = lname.getElementsByTagName('span'); if(this.value.length > 0) { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Success!')); lname_valid = true; } else { span[0].firstChild.nodeValue = "Success!"; lname_valid = true; } } else { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Error!')); lname_valid = false; } else { span[0].firstChild.nodeValue = "Error!"; lname_valid = false; } } } document.myform.lname_name.onfocus = function() { var lname = document.getElementById('lname'); var span = lname.getElementsByTagName('span'); span[0].firstChild.nodeValue = "Enter the Correct Text!"; } // PHONE NUMBER INFO function is_numeric(mixed_var){ return (typeof(mixed_var) === 'number' || typeof(mixed_var) === 'string') && mixed_var !== '' && !isNaN(mixed_var); } function checkPhoneNumber(phoneNo) { var phoneRE = /^\d\d-\d\d\d\d\d\d\d\d$/; if (phoneNo.match(phoneRE)) { alert("YAY"); return true; } else { alert("NO"); return false; } } document.myform.phone_name.onblur = function() { var phone = document.getElementById('phone'); var span = phone.getElementsByTagName('span'); if(checkPhoneNumber(phone_id.value)=true) { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Success!')); phone_valid = true; } else { span[0].firstChild.nodeValue = "Success!"; phone_valid = true; } } else { if(span[0].firstChild.nodeValue == null) { span[0].appendChild(document.createTextNode('Error!')); phone_valid = false; } else { span[0].firstChild.nodeValue = "Error!"; phone_valid = false; } } } document.myform.phone_name.onfocus = function() { var phone = document.getElementById('phone'); var span = phone.getElementsByTagName('span'); span[0].firstChild.nodeValue = "Enter the Correct Text!"; } // EMAIL INFO function validate_email(field,alerttxt){ with (field){ apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2){ alert(alerttxt);return false; } else {return true;} } } document.myform.onsubmit = function() { processForm(fname_valid, lname_valid); return false; } } function processForm(fname_valid, lname_valid) { if(fname_valid && lname_valid) { alert('inside processForm()'); return false; } else { alert('something still is not valid'); return false; } } window.onload = setupForm;
Code:<body> <form method="post" name="myform"> <fieldset> <legend>User Information</legend> <div id="fname"> <label for="fname_id">First Name:</label><br/> <input id="fname_id" type="text" name="fname_name" value="" /> <span /> </div> <div id="lname"> <label for="lname_id">Last Name:</label><br/> <input id="lname_id" type="text" name="lname_name" value="" /> <span /> </div> <div id="phone"> <label for="phone_id">Phone Number:</label><br/> <input id="phone_id" type="text" name="phone_name" value="" /> <span /> </div> <div id="email"> <label for="email_id">Email:</label><br/> <input id="email_id" type="text" name="email_name" value="" /> <span /> </div> <div id="url"> <label for="url_id">Sulley Address:</label><br/> <input id="url_id" type="text" name="url_name" value="" /> <span /> </div> <!--Questions for survey --> <fieldset><legend> Survey</legend> <label for="question1">Do you drink alcohol?</label> <input type="radio" name="question1" value="true" />True <input type="radio" name="question1" value="false" />False <br/> <label for="question2"> Do you have a DUI?</label> <input type="radio" name="question2" value="true" />True <input type="radio" name="question2" value="false" />False <br/> </fieldset> <div id="submit"> <input id="submit" type="submit" name="submit" value="Click to Submit" /> </div> </fieldset> </form> </div> </body>


Reply With Quote
Bookmarks