I have a user name, password, phone number etc., that all need to be validated before being submitted. The functions filter out the unwanted characters and null and zero length strings. I did have a pop up that listed the errors but I would prefer them to be listed below the log in screen that is a hidden div. I cannot get it to work. The validation works fine, though. Thanks in advance

<html>
<head>
<title>WebCheatSheet - JavaScript Tutorial</title>
<script language="javascript">
 reason = "";
function validateFormOnSubmit(theForm) {


  reason += validateUsername(theForm.username);
  reason += validatePassword(theForm.pwd);
  reason += validateEmail(theForm.email);
  reason += validatePhone(theForm.phone);
  reason += validateEmpty(theForm.from);
 
  
  if (reason != "") {
    document.getElementById('box1').style.visibility = 'visible';
    
    return false;
  }

  return true;
}
 

function validateEmpty(fld) {
    var error = "";
  
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;   
}
function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
        fld.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    } 
    return error;
}
function validatePassword(fld) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers 
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter a password.\n";
    } else if ((fld.value.length < 7) || (fld.value.length > 15)) {
        error = "The password is the wrong length. \n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        error = "The password contains illegal characters.\n";
        fld.style.background = 'Yellow';
    } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
        error = "The password must contain at least one numeral.\n";
        fld.style.background = 'Yellow';
    } else {
        fld.style.background = 'White';
    }
   return error;
}  
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
    
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validatePhone(fld) {
    var error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');     

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

</script>
</head>
<body>
<h1>Survey</h1>

<form name="demo" onsubmit="return validateFormOnSubmit(this)" action="test.htm">
<table >
  <tbody>
  <tr>
    <td><label for="username">Your user name:</label></td>
    <td><input name="username" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td><label for="pwd">Your password</label></td>
    <td><input name="pwd" size="35" maxlength="25" type="password"></td>
  </tr>   
  <tr>
    <td><label for="email">Your email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"></td>
  </tr>   
  <tr>
    <td><label for="phone">Your telephone number:</label></td>
    <td><input name="phone" size="35" maxlength="25" type="text"></td>
  </tr>   
  <tr>
    <td>
        <label for="from">Where are you :</label></td>
    <td><input name="from" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr> 
  </tbody>
</table>

<div style="visibility:hidden" id="box1">woot?
<script type="text/javascript"> document.write.demo('reason');
</script>
</div>
</form>
</body>
</html>

Recommended Answers

All 2 Replies

Try this..check whether it works for you.

<html>
<head>
<script type="text/javascript">

function validateFormOnSubmit(theForm) {
  var reason = "";
  reason += validateUsername(theForm.username)+'<br/>';
  reason += validatePassword(theForm.pwd)+'<br/>';
  reason += validateEmail(theForm.email)+'<br/>';
  reason += validatePhone(theForm.phone)+'<br/>';
  reason += validateEmpty(theForm.from);
 

  if (reason != "") {
    document.getElementById('box1').style.visibility= 'visible';
    document.getElementById('box1').innerHTML = reason ;
   
    return false;
  }

  return true;
}
 
function validateEmpty(fld) {
    var error = "";
  
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;   
}
function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
        fld.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    } 
    return error;
}
function validatePassword(fld) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers 
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter a password.\n";
    } else if ((fld.value.length < 7) || (fld.value.length > 15)) {
        error = "The password is the wrong length. \n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        error = "The password contains illegal characters.\n";
        fld.style.background = 'Yellow';
    } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
        error = "The password must contain at least one numeral.\n";
        fld.style.background = 'Yellow';
    } else {
        fld.style.background = 'White';
    }
   return error;
}  
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
    
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validatePhone(fld) {
    var error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');     

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

</script>
</head>
<body>
<h1>Survey</h1>

<form name="demo" onsubmit="return validateFormOnSubmit(this)">
<table >
  <tbody>
  <tr>
    <td><label for="username">Your user name:</label></td>
    <td><input name="username" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td><label for="pwd">Your password</label></td>
    <td><input name="pwd" size="35" maxlength="25" type="password"></td>
  </tr>   
  <tr>
    <td><label for="email">Your email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"></td>
  </tr>   
  <tr>
    <td><label for="phone">Your telephone number:</label></td>
    <td><input name="phone" size="35" maxlength="25" type="text"></td>
  </tr>   
  <tr>
    <td>
        <label for="from">Where are you :</label></td>
    <td><input name="from" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr> 
  </tbody>
</table>
</form>

<div style="visibility:hidden" id="box1">
</div>
</body>
</html>

I have a user name, password, phone number etc., that all need to be validated before being submitted. The functions filter out the unwanted characters and null and zero length strings. I did have a pop up that listed the errors but I would prefer them to be listed below the log in screen that is a hidden div. I cannot get it to work. The validation works fine, though. Thanks in advance

<html>
<head>
<title>WebCheatSheet - JavaScript Tutorial</title>
<script language="javascript">
 reason = "";
function validateFormOnSubmit(theForm) {


  reason += validateUsername(theForm.username);
  reason += validatePassword(theForm.pwd);
  reason += validateEmail(theForm.email);
  reason += validatePhone(theForm.phone);
  reason += validateEmpty(theForm.from);
 
  
  if (reason != "") {
    document.getElementById('box1').style.visibility = 'visible';
    
    return false;
  }

  return true;
}
 

function validateEmpty(fld) {
    var error = "";
  
    if (fld.value.length == 0) {
        fld.style.background = 'Yellow'; 
        error = "The required field has not been filled in.\n"
    } else {
        fld.style.background = 'White';
    }
    return error;   
}
function validateUsername(fld) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (fld.value == "") {
        fld.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((fld.value.length < 5) || (fld.value.length > 15)) {
        fld.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(fld.value)) {
        fld.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    } 
    return error;
}
function validatePassword(fld) {
    var error = "";
    var illegalChars = /[\W_]/; // allow only letters and numbers 
 
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter a password.\n";
    } else if ((fld.value.length < 7) || (fld.value.length > 15)) {
        error = "The password is the wrong length. \n";
        fld.style.background = 'Yellow';
    } else if (illegalChars.test(fld.value)) {
        error = "The password contains illegal characters.\n";
        fld.style.background = 'Yellow';
    } else if (!((fld.value.search(/(a-z)+/)) && (fld.value.search(/(0-9)+/)))) {
        error = "The password must contain at least one numeral.\n";
        fld.style.background = 'Yellow';
    } else {
        fld.style.background = 'White';
    }
   return error;
}  
function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
} 

function validateEmail(fld) {
    var error="";
    var tfld = trim(fld.value);                        // value of field with whitespace trimmed off
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
    
    if (fld.value == "") {
        fld.style.background = 'Yellow';
        error = "You didn't enter an email address.\n";
    } else if (!emailFilter.test(tfld)) {              //test email for illegal characters
        fld.style.background = 'Yellow';
        error = "Please enter a valid email address.\n";
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = 'Yellow';
        error = "The email address contains illegal characters.\n";
    } else {
        fld.style.background = 'White';
    }
    return error;
}
function validatePhone(fld) {
    var error = "";
    var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');     

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

</script>
</head>
<body>
<h1>Survey</h1>

<form name="demo" onsubmit="return validateFormOnSubmit(this)" action="test.htm">
<table >
  <tbody>
  <tr>
    <td><label for="username">Your user name:</label></td>
    <td><input name="username" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td><label for="pwd">Your password</label></td>
    <td><input name="pwd" size="35" maxlength="25" type="password"></td>
  </tr>   
  <tr>
    <td><label for="email">Your email:</label></td>
    <td><input name="email" size="35" maxlength="30" type="text"></td>
  </tr>   
  <tr>
    <td><label for="phone">Your telephone number:</label></td>
    <td><input name="phone" size="35" maxlength="25" type="text"></td>
  </tr>   
  <tr>
    <td>
        <label for="from">Where are you :</label></td>
    <td><input name="from" size="35" maxlength="50" type="text"></td>
  </tr>   
  <tr>
    <td>&nbsp;</td>
    <td><input name="Submit" value="Send" type="submit" ></td>
    <td>&nbsp;</td>
  </tr> 
  </tbody>
</table>

<div style="visibility:hidden" id="box1">woot?
<script type="text/javascript"> document.write.demo('reason');
</script>
</div>
</form>
</body>
</html>

Works perfect, thanks!

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.