JavaScript Alerts Not Displaying

Question

GreaseJunkie 0 Light Poster

13 Years Ago

Hi, I could use some help with my code. I am validating a form before processing the PHP to SQL and would like it to let the user know if they have done something wrong before the form can process. This code below changes the bad fields to yellow (BRIEFLY), as desired, but still processes the form and the alerts aren't displaying. Not sure if I have a DOCTYPE issue, a form issue, a JS issue or a PHP issue. I'll post the code and form to start, since I was able to get an alert to pop up with a very simple JS snippet with the same form/html.

<script type="text/javascript">
function validateFormOnSubmit(form1) {
var reason = "";

  reason += validateEmpty(form1.fname);
  reason += validateEmpty(form1.lname);
  reason += validateEmpty(form1.addy);
  reason += validateEmpty(form1.city);
  reason += validateEmpty(form1.state);
  reason += validateEmpty(form1.zip);
  reason += validateEmpty(form1.phone);
  reason += validateEmpty(form1.email);
  reason += validatefname(form1.fname);
  reason += validatelname(form1.lname);
  reason += validateaddy(form1.addy);
  reason += validatecity(form1.city);
  reason += validatestate(form1.state);
  reason += validatezip(form1.zip);
  reason += validatephone(form1.phone);
  reason += validateemail(form1.email);
      
  if (reason != "") {
    alert("Some fields need correction:\n" + reason);
    return false;
  }
  alert("All fields are filled correctly");
  return true;
}
function validateEmpty(fname) {
    var error = "";
 
    if (fname.value.length == 0) {
        fname.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fname.style.background = 'White';
    }
    return error;  
}
function validateEmpty(lname) {
    var error = "";
 
    if (lname.value.length == 0) {
        lname.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        lname.style.background = 'White';
    }
    return error;  
}
function validateEmpty(addy) {
    var error = "";
 
    if (addy.value.length == 0) {
        addy.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        addy.style.background = 'White';
    }
    return error;  
}
function validateEmpty(city) {
    var error = "";
 
    if (city.value.length == 0) {
        city.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        city.style.background = 'White';
    }
    return error;  
}
function validateEmpty(state) {
    var error = "";
 
    if (state.value.length == 0) {
        state.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        state.style.background = 'White';
    }
    return error;  
}
function validateEmpty(zip) {
    var error = "";
 
    if (zip.value.length == 0) {
        zip.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        zip.style.background = 'White';
    }
    return error;  
}
function validateEmpty(phone) {
    var error = "";
 
    if (phone.value.length == 0) {
        phone.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        phone.style.background = 'White';
    }
    return error;  
}
function validateEmpty(email) {
    var error = "";
 
    if (email.value.length == 0) {
        email.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        email.style.background = 'White';
    }
    return error;  
}
function validatefname(fname) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fname.value == "") {
        fname.style.background = 'Yellow'; 
        error = "You didn't enter a First Name.\n";
    } else if ((fname.value.length < 2) || (fname.value.length > 50)) {
        fname.style.background = 'Yellow'; 
        error = "The First Name is the wrong length.\n";
    } else if (illegalChars.test(fname.value)) {
        fname.style.background = 'Yellow'; 
        error = "The First Name contains illegal characters.\n";
    } else {
        fname.style.background = 'White';
    }
    return error;
}
function validatelname(lname) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (lname.value == "") {
        lname.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((lname.value.length < 2) || (lname.value.length > 50)) {
        lname.style.background = 'Yellow'; 
        error = "The Last Name is the wrong length.\n";
    } else if (illegalChars.test(lname.value)) {
        lname.style.background = 'Yellow'; 
        error = "The Last Name contains illegal characters.\n";
    } else {
        lname.style.background = 'White';
    }
    return error;
}
function validateaddy(addy) {
    if (addy.value == "") {
        addy.style.background = 'Yellow'; 
        error = "You didn't enter an Address.\n";
    } else if ((addy.value.length < 5) || (addy.value.length > 70)) {
        addy.style.background = 'Yellow'; 
        error = "The Address is the wrong length.\n";
    } else {
        addy.style.background = 'White';
    }
    return error;
}
function validatecity(city) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (city.value == "") {
        city.style.background = 'Yellow'; 
        error = "You didn't enter a City.\n";
    } else if ((city.value.length < 2) || (city.value.length > 40)) {
        city.style.background = 'Yellow'; 
        error = "The City is the wrong length.\n";
    } else if (illegalChars.test(city.value)) {
        city.style.background = 'Yellow'; 
        error = "The City contains illegal characters.\n";
    } else {
        city.style.background = 'White';
    }
    return error;
}
function validatestate(state) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (state.value == "") {
        state.style.background = 'Yellow'; 
        error = "You didn't enter a State.\n";
    } else if ((state.value.length < 2) || (state.value.length > 2)) {
        state.style.background = 'Yellow'; 
        error = "The State is the wrong length.\n";
    } else if (illegalChars.test(state.value)) {
        state.style.background = 'Yellow'; 
        error = "The State contains illegal characters.\n";
    } else {
        state.style.background = 'White';
    }
    return error;
}
function validatezip(zip) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (zip.value == "") {
        zip.style.background = 'Yellow'; 
        error = "You didn't enter a Zip Code.\n";
    } else if ((zip.value.length < 4) || (zip.value.length > 5)) {
        zip.style.background = 'Yellow'; 
        error = "The Zip Code is the wrong length.\n";
    } else {
        zip.style.background = 'White';
    }
    return error;
}
function validatephone(phone) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (phone.value == "") {
        phone.style.background = 'Yellow'; 
        error = "You didn't enter a Phone Number.\n";
    } else if ((phone.value.length < 10) || (phone.value.length > 10)) {
        phone.style.background = 'Yellow'; 
        error = "The Phone Number is the wrong length.\n";
    } else if (illegalChars.test(phone.value)) {
        phone.style.background = 'Yellow'; 
        error = "The Phone Number contains illegal characters.\n";
    } else {
        phone.style.background = 'White';
    }
    return error;
}
function validateemail(email) {
    var error="";
    var temail = trim(email.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
   
    if (email.value == "") {
        email.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(temail)) {              //test email for illegal characters
        email.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (email.value.match(illegalChars)) {
        email.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        email.style.background = 'White';
    }
    return error;
}
function validatephone(phone) {
    var error = "";
    var stripped = phone.value.replace(/[\(\)\.\-\ ]/g, '');    

   if (phone.value == "") {
        error = "You didn't enter a phone number.\n";
        phone.style.background = 'Yellow';
    } else if (isNaN(parseInt(stripped))) {
        error = "The phone number contains illegal characters.\n";
        phone.style.background = 'Yellow';
    } else if (!(stripped.length == 10)) {
        error = "The phone number is the wrong length. Make sure you included an area code.\n";
        phone.style.background = 'Yellow';
    }
    return error;
}
</script>

Then the form:

<form name="form1" onsubmit="return validateFormOnSubmit(this)" method="post" action="process.php">
<input type="hidden" name="redirect" value="thankyou.php" />
<br />
<label for="fname">First Name:</label><input type="text" name="fname" size="15" value="" />
<label for="lname">Last Name:</label><input type="text" name="lname" size="30" value="" /><br />
<label for="addy">Address:</label><input type="text" name="addy" size="30" value="" />
<label for="city">City:</label><input type="text" name="city" size="15" value="" />
<label for="state">State:</label><input type="text" name="state" size="2" value="" />
<label for="zip">Zip:</label><input type="text" name="zip" size="5" value="" /><br />
<label for="phone">Phone:</label><input type="text" name="phone" size="10" value="" />
<label for="email">Email:</label><input type="text" name="email" size="30" value="" /><br />
<br />
<label for="comments">Please Enter Three Item Numbers from products Catalog:</label><br />
<textarea name="skus" rows="3" cols="10">Enter Item Numbers Here...</textarea>

<br />
<input type="image" src="/images/submit_but.jpg" width="110" height="33" border="0" alt="Submit Form">
<br />
<br />
</form>
</fieldset>

Any help would be greatly appreciated!

GJ

alert doctype javascript php

2 Contributors
4 Replies
181 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by GreaseJunkie

All 4 Replies

Luckychap 68 Posting Pro in Training

13 Years Ago

I could not understand why you have defined more than 1 function with same name and same code?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GreaseJunkie 0 Light Poster · Answer 1 · 2010-10-16T19:53:39+00:00

Are you saying I can validate the form with one or two functions? Just generalize? 1 of the functions is to validate the characters and input length, so that needs to be specific to each field, and one is to check to see if the field has been left empty. I suppose the "empty" function could be universal.

Luckychap 68 Posting Pro in Training · Answer 2 · 2010-10-17T12:52:53+00:00

My point is that when you define more than one function with same name, the last one is used. Actually its same as :-

a = b;
a = c;
a = d;

at last 'a' will be equal to 'd' and above 2 lines are just waste.

In your code I saw 'validateEmpty' can be just defined once.

And also 'validatefname' and 'validatelname' have exactly same code with just one line of difference ie error string. You can just create one function for above 2:-

function validateName(fname, nStr) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fname.value == "") {
        fname.style.background = 'Yellow'; 
        error = "You didn't enter a " + nStr + ".\n";
    } else if ((fname.value.length < 2) || (fname.value.length > 50)) {
        fname.style.background = 'Yellow'; 
        error = "The " + nStr + " is the wrong length.\n";
    } else if (illegalChars.test(fname.value)) {
        fname.style.background = 'Yellow'; 
        error = "The " + nStr + " contains illegal characters.\n";
    } else {
        fname.style.background = 'White';
    }
    return error;
}


/* Using the function for First Name */
validateName(form1.fname, "First Name");

/* Using the function for Last Name */
validateName(form1.lname, "Last Name");

Hope I made myself clear.

GreaseJunkie 0 Light Poster · Answer 3 · 2010-10-17T20:21:00+00:00

Yes, that is very helpful and I appreciate your time and knowledge.

JavaScript Alerts Not Displaying

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers