Member Avatar for rajeesh_rsn

Hai all ,
I had a from in a php page with 3 fields. ie username, name and email.
I have to do a form validation using javascript.

My code is like this.

<script language="javascript">
function Validate_form(){

if(document.getElementById('user_id').value.length<=5){
document.getElementById('user').className="error_msg2";
document.getElementById('user').innerHTML='Username must have minimum 6 chars.';
return false;
}
else{
document.getElementById('user').innerHTML='';
}
var emailfilter=/^.+@.+\..{2,3}$/
var returnval=emailfilter.test(document.getElementById('email').value);
if(returnval==false){
document.getElementById('email_msg').className="error_msg2";
document.getElementById('email_msg').innerHTML='Enter a valid email address';
return false;
}
return true;
}
</script>

But this code will check and give results of only one field at a time.
I need to display all the error messages together as ( appropriate innerHTML for each ) Please help me
Thanks
Rajeesh

  • 3 Contributors
  • 2 Replies
  • 102 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mail2saion
Member Avatar for essential

This demo will evaluate all non-valid entries in the field!

<?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" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Test Page</title>

<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%;
   }

form {
  background-color : #ccc;
  color : #000;
  padding : 1em;
  border : 1px solid #000;
  width : 30%;
}
label, input {
  display : block; }

input {
  margin-bottom : .500em;
}

div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var validate, showError, validEmail, nameANDpassword;

var username, password, eMail, error;

   validEmail = /^(\w+[\.\-])*\w+@(\w+\.)+[a-zA-Z]+$/;
   nameANDpassword = /^[a-zA-Z\d]{6,8}$/;
   showErrors = function( error ) {
   div = (( document.getElementById ) ? document.getElementById( "errors" ) : document.all.errors );
   div.innerHTML = "";
   eMSG = "<p>The following error" + (( error.length > 1 ) ? "s" : "" ) + " have occured:";
    for ( x = 0; x < error.length; x++ ) {
      getError = x + 1;
      eMSG += "<br />\n" + getError + ". " + error[ x ];
      } div.innerHTML = eMSG + "</p>";    
   };

   validate = function( form ) {
   error = [];
   username = form.uname.value;
   password = form.pword.value;
   eMail = form.email.value;
      if ( !nameANDpassword.test( username )) {
      error[ error.length ] = "Please enter a valid username."; 
      }
      if ( !nameANDpassword.test( password )) {
      error[ error.length ] = "Please enter a valid password.";
      }
      if ( !validEmail.test( eMail )) {
      error[ error.length ] = "Please enter a valid email address.";
      }
      if ( error.length > 0 ) {
      showErrors( error );
      return false;
      } return true;
   };

// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2>JavaScript Live DEMO!</h2>
<h3>Sample Form</h3>
<form id="frm" action="#" onsubmit="return validate( this );">
<div>
<label for="uname">username: <input type="text" id="uname" name="uname" value="" size="30" /></label>
<label for="pword">password: <input type="password" id="pword" name="pword" value="" size="30" /></label>
<label for="email">e-mail: <input type="text" id="email" name="email" value="" size="30" /></label>
<input type="submit" id="sbm" name="sbm" value="submit" />
</div>
<div id="errors"></div>
</form>
</div>
</div>
</body>
</html>
commented: Keep up the good work on Daniweb ! +1
Member Avatar for mail2saion 
<script language="javascript">
function Validate_form(){
var ret=true;
if(document.getElementById('user_id').value.length<=5){
document.getElementById('user').className="error_msg2";
document.getElementById('user').innerHTML='Username must have minimum 6 chars.';
ret=false
}
else{
document.getElementById('user').innerHTML='';
}
var emailfilter=/^.+@.+\..{2,3}$/
var returnval=emailfilter.test(document.getElementById('email').value);
if(returnval==false){
document.getElementById('email_msg').className="error_msg2";
document.getElementById('email_msg').innerHTML='Enter a valid email address';
ret= false;
}
return ret;
}
</script>

TRY WITH ABOVE MODIFIED SCRIPT.

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.