|
JavaScript - User Validation Javascript Ie 8 Issues
Hi guys,
Great site by the way =). Basically if you view http://debtclock.co.uk/contact and click the form submit before inputting any details in the boxes you will see that the boxes highlight red to indicate there are some fields missing. Everything works fine, but if you view it on I.E 8 you can see that the red fill doesnt appear, only the text above it saying there are errors. Anyway I hope someone can get back to me with an idea, I am sat here in the office pulling my hair out not having an idea what it could be ><><>< Similar TutorialsCode: <!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>Untitled Document</title>
<script type='text/javascript'>
function myForm(){
// Make quick references to our fields
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var address = document.getElementById('address');
var city = document.getElementById('city');
var state = document.getElementById('state');
var zcode = document.getElementById('zcode');
var email = document.getElementById('email');
// Check each input in the order that it appears in the form!
if(isAlphabet(fname, "Please enter only letters for your first name")){
if(isAlphabet(lname, "Please enter only letters for your last name")){
if(isAlphanumeric(address, "Numbers and Letters Only for Address")){
if(isAlphabet(city, "Please enter only letters for your city name")){
if(madeSelection(state, "Please Choose a State")){
if(isNumeric(zcode, "Please enter a valid zip code")){
if(emailValidator(email, "Please enter a valid email address")){
return true;
}
}
}
}
}
}
}
return false;
}
function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}
function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z\s]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
</head>
<body>
<p>My Form.</p>
<form action="conformation.html" target="_self" onsubmit="return myForm()">
<fieldset>
<legend>Name</legend>
First Name:
<input type="text" id="fname" value="" />
<br />
Last Name:
<input type="text" id="lname" value="" />
<br />
</fieldset>
<br />
<fieldset>
<legend>Address</legend>
Address:
<input type="text" id="address" value="" />
<br />
City:
<input type="text" id="city" value="" />
<br />
State:
<select id="state">
<option>Please Choose</option>
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
<br />
Zip Code:
<input type="text" id="zcode" value="" />
<br />
</fieldset>
<br />
<br />
<fieldset>
<legend>E-mail Address</legend>
E-mail Address:
<input type="text" id="email" value="" />
<br />
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
Hello Everyone - I am trying to make a form that requires a user to either enter in their mailing address and or e-mail or both. For example, if somebody only enters in their e-mail address the form would validate correctly and send the validation information to a conformation page. Or, the other s scenario would be they entered their mailing address information but left the e-mail field blank, the form would validate and confirm the form information on a conformation page. Or the last scenario would be that all fields were filled out, which then wouldn't be an issue(my form does this now). What I have done was made a custom function, which is in the code above on line, 39 and then have it called on an onsubmit button but that wasn't working. Code he Code: function formChoice(elem, helperMsg){
if(elem.fname, elem.lname, elem.address, elem.city, elem.state, elem.zcode == 0 || elem.email == 0){
return true;
}else{
alert(helperMsg);
elem.focus();
return flase;
}
}
The other thing I tried to do was making the if on line 25 an else if else and or just an else. I understand with an else if the condition are not met than the if statement moves on to the else and if that isn't met then both statements are false and the form will not submit, but both else if else, and else doesn't work at line 25. I tried moving the line 25 e-mail line down past the brackets and that didn't work. I have read many books and have visited many sites to try on my own to learn how to do this, and I think I am not understanding some basic concepts, and I would be tickled if somebody could look at my code and look at my problem and see what knowledge I am missing and how to fix my problem. Thanks. Hello guys, I am trying to create a basic unobtrusive form validation function but I am having some issues/questions. Basically I am checking if any of the form fields have <= 3 characters, and if they do so, then I make those fields' backgrounds and borders red. Also in the empty <span> tags I insert an error message. My issues/questions a #1: So when I say if (fieldVals[i]<=3) this means that the errors should appear if the values are 1,2 or 3 characters long, right? It does not do that though, when I insert one character in any of the form fields the errors go away, but they should not, right? #2: How do I cancel the form from submitting if errors are visible and vice versa? When I use the return false when errors are visible, the code does not even run. What is going on? return true does the same. #3: When I use a submit button(type="submit") instead of just a button(type="button"), the code does not run? What am I doing wrong? NOTE: I am not trying to use this on a website, I am just trying to learn how to use unobtrusive javascript. That's why I am only checking for empty fields. If I learn how to do this first, later I will try to add email check, date check etc. (sorry for the long message) Any help would be much appreciated, thanks! THE CODE: function addEvent (eventObj, event, codeToEexcute) { if (eventObj.addEventListener) { eventObj.addEventListener(event, codeToEexcute, false ); } else if (eventObj.attachEvent) { // If IE event = "on" + event; eventObj.attachEvent(event, codeToEexcute); } } function cancelEvent(event) { if (event.preventDefault) { event.preventDefault(); event.stopPropagation(); } else { event.returnValue = false; event.cancelBubble = true; } } addEvent(window, 'load', pageEvents); function pageEvents () { if (!document.getElementById || !document.createTextNode) {return;} var send = document.getElementById('send'); //<input type="button" id="send" value="Contact Us" /> if (!send) {return;} addEvent(send, 'click', validate); } function validate () { var name = document.getElementById('name'); //<input type="text" name="name" id="name" value="" /> var lastName = document.getElementById('lastName'); //<input type="text" name="lastName" id="lastName" value="" /> var email = document.getElementById('email'); //<input type="text" name="email" id="email" value="" /> var subject = document.getElementById('subject'); //<input type="text" name="subject" id="subject" value="" /> var message = document.getElementById('message'); //<textarea name="message" id="message" value=""></textarea> var fields = [name, lastName, email, subject, message]; var fieldVals = [name.value, lastName.value, email.value, subject.value, message.value]; for (var i = 0; i<fieldVals.length; i++) { var contactForm = document.getElementById('contactForm'); //<form> tag var errs = contactForm.getElementsByTagName('span'); //one empty <span> tag next to each form field if (fieldVals[i]<=3) { //BUG HE it still validates with 3 or less character but it should not, right? fields[i].style.background = "#FFCCCC"; fields[i].style.borderColor = "red"; errs[i].innerHTML ="Please enter a correct value"; //by using 'i' I get the same index for the <span> tags //if I insert a "return false" here, the code above does not run. //how do I make the form not to submit when the code above is executed? } else { fields[i].style.background = "none"; fields[i].style.borderColor = "#cecece"; errs[i].innerHTML = " "; //how do I make the form to submit? when i use "return true" the code above does not run. } } //end for loop } //end validate HI All, i have a form with 5 date fields, and i need to validate these fields against each other and prevent two date fields from future dates. I have used EPOCH calendar control on my page and set all date fields as read only. The calendar function is called on page load event. I have written a function to compare my dates (comparedates()) and called this function into another function (validateform(this)) which is triggered when the form is submitted. The validateform function first checks for null values and then calls comparedates function. When i test the form, the validate form works well and the form won't submit if there are any missing details, however when it executes the comparedates() function, this is what happens: in FireFox: alerts are popping up, but the page is submitted anyway in IE8 : alerts do not pop up and the page is submitted in both browsers i don't see any javascript error. here is the code i'm using in the page, apart from validateform and compare dates, i have a function to check email and another function to disable/enable text field upon a specific selection from a drop down. These two functions work perfectly, i just included them in the code just to see if it is at all affecting my comparedate() function. please let me know if you would like to also see EPOCH calendar code. Thank you for your help Maryam Code: function getToday() {
var date = new Date();
var mm = zeroPadValue(date.getMonth() + 1);
var dd = zeroPadValue(date.getDate());
var yyyy = date.getFullYear();
var result = yyyy + "-" + mm + "-" + dd;
return result;
}
function zeroPadValue(value) {
if (value < 10) {
value = "0" + value;
}
return value;
}
function validateForm(form) {
var sysDate = new getToday();
var obj=document.createform.nationality;
for(var i=0; i < form.elements.length; i++){
if(form.elements[i].value.length == 0 && form.elements[i].name != "submit" && form.elements[i].name !="qualification" && form.elements[i].name !="gender" &&
form.elements[i].name !="marital" && form.elements[i].name !="cbirth" && form.elements[i].name !="citybirth" && form.elements[i].name !="email" &&
form.elements[i].name !="pspace" && form.elements[i].name !="paidby" && form.elements[i].name !="visano" && form.elements[i].name !="difcsponsored" &&
form.elements[i].name !="vissuedate" && form.elements[i].name !="vexpirydate" && form.elements[i].name !="compreg"){
alert('No value entered in '+form.elements[i].title+'.');
form.elements[i].focus();
return false;
}
}
comparedates();
return true;
}
function comparedates()
{
var form = document.forms[0];
var curr = new Date(getToday());
var getdob = new Date(document.createform.dob.value);
var getpi = new Date(document.createform.pissue.value);
var getpe = new Date(document.createform.pexpiry.value);
for(var i=0; i < form.elements.length; i++)
{
if(form.elements[i].name =="dob")
{
if(getdob > curr)
{
alert(form.elements[i].title + ' cannot be greater than today\'\s date.');
form.elements[i].focus();
return false;
}
}
if(form.elements[i].name=="pissue")
{
if(getpi > curr )
{
alert(form.elements[i].title+' cannot be greater than today\'\s date.');
form.elements[i].focus();
return false;
}
if(getpi < getdob)
{
alert(form.elements[i].title+' cannot be smaller than ' + document.createform.dob.title + '.');
form.elements[i].focus();
return false;
}
}
if(form.elements[i].name=="pexpiry"){
if(getpe < getpi)
{
alert(form.elements[i].title+' cannot be smaller than ' + document.createform.pissue.title +'.');
form.elements[i].focus();
return false;
}
if( getpe < getdob)
{
alert(form.elements[i].title+' cannot be smaller than '+ document.createform.dob.title+'.');
form.elements[i].focus();
return false;
}
}
}
}
function disableFields(obj){
if(obj.options[obj.selectedIndex].value=="BH" || obj.options[obj.selectedIndex].value=="KW" || obj.options[obj.selectedIndex].value=="OM" || obj.options[obj.selectedIndex].value=="QA" ||
obj.options[obj.selectedIndex].value=="SA" || obj.options[obj.selectedIndex].value=="AE"){
// alert('true');
document.createform.visano.disabled=true;
document.createform.difcsponsored.disabled=true;
document.createform.vissuedate.disabled=true;
document.createform.vexpirydate.disabled=true;
} else {
document.createform.visano.disabled=false;
document.createform.difcsponsored.disabled=false;
document.createform.vissuedate.disabled=false;
document.createform.vexpirydate.disabled=false;
}
}
function validateEmail(myemail){
var AtPos = myemail.value.indexOf("@");
var StopPos = myemail.value.lastIndexOf(".");
var Message = "";
//var getemail = document.getElementById("txtemail");
if (myemail.value.length !=0){
if (AtPos == -1 || StopPos == -1 || StopPos < AtPos || StopPos - AtPos == 1) {
Message = "Not a valid email address";
alert (Message);
//myemail.focus();
setTimeout('document.getElementById(\'email\').focus();document.getElementById(\'email\').select();',0);
//return false;
} else {
return true;
}
}
}
function callall(){
getCal();
// comparedates();
}
Hello, first off, let me just say that I'm very happy to be apart of this community. It seems like this may be my new home away from home. Now, I'm a beginner with JavaScript and I'm working on a forum validation but I have a few questions. First off, here's the code I'm working on: Essentially the code below checks every field with the class "req" for input, and it also validates the email address but I'm not sure how exactly.. Could someone explain the condition for the if statement? I am really lost, especially with the random "+2's" and "x.length". What is x? it was never defined? and what is with the +2's? what are they adding onto? Thanks. Here's the code too: Code:
function alertme(){
for(var i = 1;i < myform.elements.length;i++){
if(myform.elements[i].className == "req" && myform.elements[1].value.length == 0) {
alert("Please fill in all required fields");
return false;
}
}
var email = document.getElementById('email').value;
var atpos = email.indexOf('@');
var dotpos = email.lastIndexOf('.');
if (atpos < 1 || dotpos < atpos+2 || dotpos+2 >= x.length){
alert("Not a valid email")
false;
}
}
Any help is appreciated, thanks a lot guys. I am new here, and having massive difficulties with JavaScript, so like everything else I'm interested in, there's an awesome forum available so here I am. I have been browsing the site all night, checking stickies, searching related issues, etc but still having trouble. I am creating a pizza order form. Yes I see that there are previous issues with Pizza order forms, but they did not help. I've got issues with validation, and my test code does not respond at all when I click the submit button. What am I doing wrong? Code: <!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>Final Test 2</title>
<script type="text/javascript">
function crust_form() {
if ( document.crust_form.crust.selectedIndex == false )
{
alert ( "Please select a Crust type." );
return false;
}
else if ( document.crust_form.crust.selectedIndex == deep )
{
alert ( "You selected Deep Dish Pizza.");
return true;
}
else if ( document.crust_form.crust.selectedIndex == thin )
{
alert ( "You selected Thin Crust Pizza.");
return true;
}
else if ( document.crust_form.crust.selectedIndex == parmesagn )
{
alert ( "You selected Parmesagn Cheese Crust Pizza.");
return true;
}
else if ( document.crust_form.crust.selectedIndex == sourdough )
{
alert ( "You selected Sourdough Crust Pizza.");
return true;
}
}
</script>
</head>
<body>
<form action="" onsubmit="return crust();" name="crust_form" method="post">
<select name="crust">
<option selected value="false">Select Crust Type</option>
<option value="deep">Deep Dish</option>
<option value="thin">Thin Crust</option>
<option value="Parmesagn">Parmesagn Cheese</option>
<option value="sourdough">Sourdough</option>
</select>
<input type="submit" value="Submit">
</form>
</body>
</html>
Hello, Im still new to JS/Ajax/PHP and Im creating a filter(html checkbox form) that will call a single query that will filter unwanted items.. This query contains a INNER JOIN, AND and ON conditions. I have also created a simple javascript loop to scan the form for checked values.. but im having trouble connecting the dots.. Im not certain how to make each checked value trigger individual parts of the query.. Heres what I have: Loop: Code: function sendInfo(form) {
var filterList = "";
for( var i =0; i < form.elements.length; i++ ) {
if( form.elements[i].type = 'checkbox' ) {
if( form.elements[i].checked == true ) {
filterList += form.elements[i].value + ',';
}
}
}
alert("The filter list is " + filterList);
}
HTML FORM: Code: <form name="filterForm" id="filterForm"> <input type="checkbox" name="red" value="red" id="red"> RED <input type="checkbox" name="blue" value="blue" id="blue"> BLUE <input type="checkbox" name="green" value="green" id="green"> GREEN <input type="submit" name="submit" value="click" onClick="sendInfo(document.filterForm)"> </form> PHP/Mysql QUERYused to filter results) Code: $submitFilter= isset($_POST['submit']);
if($submitFilter)
{
//checks for submitted form
//connect to database
//select database
$filterQuery= mysql_query("SELECT *
FROM table_1
INNER JOIN table_2 ON table_1.color_Id=table_2.color_Id
WHERE
table_2.color_Category <> 'red'
AND table_2.color_Type <> 'red'
AND table_2.color_Category <> 'blue'
AND table_2.color_Type <> 'blue'
AND table_2.color_Category <> 'green'
AND table_2.color_Type <> 'green'
As you can see I have joined two tables and want to exclude any from table_1 where the color is red.. how can I request this action from the loop once a check box has been checked??? like I said im new so if this looks wrong/confusing feel free to be brutal !! I have searched the forums and Iv been close to finding an example/post but nothing solid.. I think I mayb using the wrong terminology/descriptions in my searches to find the correct results bcuz I feel like im circling the block to no end.. PLEASE HELP or POINT ME IN THE RIGHT DIRECTION!!!!! THANKS IN ADVANCE! Hi Everyone, I'm trying to allow a user to select an XML file so that my javascript can parse it and create some pins for a google map. It works fine in Firefox, and by using FireBug I can see that the file is being accessed as expected. IE on the other hand tells me that "'files.0' is null or not an object" on line 68 of address-locator.php... PHP Code: <!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>Address Locator</title> <style type="text/css"> #map_canvas { width:690px; height:400px; float: left; clear: right; margin: 0px auto 10px 20px; } </style> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> var map = null; var geocoder = null; var establishmentList; // holds the XML list of all the establishments var mapPins = []; // holds a listing of all the map pins google.load('maps', '3', { other_params: 'sensor=false' }); google.setOnLoadCallback(gmapInit); // initialize the google map function gmapInit() { var latlng = new google.maps.LatLng(42.204799,-111.619917); // 45.332245,-99.507536 center of north america var myOptions = { zoom: 4, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } // includes all the information needed to create a pin with a pop up window function mapPin(pinName, pinAddress, pinPhone, pinWebsite, pinLat, pinLng, geocodeSuccess){ this.pName = pinName; this.pAddress = pinAddress; this.pPhone = pinPhone; this.pWebsite = pinWebsite; this.pLat = pinLat; this.pLng = pinLng; this.success = geocodeSuccess; } // gets the lat and lng of an address and adds a pin to the mapPins array. function getLocation(theName, theAddress, thePhoneNumber, theWebsite){ /* geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': theAddress}, function(results, status){ if (status == google.maps.GeocoderStatus.OK) { mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, results[0].geometry.location, true)); } else { mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, 0, 0, false)); alert("Geocode was not successful for the following reason: " + status); } }); */ // remove after working mapPins.push(new mapPin(theName, theAddress, thePhoneNumber, theWebsite, 42.204799, -111.619917, true)); // end removing code } /* loadAddressFile() * opens an XML file which contains descriptions (names), addresses, phone numbers, * and websites for a business and loads the pertetinent information into the global * variable establishmentList. Starts the call chain to have the data processed */ function loadAddressFile() { // open the file selected by the user var finput = document.getElementById("userAddressFile"); var theFile = finput.files[0]; if (theFile) { var fileReader = new FileReader(); fileReader.onload = function(e){ var xmlDoc; // parse (or load) the xml into xmlDoc. if (window.DOMParser){ parser = new DOMParser(); xmlDoc = parser.parseFromString(e.target.result,"text/xml"); } else { // Internet Explorer xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false"; xmlDoc.loadXML(e.target.result); } // listing of the establishments establishmentList = xmlDoc.getElementsByTagName("establishment"); processEstablishment(0, 1000); } fileReader.readAsText(theFile); } else { alert("Failed to load file"); } } // checks to see if the index parameter is less than the length of the list of establishments and processes the establishment at that index in the list if it is. function processEstablishment(index, delay){ if(index < establishmentList.length){ // data from the XML file var theName = establishmentList[index].getElementsByTagName("name")[0].textContent; var theAddress = establishmentList[index].getElementsByTagName("address")[0].textContent; var thePhoneNumber = establishmentList[index].getElementsByTagName("phone")[0].textContent; var theWebsite = establishmentList[index].getElementsByTagName("website")[0].textContent; // get the current addresses geocoding and add the pin to the list getLocation(theName, theAddress, thePhoneNumber, theWebsite); // check to see if the attempt was successfull - if it was not and we are denied our data - increase the hold time and retry the previous attempt if(!mapPins[index].success){ index--; delay += 5000; } // attempt (or re-attempt) the next establishment window.setTimeout(function() { processEstablishment(index+1, delay); document.getElementById("data").innerHTML += mapPins[mapPins.length-1].pName + "<br />"; }, delay); } } </script> <!-- open the file of addresses if it exists and create a javascript array of the addresses --> </head> <body> <!-- This page is set up to allow the user to load an XML file which contains information about businesses and creates the data required to locate that business on a map --> <div id="map_canvas"></div> <div style="clear:left"> <div style="float:left"> <!-- User the file type to allow the user to select the file, then pass this information to javascript via accessing userAddressFile via document.getElementById("userAddressFile") in loadAddressFile() above --> <form id="addresses" action="address-locator.php" method="post" enctype="multipart/form-data"> Select file: <input name="userAddressFile" id="userAddressFile" type="file" /> <input value="Upload" type="button" onclick="loadAddressFile()" /> </form> </div> <div id="data" style="clear:left"></div> </div> </body> </html> and a sampling of the XML file I'm loading: Code: <?xml version="1.0" encoding="UTF-8"?> <barList> <establishment> <name>21-Seven Bar and Grill</name> <address>217 E Street,Davis, CA</address> <phone>530.757.1733</phone> <website>http://www.myspace.com/21seven_davis</website> </establishment> <establishment> <name>Beach Hut Deli</name> <address>109 E Street, Davis, CA</address> <phone>530.758.7873</phone> <website>http://www.beachhutdeli.com/</website> </establishment> <establishment> <name>Bistro 33 Davis</name> <address>226 F Street, Davis, CA</address> <phone>530.756.4556</phone> <website>www.bistro33.com</website> </establishment> </barList> I've spent the entire afternoon in Goo-gle-land - so any help is most appreciated! If I've missed anything or you have any questions please let me know. Thanks in advance! Dave. Hi All, Using Dreamweaver CS4. I have a web form that is submitted and then we pull up the information in excel using delimited fields. The problem with this is the end user will use commas (even though we have messages that say do not use commas) which messes up our data in excel. I created some code for a different field where commas were more frequent but there are new fields that users are adding commas into. Anyways, I can't figure out exactly how to code this and was wondering if someone could work out the kinks for me: My code: Code:
if ( trim( frm.elements["ShipToBuildingRoom."] ).length < 4 )
oops += "You must enter your Building and Room information.\n"<br>
var val = frm.ShipToBuildingRoom.value.replace(/[^\d\;\,]/g, "" ).replace(/\,/g, ";");
frm.ShipToBuildingRoom.value = val;
Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'email',
'phone' : '(555) 123-4567',
'other' : 'other',
'detail' : 'project overview'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#phone').inputfocus({ value: field_values['phone'] });
$('input#other').inputfocus({ value: field_values['other'] });
$('input#detail').inputfocus({ value: field_values['detail'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#first_step input[type=text]');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
} else
return false;
});
$('#back_second').click(function(){
//update progress bar
$('#progress_text').html('0% Complete');
$('#progress').css('width','0px');
//slide steps
$('#second_step').slideUp();
$('#first_step').slideDown();
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var fields2 = $('#second_step input[textarea]');
var error = 0;
fields2.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else
return false;
});
$('#back_third').click(function(){
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#third_step').slideUp();
$('#second_step').slideDown();
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('75% Complete');
$('#progress').css('width','255px');
//prepare the fourth step
var fields3 = new Array(
$('#time').val(),
$('#budget').val()
);
var fields2half = new Array(
$('#detail').val()
);
var fields2 = new Array(
$('#other').val(),
$('#pages').val()
);
var fields1 = new Array(
$('#name').val(),
$('#email').val(),
$('#phone').val(),
$('#contact').val(),
$('#url').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
$('#back_fourth').click(function(){
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#fourth_step').slideUp();
$('#third_step').slideDown();
});
$('#submit_fourth').click(function(){
//send information to server
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//slide steps
$('#fifth_step').slideUp();
$('#fourth_step').slideDown();
if(error <= 0) {
return true
}
else{
return false
}
});
});
When I enter the data into my form then submit it, it is supposed to be inserted into my MySql database but I get the following error: "Unable to save data to database: Incorrect date value: '3-31-2001' for column 'sent_date' at row 1" The sent_date field is the first date field the user types in. The TYPE for this field in the MySql database is set to DATE. Any ideas what is going on? I think the problem is in my javascript but can't find the problem... _________________________________________________________ Below is the javascript code _________________________________________________________ <script type="text/javascript"> var valid; function dcheck(form) { var a = form.assgn_date.value; var s = form.sent_date.value; var i = form.interv_date.value; var dr = form.due_rev.value var su = form.due_suspo var clk = form.due_clerk var att = form.due_attny var jdg = form.due_judge var assn = new Date(a); var sent = new Date(s); var intv = new Date(i); var due_rev = new Date(dr); var due_suspo = new Date(su); var due_clerk = new Date(clk); var due_attny = new Date(att); var due_judge = new Date(jdg); if (isNaN(sent)) { sent = new Date(assn.getFullYear(),assn.getMonth(),assn.getDate()-7); } if (isNaN(due_rev)) { due_rev = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-42); } if (isNaN(due_suspo)) { due_suspo = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-40); } if (isNaN(due_clerk)) { due_clerk = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-38); } if (isNaN(due_attny)) { due_attny = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-36); } if (isNaN(due_judge)) { due_judge = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-7); } form.sent_date.value = (sent.getMonth()+1) + "-" + sent.getDate() + "-" + sent.getFullYear(); form.due_rev.value = (due_rev.getMonth()+1) + "-" + due_rev.getDate() + "-" + due_rev.getFullYear(); form.due_suspo.value = (due_suspo.getMonth()+1) + "-" + due_suspo.getDate() + "-" + due_suspo.getFullYear(); form.due_clerk.value = (due_clerk.getMonth()+1) + "-" + due_clerk.getDate() + "-" + due_clerk.getFullYear(); form.due_attny.value = (due_attny.getMonth()+1) + "-" + due_attny.getDate() + "-" + due_attny.getFullYear(); form.due_judge.value = (due_judge.getMonth()+1) + "-" + due_judge.getDate() + "-" + due_judge.getFullYear(); return true; } </script> Hello Every1 I need to edit the below form to use JavaScript to Validate if thr Title was put or Not .. its a template i use at my site to add comment and i want the Title to be Requier .Javascript seems the easiest way for me but dont know how. PHP Code: <{if $commentany.com_itemid}> <form action="comment_post.php" method="POST"> <input type="hidden" name="com_itemid" value="<{$commentany.com_itemid}>"> <input type="hidden" name="XOOPS_TOKEN_REQUEST" value="<{$commentany.xoops_token_request}>"> <table class='outer' cellspacing='1' style="margin-top:2em;"> <tr> <th colspan="2"><{$smarty.const._MB_COMMENTANY_LANG_NEW_COMMENT}></th> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_RULE}></td> <td class='odd' align='left'> <{$commentany.rule_text}> </td> </tr> *}> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_ICON}></td> <td class='odd' align='left'> <{foreach item=i from=$commentany.com_icon}> <input type="radio" name="com_icon" value="<{$i}>"><img src="<{$smarty.const.XOOPS_URL}>/images/subject/<{$i}>"> <{/foreach}> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TITLE}></td> <td class='odd' align='left'> <input type="text" name="com_title" size="64" maxlength="255" value="<{$xoops_default_comment_title}>"> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TEXT}></td> <td class='odd' align='left'> <{xoopsdhtmltarea name="com_text" cols=50 rows=4}> </td> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_OPTION}></td> <td class='odd' align='left'> <input type="checkbox" name="dosmiley" value="1" checked><{$smarty.const._CM_DOSMILEY}><br/> <input type="checkbox" name="doxcode" value="1" checked><{$smarty.const._CM_DOXCODE}><br/> <input type="checkbox" name="dobr" value="1" checked><{$smarty.const._CM_DOAUTOWRAP}><br/> </td> </tr> *}> <tr> <td class='head' align='left'></td> <td class='even' align='left'> <input type='submit' class='formButton' name='com_dopreview' id='com_dopreview' value='<{$smarty.const._MB_COMMENTANY_LANG_PREVIEW}>' /> <input type='submit' class='formButton' name='com_dopost' id='com_dopost' value='<{$smarty.const._MB_COMMENTANY_LANG_SUBMIT}>' /> </td> </tr> </table> <input type="hidden" name="dohtml" value="0" /> <input type="hidden" name="dosmiley" value="1" /> <input type="hidden" name="doxcode" value="1" /> <input type="hidden" name="dobr" value="1" /> </form> <{/if}> <{$commentsnav|replace:'button':'hidden'}> 1.I want to retain the value of the item selected from the drop down list even if the validation fails 2. The input element should be hghlighted red in colour which fails the validation <html> <script type="text/javascript"> <!-- function validate_form1 ( ) { valid = true; if ( document.contact_form1.question1.value=="" || document.contact_form1.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); document.getElementById('contact_form1').question1.focus(); valid = false; } return valid; } function validate_form2 ( ) { valid = true; if ( document.contact_form2.question1.value=="" || document.contact_form2.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); valid = false; } return valid; } //--> </script> <table border="5" width="300"> <tr> <td> <form name="contact_form1" action="DBsaving.php" method="post" onSubmit="return validate_form1 ( );"> 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> <td> <form name="contact_form2" action="DBsaving.php" method="post" onSubmit="return validate_form2 ( );" > 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="yes1">Yes</option><option value="no1">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="yes">Yes</option><option value="no">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> </tr> </table> </html> Hi, validation for pin must not be allow given below conditions 6 rising consecutive numbers(e.g 123456,456789 etc) 6 Descending consecutive numbers (eg. 654321,987654) All same digit (eg 111111,222222) Same digit appearing 3 or more time in pin code (eg:121212,1111432) Hi. I am trying to do some sim[ple form validation using javascript. I have a simple html file Code: <!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>Send Card</title> <script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script> </head> <body> <form action="getName.php" onsubmit="return validate_form(this);"> Receiver (To): <input type="text" name="name"><br> Sender (From): <input type="text" name="sender"><br> Email: <input type="text" name="email"><br> <input type="submit" value="Submit"> </form> </body> </html> Which calls up my javascript and php file (The php file should only be used when the javascript has found no errors). Now I have a js file which does some validation Code: <script type="text/javascript">
function validate_required(field,alerttxt) {
with (field) {
if (value==null||value=="") {
alert(alerttxt);
return false;
}
else {
return true;
}
}
}
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;
}
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required(name,"Please specify your name!")==false) {
name.focus();
return false;
}
if (validate_required(sender,"Please specify the receivers name!")==false) {
sender.focus();
return false;
}
if (validate_required(email,"Email must be filled out!")==false) {
email.focus();
return false;
}
if (validate_email(email,"Not a valid e-mail address!")==false) {
email.focus();
return false;
}
}
}
</script>
When I run it on my server, I get the form and enter nothing into it, I just click submit. However, it goes straight to the php file and brings up my flash movie, which it shouldnt do. When nothing is entered, the js file should return the error. I thought I had everything set up correctly, but obviously not. Can someone see where I am going wrong? cheers I have a validation issue. I need the input fields to highlight yellow if no text has been entered and when the form is submitted the error message displays to check the highlighted fields. I get the input boxes to highlight when there is no text but on submit the form goes to the next page without the error alert message. Any suggestions would be appreciated. My HTML page: Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Filename: works.htm
Supporting files:
-->
<!-- #BeginEditable "doctitle" -->
<title>Wizard Works Order Form</title>
<!-- #EndEditable -->
<link href="ww.css" rel="stylesheet" type="text/css" />
<script src="functions.js" type="text/javascript"></script>
<script src="valid.js" type="text/javascript"></script>
</head>
<body>
<form id="order" action="file:///F:/JavaScript/case4/done.htm" onsubmit="return validateForm()" method="post">
<div id="page">
<div id="head">
<img alt="Wizard Works" src="logo.jpg" />
</div>
<ul id="links">
<li><a href="#">Home</a></li>
<li><a href="#">Assortments</a></li>
<li><a href="#">Firecrackers</a></li>
<li><a href="#">Fontains</a></li>
<li><a href="#">Cones</a></li>
<li><a href="#">Rockets</a></li>
<li><a href="#">Sparklers</a></li>
<li><a href="#">Online Store</a></li>
<li><a href="#">Shopping Cart</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Safety</a></li>
<li><a href="#">Tech Support</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="webform">
<fieldset id="purchase">
<legend>Order</legend>
<label id="produtLab" class="required" for="product">1) Product</label>
<select id="product">
<option value="">Select a Product</option>
<option value="3.5">Green/Purple Fountain: $3.50 ea.</option>
<option value="4.95">Silver Cone: $4.95 ea.</option>
<option value="6.95">Glitter Cone: $6.95 ea.</option>
<option value="9.95">Glittering Stars: $9.95 ea.</option>
<option value="19.95">Fountain Kit: $19.95 ea.</option>
<option value="29.95">Fountain Kit Deluxe: $29.95</option>
<option value="39.95">Giant Fountain: $39.95</option>
</select>
<br />
<label id="qtyLab" class="required" for="qty">2) Quantity</label>
<select id="qty">
<option value="">Select a Quantity</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
<option value="3"> 3</option>
<option value="4"> 4</option>
<option value="5"> 5</option>
<option value="6"> 6</option>
<option value="7"> 7</option>
<option value="8"> 8</option>
<option value="9"> 9</option>
<option value="10">10</option>
</select>
<br />
<label id="shippingLab" class="required" for="shipping">2) Shipping</label>
<select id="shipping">
<option value="">Select a Shipping Option</option>
<option value="4.95">Standard ($4.95)</option>
<option value="8.95">Express ($8.95)</option>
<option value="12.95">Next Day ($12.95)</option>
</select>
<br />
<label id="totalLab" for="total">3) Total Calculated Cost</label>
<input id="total" readonly="readonly" size="20" type="text" />
</fieldset>
<fieldset id="contact">
<legend>Contact Information</legend>
<label id="fnameLab" class="required" for="fname">4) First Name</label>
<input id="fname" size="20" type="text" class="validate" onblur="changeColor(this)" />
<br />
<label id="lnameLab" class="required" for="lname">5) Last Name</label>
<input id="lname" size="20" type="text" onblur="changeColor(this)" />
<br />
<label id="addressLab" class="required" for="address">6) Address</label>
<textarea id="address" cols="20" rows="5"onblur="changeColor(this)" ></textarea>
<br />
<label id="phoneLab" class="required" for="phone">7) Phone (nnn) nnn - nnnn</label>
<input id="phone" size="20" type="text" onblur="changeColor(this)" />
</fieldset>
<fieldset id="credit">
<legend>Payment Information</legend>
<label for="ccard">8) Credit Card</label>
<select id="ccard">
<option value="ae">American Express</option>
<option value="dc">Diners Club</option>
<option value="disc">Discover</option>
<option value="mc">MasterCard</option>
<option value="visa">Visa</option>
</select>
<br />
<label id="cholderLab" class="required" for="cholder">9) Card Holder</label>
<input id="cholder" size="20" type="text"onblur="changeColor(this)" />
<br />
<label id="cnumLab" class="required" for="cnum">10) Card Number</label>
<input id="cnum" size="20" type="text"onblur="changeColor(this)" />
<br />
<label class="required">11) Expiration Date</label>
<select id="cmonth" name="cmonth">
<option>01</option><option>02</option><option>03</option>
<option>04</option><option>05</option><option>06</option>
<option>07</option><option>08</option><option>09</option>
<option>10</option><option>11</option><option>12</option>
</select>
/
<select id="cyear" name="cyear">
<option>2010</option><option>2011</option><option>2012</option>
<option>2013</option><option>2014</option><option>2015</option>
</select>
</fieldset>
<input id="sbutton" type="submit" value="Submit Order" onclick="returm validateForm();return false;"/>
</div>
</div>
</form>
</body>
</html>
My valid.js code: Code: /*
Functions List:
initForm()
Initiates the Web form for use by the customer
calcCost()
Calculates the cost of the customer order
validLengths()
Validates that empty values have been entered for required
fields
testLength(field)
Tests the length of the text string in the specified field
validPatterns()
Validates that the field values match their regular expressions
testPattern(field, reg)
Tests a text string against a specified regular expression
validCNum()
Tests that the specified credit card number passes the Luhn formula
validateForm()
Performs a validation test on all of the fields in the form
*/
window.onload = initForm;
var wform;
var productIndex = 1;
var qtyIndex = 1;
var shipIndex = 1;
function initForm() {
wform = document.forms[0];
wform.product.onchange = calcCost;
wform.qty.onchange = calcCost;
wform.shipping.onchange = calcCost;
wform.onsubmit = validateForm;
}
function calcCost() {
productIndex = wform.product.selectedIndex;
productCost = parseFloat(wform.product.options[productIndex].value);
qtyIndex = wform.qty.selectedIndex;
qtyVal = parseFloat(wform.qty.options[qtyIndex].value);
shipIndex = wform.shipping.selectedIndex;
shipVal = parseFloat(wform.shipping.options[shipIndex].value);
if (productIndex != 0 && qtyIndex != 0 && shipIndex != 0) {
wform.total.value = "$"+(productCost*qtyVal+shipVal).toFixed(2);
}
}
function validLengths() {
var isValid = true;
if (testLength(wform.total)== false) isValid = false;
if (testLength(wform.fname)== false) isValid = false;
if (testLength(wform.lname)== false) isValid=false;
if (testLength(wform.address)== false) isValid=false;
if (testLength(wform.phone)== false) isValid=false;
if (testLength(wform.cholder)== false) isValid=false;
if (testLength(wform.cnum)== false) isValid=false;
return isValid;
}
function testLength(field) {
var isValid = true;
if (field.value.length == 0) {
document.getElementById(field.id+"contact").style.bgcolor="yellow";
isValid = false;
} else {
document.getElementById(field.id+"contact").style.bgcolor="white";
}
return isValid;
}
function validPatterns() {
var isValid = true;
phonereg = /^\(?\d{3}[\)-]?\s?\d{3}[\s-]?\d{4}$/;
if (testPattern(wform.phone, phonereg) == false) isValid = false;
creditType = wform.ccard.selectedIndex;
switch (creditType) {
case 0: cregx = /^3[47]\d{13}$/; break;
case 1: cregx = /^30[0-5]\d{11}$|^3[68]\d{12}$/; break;
case 2: cregx = /^6011\d{12}$/; break;
case 3: cregx = /^5[1-5]\d{14}$/; break;
case 4: cregx = /^4(\d{12}|\d{15})$/; break;
}
if (testPattern(wform.cnum, cregx) == false) isValid = false;
return isValid;
}
function testPattern(field, reg) {
var isValid = true;
wsregx = /\s/g;
var fv =field.value.replace(wsregx,"");
if (reg.test(fv) == false) {
isValid = false;
document.getElementById(input.id+"fname").style.bgcolor="yellow";
} else {
document.getElementById(input.id+"fname").style.bgcolor="white";
}
return isValid;
}
function validCNum() {
var isValid = true;
wsregx = /\s/g;
var fv = wform.cnum.value.replace(wsregx,"");
if (luhn(fv)==false) {
isValid = false;
document.getElementById("cnum").style.bgcolor="yellow";
} else {
document.getElementById("cnum").style.bgcolor="white";
}
return isValid;
}
function changeColor(field) {
var fv = field.value;
if (fv.length==0) {
field.style.background="yellow";
} else {
field.style.background="white";
}
}
function validateForm() {
var vLengths = validLengths();
var vPatterns = validPatterns();
var vCNum = validCNum();
var vForm = vLengths && vPatterns && vCNum;
if (!vForm) {
alert("Check the highlighted items in the form for missing/invalid data");
return false;
} else {
return true;
}
}
Hi guys, just need help so when there is no input into card number, postcode, what are you after, delivery address an error message comes up. Also I need to make it so when someone puts numbers in the first and last name or letters in the postcode it will come up error. I have done this for first and lastname but when I copy my code and try and put it on the others then no javascript works. thanks for your help Code: <html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@");
var age=document.getElementById("age").value;
var fname=document.getElementById("fname").value;
var lname=document.getElementById("lname").value;
var ccn=document.getElementById("ccn").value;
submitOK="true";
if (fname.length<1)
{
alert("Please Enter a Valid First Name");
submitOK="false";
}
if (isNaN(age)||age<1||age>100)
{
alert("Age Must be between 1 and 100");
submitOK="false";
}
if (lname.length<1)
{
alert("Please Enter a Last Name");
submitOK="false";
}
if (isNaN(age)||age<1||age>100)
{
alert("Age Must be between 1 and 100");
submitOK="false";
}
if (at==-1)
{
alert("Not a Valid Email Address");
submitOK="false";
}
if (submitOK=="false")
{
return false;
if (ccn.length>16)
{
alert("Credit Card Number is False");
submitOK="false";
}
}
}
</script>
</head>
<body>
<form action="tryjs_submitpage.htm" onsubmit="return validate()">
Name : <input type="text" id="fname" size="20"><br />
Last Name : <input type="text" id="lname" size="20"><br />
Age: <input type="text" size="2" id="age" maxlength="2">
Email: <input type="text" id="email" size="20"><br />
<table><tr>
<td><p>Type of Card</p></td>
<td><form action="21">
<select name="cars">
<option value="season"> </option>
<option value="season">Mastercard</option>
<option value="season">Diners Club</option>
<option value="season">Visa</option>
</select></form></td></tr>
</table>
<table><tr>
<td><p>Expiry Date</p></td>
<td><form action="21">
<select name="cars">
<option value="season"> </option>
<option value="season">2010</option>
<option value="season">2011</option>
<option value="season">2012</option>
</select></form></td></tr>
</table>
Card Number : <input type="text" id="ccn" size="20"><br />
Postcode: <input type="text" size="2" id="postcode" maxlength="4">
Delivery Address: <input type="text" id="da" size="20"><br />
Suburb: <input type="text" id="suburb" size="10"><br />
<table><tr>
<td><p>What are you after</p></td>
<td><form action="21">
<select name="cars">
<option value="poker products"> </option>
<option value="poker chips">Poker Table</option>
<option value="poker table">Poker Chips</option>
<option value="poker table">Both</option>
</select></form></td></tr>
</table>
<input type="submit" value="Submit">
</form>
</body>
</html>
for some reason this is not working can anyone tell me why? Code: <script language="JavaScript" type="text/javascript">
function swap(nam,im)
{
eval("document." + nam + ".src=" + im + ".src");
}
van_b = new Image; van_b.src = "images/bus_menu2/busmenub_Passvan01on.jpg";
van_a = new Image; van_a.src = "images/bus_menu2/busmenub_Passvan01off.jpg";
excoach_b = new Image; excoach_b.src = "images/bus_menu2/busmenuB_Excoach01on.jpg";
excoach_a = new Image; excoach_a.src = "images/bus_menu2/busmenuB_Excoach01off.jpg";
specialcoach_b = new Image; specialcoach_b.src = "images/bus_menu/busmenu_specialtycoach01on.jpg";
specialcoach_a = new Image; specialcoach_a.src = "images/bus_menu/busmenu_specialtycoach01off.jpg";
minicoach_b = new Image; minicoach_b.src = "images/bus_menu2/busmenuB_minicoach01on.jpg";
minicoach_a = new Image; minicoach_a.src = "images/bus_menu2/busmenuB_minicoach01off.jpg";
motorcoach_b = new Image; motorcoach_b.src = "images/bus_menu2/busmenub_motorcoach01on.jpg";
motorcoach_a = new Image; motorcoach_a.src = "images/bus_menu2/busmenub_motorcoach01off.jpg";
function checkForm()
{
frm = window.document.contactForm;
if (frm.pickupmonth.value =='')
{
alert('Please enter valid pickup Month');
frm.pickupmonth.focus();
return false;
}
if(frm.pickupday.value== "")
{
alert('Please enter pickup Day');
frm.pickupday.focus();
return false;
}
if(frm.pickupyear.value == "")
{
alert('Please enter pickup Year');
frm.pickupyear.focus();
return false;
}
if(frm.pickupaddress.value == "")
{
alert('Please enter pickup Address');
frm.pickupaddress.focus();
return false;
}
if (frm.pickupcity.value== "")
{
alert('Please enter pickup City');
frm.pickupcity.focus();
return false;
}
if (!validateInt(frm.pickupzip.value))
{
if(frm.pickupzip.value =="" )
alert('Please enter pickup Zip Code');
frm.pickupzip.value="";
frm.pickupzip.focus();
return false;
}
if(frm.pickuphour.value == "")
{
alert('Please enter pickup Hour');
frm.pickuphour.focus();
return false;
}
if(frm.pickupminute.value == "")
{
alert('Please enter pickup Minute');
frm.pickupminute.focus();
return false;
}
if(frm.pickupam.value == "")
{
alert('Please enter pickup AM or PM');
frm.pickupam.focus();
return false;
}
if(frm.dropoffaddress.value == "")
{
alert('Please enter dropoff Address');
frm.dropoffaddress.focus();
return false;
}
if(frm.dropoffcity.value == "")
{
alert('Please enter dropoff City');
frm.dropoffcity.focus();
return false;
}
if (!validateInt(frm.dropoffpzip.value))
{
if(frm.dropoffpzip.value =="" )
alert('Please enter a valid dropoff Zip Code');
frm.dropoffpzip.value="";
frm.dropoffpzip.focus();
return false;
}
if(frm.arrivalhour.value == "")
{
alert('Please enter arrival Hour');
contactForm.arrivalhour.focus();
return false;
}
if(frm.arrivalmin.value == "")
{
alert('Please enter arrival Minute');
frm.arrivalmin.focus();
return false;
}
if(frm.arrivalam.value == "")
{
alert('Please enter arrival AM or PM');
frm.arrivalam.focus();
return false;
}
if(frm.vehicle.value == "")
{
alert('Please enter Vehicle Type');
frm.vehicle.focus();
return false;
}
if(frm.passengers.value == "")
{
alert('Please enter Amount of Passengers');
frm.passengers.focus();
return false;
}
if(frm.guestname.value == "")
{
alert('Please enter Name');
frm.guestname.focus();
return false;
}
if (!validateInt(frm.guestphone.value))
{
if(frm.guestphone.value =="" )
alert('Please enter a valid Telephone number');
frm.guestphone.value="";
frm.cguestphone.focus();
return false;
}
if(!validateEmail(frm.guestemail.value)
{
alert('Please enter proper email address!');
frm.guestemail.focus();
return false;
}
function validateInt(val)
{
switch (isInteger(val))
{
case true:
return true;
break;
case false:
alert("Please enter numbers only!");
return false;
}
}
function isInteger (s)
{
var i;
if (isEmpty(s))
if (isInteger.arguments.length == 1) return 0;
else return (isInteger.arguments[1] == true);
for (i = 0; i < s.length; i++)
{
var c = s.charAt(i);
if (!isDigit(c)) return false;
}
return true;
}
function isEmpty(s)
{
return ((s == null) || (s.length == 0))
}
function isDigit (c)
{
return ((c >= "0") && (c <= "9"))
}
function validateEmail(email){
// This function is used to validate a given e-mail
// address for the proper syntax
if (email == ""){
return false;
}
badStuff = ";:/,' \"\\";
for (i=0; i<badStuff.length; i++){
badCheck = badStuff.charAt(i)
if (email.indexOf(badCheck,0) != -1){
return false;
}
}
posOfAtSign = email.indexOf("@",1)
if (posOfAtSign == -1){
return false;
}
if (email.indexOf("@",posOfAtSign+1) != -1){
return false;
}
posOfPeriod = email.indexOf(".", posOfAtSign)
if (posOfPeriod == -1){
return false;
}
if (posOfPeriod+2 > email.length){
return false;
}
return true
}
</script>
|
|||||||