PDA

View Full Version : Why is my javascript (form validator) crashing browsers

wfricker
10-27-2006, 06:01 AM
Hello All, I would greatly appreciate any help on this. I am trying to write a user friendly javascript for verifying submissions to my e-list but I can't get
onChange events to set the focus back to the field causing the error. onBlur
works fine but I don't want to trap people in my fields. Also, about every
10th time the browser (IE, Firfox and Netscape) stop responding.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2006 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 10/22/2006 5:34:35 PM -->
<head>
<style>
input {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

.label {
width:50px;
}

textarea {
width: 200px;
font-family: Tahoma;
font-size: 8pt;
}

body {
font-family: Tahoma;
font-size: 8pt;
}

.error {
font-family: Tahoma;
font-size: 8pt;
color: red;
margin-left: 50px;
display:none;
}

</style>

<script>
<!-- Begin

function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}

function validateEmpty(fld)
{
var error = "";

if (fld.value.length == 0)
{
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").select();
document.getElementById("name").focus();
document.getElementById("name").style.error;
}

else
{
document.getElementById("nameError").style.display = "none";
}
return;
}



function validateEmail(fld)
{ //this function uses field.value eliminating need to submit field.value as paramater, allows programmer to just use field name as parameter, Classy
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

if (tfld == "")
{
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
document.getElementById("emailError").style.error;
}

else if (!emailFilter.test(tfld))
{ //test email for illegal characters
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
document.getElementById("emailError").style.error;
}

else if (fld.value.match(illegalChars))
{
document.getElementById("emailError").style.display = "inline";
document.getElementById("email").select();
document.getElementById("email").focus();
document.getElementById("emailError").style.error;
}

else
{
document.getElementById("emailError").style.display = "none";
}

return;
}




function validateZIP(field)
{
var valid="0123456789";
var tfield=trim(field); // remove white face from field

for (var i=0; i < tfield.length; i++)
{
temp = "" + tfield.substring(i, i+1);
if (valid.indexOf(temp) == "-1")
{
document.getElementById("zipError").style.display = "inline";
document.getElementById("zip").select();
document.getElementById("zip").focus();
document.getElementById("zipError").style.error;
return;
}
}

if (tfield.length!=5)
{
document.getElementById("zipError").style.display = "inline";
document.getElementById("zip").select();
document.getElementById("zip").focus();
document.getElementById("zipError").style.error;
return;
}

document.getElementById("zipError").style.display = "none";
return;
}
// End -->
</script>

<title></title>
</head>
<body>
<div>Subscribe to the E-mail List<BR><BR>Stay up to date on
where I'm playing next and what is going on with the tour.<br>
<!-- Start of FORM -->
<form name="corilist" method="post" action="http://cgiapp/script.pl">
<table>

<tr>

<td>
Name
</td>

<td>
<input name="name" id="name" onblur="validateEmpty(corilist.name)">
</td>

<td>
<div class="error" id="nameError">Required: Please enter your name</div><br>
</td>

</tr>


<tr>
<td>
E-mail
</td>

<td>
<input name="email" id="email" onblur="validateEmail(corilist.email)">
</td>

<td>
<div class="error" id="emailError">Required: Please enter your email address</div><br>
</td>

</tr>

<tr>
<td>
Zip
</td>

<td>
<input name="zip" id="zip" onblur="validateZIP(corilist.zip.value)">
</td>

<td>
<div class="error" id="zipError">Required: Please enter your 5 digit zip code</div><br>
</td>

</tr>

<tr>

<td>
Country
</td>

<td>
<select name="country" size="1">
<option>Afghanistan</option><option>Åland Islands</option><option>Albania</option><option>Algeria</option><option>American Samoa</option><option>Andorra</option><option>Angola</option><option>Anguilla</option><option>Antarctica</option><option>Antigua and Barbuda</option><option>Argentina</option><option>Armenia</option><option>Aruba</option><option >Australia</option><option>Austria</option><option>Azerbaijan</option><option>Bahamas</option><option>Bahrain</option><option>Bangladesh</option><option>Barbados</option><option>Belarus</option><option>Belgium</option><option>Belize</option><option>Benin</option><option>Bermuda</option><option>Bhutan</option><option>Bolivia</option><option>Bosnia and Herzegovina</option><option>Botswana</option><option>Bouvet Island</option><option>Brazil</option><option>British Indian Ocean territory</option><option>Brunei Darussalam</option><option>Bulgaria</option><option>Burkina Faso</option><option>Burundi</option><option>Cambodia</option><option>Cameroon</option><option>Canada</option><option>Cape Verde</option><option>Cayman Islands</option><option>Central African Republic</option><option>Chad</option><option>Chile</option><option>China</option><option>Christmas Island</option><option>Cocos (Keeling) Islands</option><option>Colombia</option><option>Comoros</option><option>Congo</option><option>Congo, Democratic Republic</option><option>Cook Islands</option><option>Costa Rica</option><option>Côte d'Ivoire (Ivory Coast)</option><option>Croatia (Hrvatska)</option><option>Cuba</option><option>Cyprus</option><option>Czech Republic</option><option>Denmark</option><option>Djibouti</option><option>Dominica</option><option>Dominican Republic</option><option>East Timor</option><option>Ecuador</option><option>Egypt</option><option>El Salvador</option><option>Equatorial Guinea</option><option>Eritrea</option><option>Estonia</option><option>Ethiopia</option><option>Falkland Islands</option><option>Faroe Islands</option><option>Fiji</option><option>Finland</option><option >France</option><option>French Guiana</option><option>French Polynesia</option><option>French Southern Territories</option><option>Gabon</option><option>Gambia</option><option>Georgia</option><option >Germany</option><option>Ghana</option><option>Gibraltar</option><option>Greece</option><option>Greenland</option><option>Grenada</option><option>Guadeloupe</option><option>Guam</option><option>Guatemala</option><option>Guinea</option><option>Guinea-Bissau</option><option>Guyana</option><option>Haiti</option><option>Heard and McDonald Islands</option><option>Honduras</option><option>Hong Kong</option><option>Hungary</option><option>Iceland</option><option>India</option><option>Indonesia</option><option>Iran</option><option>Iraq</option><option>Ireland</option><option>Israel</option><option>Italy</option><option>Jamaica</option><option>Japan</option><option>Jordan</option><option>Kazakhstan</option><option>Kenya</option><option>Kiribati</option><option>Korea (north)</option><option>Korea (south)</option><option>Kuwait</option><option>Kyrgyzstan</option><option>Lao People's Democratic Republic</option><option>Latvia</option><option>Lebanon</option><option>Lesotho</option><option>Liberia</option><option>Libyan Arab Jamahiriya</option><option>Liechtenstein</option><option>Lithuania</option><option>Luxembourg</option><option>Macao</option><option>Macedonia</option><option>Madagascar</option><option>Malawi</option><option>Malaysia</option><option>Maldives</option><option>Mali</option><option>Malta</option><option>Marshall Islands</option><option>Martinique</option><option>Mauritania</option><option>Mauritius</option><option>Mayotte</option><option>Mexico</option><option>Micronesia</option><option>Moldova</option><option>Monaco</option><option>Mongolia</option><option>Montserrat</option><option>Morocco</option><option>Mozambique</option><option>Myanmar</option><option>Namibia</option><option>Nauru</option><option>Nepal</option><option>Netherlands</option><option>Netherlands Antilles</option><option>New Caledonia</option><option >New Zealand</option><option>Nicaragua</option><option>Niger</option><option>Nigeria</option><option>Niue</option><option>Norfolk Island</option><option>Northern Mariana Islands</option><option>Norway</option><option>Oman</option><option>Pakistan</option><option>Palau</option><option>Palestinian Territories</option><option>Panama</option><option>Papua New Guinea</option><option>Paraguay</option><option>Peru</option><option>Philippines</option><option>Pitcairn</option><option>Poland</option><option>Portugal</option><option>Puerto Rico</option><option>Qatar</option><option>Réunion</option><option>Romania</option><option>Russian Federation</option><option>Rwanda</option><option>Saint Helena</option><option>Saint Kitts and Nevis</option><option>Saint Lucia</option><option>Saint Pierre and Miquelon</option><option>Saint Vincent and the Grenadines</option><option>Samoa</option><option>San Marino</option><option>Sao Tome and Principe</option><option>Saudi Arabia</option><option>Senegal</option><option>Serbia and Montenegro</option><option>Seychelles</option><option>Sierra Leone</option><option>Singapore</option><option>Slovakia</option><option>Slovenia</option><option>Solomon Islands</option><option>Somalia</option><option>South Africa</option><option>South Georgia and the South Sandwich Islands</option><option>Spain</option><option>Sri Lanka</option><option>Sudan</option><option>Suriname</option><option>Svalbard and Jan Mayen Islands</option><option>Swaziland</option><option>Sweden</option><option>Switzerland</option><option>Syria</option><option>Taiwan</option><option>Tajikistan</option><option>Tanzania</option><option>Thailand</option><option>Togo</option><option>Tokelau</option><option>Tonga</option><option>Trinidad and Tobago</option><option>Tunisia</option><option>Turkey</option><option>Turkmenistan</option><option>Turks and Caicos Islands</option><option>Tuvalu</option><option>Uganda</option><option>Ukraine</option><option>United Arab Emirates</option><option >United Kingdom</option><option selected>United States of America</option><option>Uruguay</option><option>Uzbekistan</option><option>Vanuatu</option><option>Vatican City</option><option>Venezuela</option><option>Vietnam</option><option>Virgin Islands (British)</option><option>Virgin Islands (US)</option><option>Wallis and Futuna Islands</option><option>Western Sahara</option><option>Yemen</option><option>Zaire</option><option>Zambia</option><option>Zimbabwe</option></select> <!-- end of drop down country selection list -->

</td>

<td>

</td>

</tr>

<tr>

<td>
</td>

<td>
<input type="submit" value="Submit" name="submit">
</td>

<td>
</td>

</tr>
</table>
</form>
<!-- End of FORM -->
</div>
</body>
</html>
Kor
10-30-2006, 10:22 AM
At a first glance using onblur folowed by a focus() will bring you an endless loop.
Things goes like that. Suppose you have 2 fields A and B. If A has an empty value and you focus from A to B, the function is called and will focus back to A, but when focusing to A it blurs the B (as B has an empty value as well), thus again the function is called and try to focus, this time on B, but focusing on B it blurs the A, thus the function is called again... and so on, endlessly...

Upon my experience, the best validation is made onsubmit and/or onkeyup, not onblur nor onchange (onchange only for the select objects)