Link to home
Start Free TrialLog in
Avatar of WebGirlCrissy
WebGirlCrissyFlag for United States of America

asked on

javascript error checking

Hi there - My JS is below and works fine but i want the "state" error checking to reside after the "city" but when i move it up it doesnt work, it only appears to work when i have it listed last in the bunch. I must be missing something but dont know what. Here's the code:
<SCRIPT SRC="formval.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- start hide
function validateForm(form1)
  {
      form1.firstName.value = stripLeadingTrailingBlanks(form1.firstName.value);
  if (isBlank(form1.firstName.value))
    {
    alert("Please enter your first name.");
   form1.firstName.focus();
    return false;
          }
        form1.lastName.value = stripLeadingTrailingBlanks(form1.lastName.value);
  if (isBlank(form1.lastName.value))
    {
    alert("Please enter your last name.");
   form1.lastName.focus();
    return false;
      }
         form1.company.value = stripLeadingTrailingBlanks(form1.company.value);
  if (isBlank(form1.company.value))
    {
    alert("Please enter your company name.");
   form1.company.focus();
    return false;
      }
        form1.streetAddress.value = stripLeadingTrailingBlanks(form1.streetAddress.value);
  if (isBlank(form1.streetAddress.value))
    {
    alert("Please enter your street address, floor number.");
   form1.streetAddress.focus();
    return false;
      }
        form1.city.value = stripLeadingTrailingBlanks(form1.city.value);
  if (isBlank(form1.city.value))
    {
    alert("Please enter your city.");
   form1.city.focus();
    return false;
      }
        form1.zip.value = stripLeadingTrailingBlanks(form1.zip.value);
  if (isBlank(form1.zip.value))
    {
    alert("Please enter your zip.");
   form1.zip.focus();
    return false;
      }
         form1.email.value = stripLeadingTrailingBlanks(form1.email.value);
  if (isBlank(form1.email.value))
    {
    alert("Please enter your email.");
   form1.email.focus();
    return false;
      }
        form1.State.value = stripLeadingTrailingBlanks(form1.State.value);
  if (getCheckedSelectOptions(form1.State.value))
    {
    alert("Please enter your state.");
   form1.State.focus();
    return false;
      }
}
// -->
</script>
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Isn't state a dropdown select list on your form? Why then the value trim blanks?
Check this:

<SCRIPT SRC="formval.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- start hide
function validateForm(form1)
  {
      form1.firstName.value = stripLeadingTrailingBlanks(form1.firstName.value);
  if (isBlank(form1.firstName.value))
    {
    alert("Please enter your first name.");
   form1.firstName.focus();
    return false;
          }
        form1.lastName.value = stripLeadingTrailingBlanks(form1.lastName.value);
  if (isBlank(form1.lastName.value))
    {
    alert("Please enter your last name.");
   form1.lastName.focus();
    return false;
      }
         form1.company.value = stripLeadingTrailingBlanks(form1.company.value);
  if (isBlank(form1.company.value))
    {
    alert("Please enter your company name.");
   form1.company.focus();
    return false;
      }
        form1.streetAddress.value = stripLeadingTrailingBlanks(form1.streetAddress.value);
  if (isBlank(form1.streetAddress.value))
    {
    alert("Please enter your street address, floor number.");
   form1.streetAddress.focus();
    return false;
      }
        form1.city.value = stripLeadingTrailingBlanks(form1.city.value);
  if (isBlank(form1.city.value))
    {
    alert("Please enter your city.");
   form1.city.focus();
    return false;
      }
  if (getCheckedSelectOptions(form1.State.value))
    {
    alert("Please select your state from list.");
   form1.State.focus();
    return false;
      }
        form1.zip.value = stripLeadingTrailingBlanks(form1.zip.value);
  if (isBlank(form1.zip.value))
    {
    alert("Please enter your zip.");
   form1.zip.focus();
    return false;
      }
         form1.email.value = stripLeadingTrailingBlanks(form1.email.value);
  if (isBlank(form1.email.value))
    {
    alert("Please enter your email.");
   form1.email.focus();
    return false;
      }
}
// -->
</script>




Avatar of WebGirlCrissy
WebGirlCrissy
Flag of United States of America image

ASKER

still only works up until state form field is checked- form submits before javaScript checks zip or email fields. I've double checked my form field names and they are exact - strange - i'm sure there just must be something missing but i cannot seem to find it.
Avatar of gops1
gops1
Flag of United States of America image
show us your form
Avatar of gops1
gops1
Flag of United States of America image
and also the trim and other functions being called here in validate fiunction
Avatar of WebGirlCrissy
WebGirlCrissy
Flag of United States of America image

ASKER

heres the formVal (js functions) (i'm also interested in using the function to check if email is valid and that too i have the same problem with.  Heres the code below that resides in file: formval.js which is called via the form pasted below as well.

var digits = "0123456789";
var lowercaseLetters = "abcdefghijklmnopqrstuvwxyz"
var uppercaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
var blanks = " \t\n\r";  // aka whitespace chars

// decimal point character differs by language and culture
var decimalPointDelimiter = "."

// non-digit characters allowed in phone numbers
var phoneNumberDelimiters = "()- ";

// characters allowed in US phone numbers
var validUSPhoneChars = digits + phoneNumberDelimiters;

// U.S. phone numbers have 10 digits, formatted as ### ### #### or (###)###-####
var digitsInUSPhoneNumber = 10;

// non-digit characters which are allowed in ZIP Codes
var ZIPCodeDelimiters = "-";

// our preferred delimiter for reformatting ZIP Codes
var ZIPCodeDelimeter = "-"

// U.S. ZIP codes have 5 or 9 digits, formatted as ##### or #####-####
var digitsInZIPCode1 = 5
var digitsInZIPCode2 = 9

// Returns true if string s is empty

function isEmpty(s)
  {
  return ((s == null) || (s.length == 0));
  }

// Returns true if string s is empty or all blank chars

function isBlank(s)
  {
  var i;

  // Is s empty?
  if (isEmpty(s))
    return true;

  // Search through string's chars one by one until we find first
  // non-blank char, then return false; if we don't, return true
  for (i=0; i<s.length; i++)
    {  
    // Check that current character isn't blank
    var c = s.charAt(i);
    if (blanks.indexOf(c) == -1)
      return false;
    }
  // All characters are blank
  return true;
  }
  function textCounter(field, maxlimit) {
if (field.value.length > maxlimit) // if too long...trim it!
field.value = field.value.substring(0, maxlimit);
// otherwise, update 'characters left' counter

}

// Removes all blank chars (as defined by blanks) from s

function stripBlanks(s)
  {
  return stripCharsInBag(s, blanks)
  }


// Removes leading blank chars (as defined by blanks) from s

function stripLeadingBlanks(s)
  {
  var i = 0;
  while ((i < s.length) && (blanks.indexOf(s.charAt(i)) != -1))
     i++;
  return s.substring(i, s.length);
  }


// Removes trailing blank chars (as defined by blanks) from s

function stripTrailingBlanks(s)
  {
  var i = s.length - 1;
  while ((i >= 0) && (blanks.indexOf(s.charAt(i)) != -1))
     i--;
  return s.substring(0, i+1);
  }


// Removes leading+trailing blank chars (as defined by blanks) from s

function stripLeadingTrailingBlanks(s)
  {
  s = stripLeadingBlanks(s);
  s = stripTrailingBlanks(s);
  return s;
  }

// Returns true if string is a valid email address: @ and . required,
// at least one char before @, at least one char before and after .

function isEmail(s)
  {
  if (isBlank(s))
    return false;
 
  // there must be >= 1 character before @, so we start
  // start looking at character position 1 (i.e. second character)
  var i = 1;
  var sLength = s.length;

  // look for @
  while ((i < sLength) && (s.charAt(i) != "@"))
    i++

  if ((i >= sLength) || (s.charAt(i) != "@"))
    return false;
  else
    i += 2;

  // look for .
  while ((i < sLength) && (s.charAt(i) != "."))
    i++

  // there must be at least one character after the .
  if ((i >= sLength - 1) || (s.charAt(i) != "."))
    return false;
  else
    return true;
  }
// Returns array containing index(es) of checked option(s)
// in select box, or -1 if no options are selected

function getCheckedSelectOptions(select)
  {
  var arr = new Array();
  for (var i=0,j=0; i<select.length; i++)
    if (select.options[i].selected)
      arr[j++] = i;
  if (arr.length > 0)
    return arr;
  else
    return -1;
  }
//  End -->

Here's the form:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
<SCRIPT SRC="formval.js" LANGUAGE="JavaScript"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!-- start hide
function validateForm(form1)
  {
      form1.firstName.value = stripLeadingTrailingBlanks(form1.firstName.value);
  if (isBlank(form1.firstName.value))
    {
    alert("Please enter your first name.");
   form1.firstName.focus();
    return false;
          }
        form1.lastName.value = stripLeadingTrailingBlanks(form1.lastName.value);
  if (isBlank(form1.lastName.value))
    {
    alert("Please enter your last name.");
   form1.lastName.focus();
    return false;
      }
         form1.company.value = stripLeadingTrailingBlanks(form1.company.value);
  if (isBlank(form1.company.value))
    {
    alert("Please enter your company name.");
   form1.company.focus();
    return false;
      }
        form1.streetAddress.value = stripLeadingTrailingBlanks(form1.streetAddress.value);
  if (isBlank(form1.streetAddress.value))
    {
    alert("Please enter your street address, floor number.");
   form1.streetAddress.focus();
    return false;
      }
        form1.city.value = stripLeadingTrailingBlanks(form1.city.value);
  if (isBlank(form1.city.value))
    {
    alert("Please enter your city.");
   form1.city.focus();
    return false;
      }
  if (getCheckedSelectOptions(form1.State.value))
    {
    alert("Please select your state from list.");
   form1.State.focus();
    return false;
      }
        form1.zip.value = stripLeadingTrailingBlanks(form1.zip.value);
  if (isBlank(form1.zip.value))
    {
    alert("Please enter your zip.");
   form1.zip.focus();
    return false;
      }
         form1.email.value = stripLeadingTrailingBlanks(form1.email.value);
  if (isBlank(form1.email.value))
    {
    alert("Please enter your email.");
   form1.email.focus();
    return false;
      }
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#2584BC" vlink="#2584BC" alink="#2584BC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form name=form1 method="post" action="thankYou.asp" onSubmit="return validateForm(form1)">
  <table width="776" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20" height="2"></td>
    <td width="180" height="2"></td>
    <td height="2" width="536"></td>
    <td width="20" height="2"></td>
    <td width="20" height="2"></td>
  </tr>
  <tr>
    <td width="20" height="10"></td>
    <td width="180" height="10" align="left" valign="top"><br>
      <br>    </td><td height="10" width="536" valign="top" align="left"><table width="500" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="regform">&nbsp;</td>
          <td id="regform"><p>(*required)</p></td>
        </tr>
        <tr>
          <td width="100" id="regform"><p>First name*</p></td>
          <td width="400">
            <input name="firstName" type="text" id="firstName" size="30" maxlength="50">         </td>
        </tr>
        <tr>
          <td id="regform"><p>Last name*</p></td>
          <td>
            <input name="lastName" type="text" id="lastName" size="30" maxlength="50">        </td>
        </tr>
        <tr>
          <td id="regform"><p>Company*</p></td>
          <td>
            <input name="company" type="text" id="company" size="30" maxlength="75">      </td>
        </tr>
        <tr>
          <td id="regform"><p>Title</p></td>
          <td>
            <input name="title" type="text" size="30" maxlength="50">       </td>
        </tr>
        <tr>
          <td id="regform"><p>Street 1*</p></td>
          <td>
            <input name="streetAddress" type="text" id="streetAddress" size="40" maxlength="150">         </td>
        </tr>
        <tr>
          <td id="regform"><p>Street 2</p></td>
          <td>
            <input name="streetAddress2" type="text" id="streetAddress2" size="40" maxlength="75">         </td>
        </tr>
        <tr>
          <td id="regform"><p>City*</p></td>
          <td>
            <input name="city" type="text" size="30" maxlength="50">          </td>
        </tr>
        <tr>
          <td id="regform"><p>State*</p></td>
          <td><table width="349" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="165"><select name="State" class="mainText">
                        <option value="">-SELECT-</option>
                        <option value="AL">AL</option>
                        <option value="AK">AK</option>
                        <option value="AZ">AZ</option>
                        <option value="AR">AR</option>
                        <option value="CA">CA</option>
                        <option value="CO">CO</option>
                        <option value="CT">CT</option>
                        <option value="DE">DE</option>
                        <option value="DC">DC</option>
                        <option value="FL">FL</option>
                        <option value="GA">GA</option>
                        <option value="HI">HI</option>
                        <option value="ID">ID</option>
                        <option value="IL">IL</option>
                        <option value="IN">IN</option>
                        <option value="IA">IA</option>
                        <option value="KS">KS</option>
                        <option value="KY">KY</option>
                        <option value="LA">LA</option>
                        <option value="ME">ME</option>
                        <option value="MD">MD</option>
                        <option value="MA">MA</option>
                        <option value="MI">MI</option>
                        <option value="MN">MN</option>
                        <option value="MS">MS</option>
                        <option value="MO">MO</option>
                        <option value="MT">MT</option>
                        <option value="NE">NE</option>
                        <option value="NV">NV</option>
                        <option value="NH">NH</option>
                        <option value="NJ">NJ</option>
                        <option value="NM">NM</option>
                        <option value="NY">NY</option>
                        <option value="NC">NC</option>
                        <option value="ND">ND</option>
                        <option value="OH">OH</option>
                        <option value="OK">OK</option>
                        <option value="OR">OR</option>
                        <option value="PA">PA</option>
                        <option value="RI">RI</option>
                        <option value="SC">SC</option>
                        <option value="SD">SD</option>
                        <option value="TN">TN</option>
                        <option value="TX">TX</option>
                        <option value="UT">UT</option>
                        <option value="VT">VT</option>
                        <option value="VA">VA</option>
                        <option value="WA">WA</option>
                        <option value="WV">WV</option>
                        <option value="WI">WI</option>
                        <option value="WY">WY</option>
                    </select></td>
              <td width="67" id="regform"><p>Zip*</p></td>
              <td width="117">
                <input name="zip" type="text" id="zip" size="5"  maxlength="10">           </td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td id="regform"><p>Phone</p></td>
          <td>
            <input name="phone" type="text" id="phone" size="10" maxlength="30"></td>
        </tr>
        <tr>
          <td id="regform"><p>Email*</p></td>
          <td>
            <input name="email" type="text" id="email" size="30"></td>
        </tr>
      </table>      
      <p><br>
      How did you hear about this event?</p>
     
        <textarea name="HowHeard" cols="40" id="HowHeard"></textarea>
 
      <table width="500" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="regform">
            <div align="center">
              <input type="submit" name="Submit" value="Submit">
              </div>         </td>
        </tr>
      </table>      <p><br>
        Please individually register each member of your company who plans to attend. </p></td>
    <td width="20" height="10">&nbsp;</td>
    <td width="20" height="10">&nbsp;</td>
  </tr>
</table>
  <p>&nbsp;</p>
<p>&nbsp;</p>
</form>
</body>
</html>

ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of WebGirlCrissy
WebGirlCrissy
Flag of United States of America image

ASKER

Thanks so much! - works perfectly now!
:) Crissy