SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 125
  1. #1
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with javascript

    hi all,
    i have created one program using javascript.i have written using javascript functions..
    can u tell me what is the problem with my program i have saved it as messages.js,but the script is not executing can u tell me what went wrong.....
    below is my javascript program.....
    Code:
    // form validation function //
     function checkName(form)
    {
      var eobj=document.getElementById('realnameerror');
      var sRealName = form.realname.value;
      var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
      var error=false;
      eobj.innerHTML='';
      if (sRealName == '') 
      {
       error='Error: Username cannot be blank!';
      }
      else if (sRealName.length < 4) 
      {
        error="UserName should be atleast 4 characters long";
      }
      else if (!oRE.test(sRealName))
      {
       error="Incorrect format.";
      }
      if (error)
    {
       if (hasFocus == false) 
       {
         form.realname.focus();
         hasFocus = true;
       } 
       eobj.innerHTML=error;
       return false;
      }
      return true;
     }
    
    function checkEmail(form)          /* for email validation */
    {
     var eobj=document.getElementById('emailerror');
     eobj.innerHTML='';
     var error = false;
      if (form.email.value.length == 0) 
      {
        error = 'Please enter email.';
      } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
     {
      return true;
     } else 
     {
       error = 'Invalid E-mail Address! Please re-enter.';
     }
     if (error) 
    {
       eobj.innerHTML=error;
       if (!hasFocus) 
       {
         form.email.focus();
         hasFocus = true;
       } 
       return false;
     }
    
     return true;
    }
    
    function validatePwd(form)          /* password & retype-password verification */
    {       
     var eobj1=document.getElementById('passworderror');
     var eobj2=document.getElementById('password2error');
     var minLength=6;
     var invalid=' ';
     var pw1=form.password.value;
     var pw2=form.password2.value;
     var error=false;
     eobj1.innerHTML='';
     eobj2.innerHTML='';
     if (pw1.length<1)
     {
      error='Please enter your password.';
     }
     else if (pw1.length < minLength)
     {
      error='Your password must be at least ' + minLength + ' characters long. Try again.';
     }
     else if (pw1.indexOf(invalid) > -1)
     {
      error='Sorry, spaces are not allowed.';
     } 
    else if (pw2.length == 0) 
    {
      error='Please retype password.';
       if (!hasFocus) 
       {
         form.password2.focus();
         hasFocus = true;
       } 
      eobj2.innerHTML=error;
      return false;
     }
     if (error)
     {
       if (!hasFocus) 
       {
         form.password.focus();
         hasFocus = true;
       } 
        eobj1.innerHTML=error;
      return false;
     }
     if (pw1 != pw2)
     {
      eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
       if (!hasFocus) 
       {
         form.password2.focus();
         hasFocus = true;
       } 
      return false;
     }
     return true;
    }
    
    function validPhone(form)              /* phone no validation */
    {          
     var eobj=document.getElementById('phonenoerror');
     var valid = '0123456789';
     var phone = form.phoneno.value;
     var error=false;
     var i=0;
     var temp;
     eobj.innerHTML='';
     if (phone == '')
     {
      error='This field is required. Please enter phone number';
     }
     else if (!phone.length > 1 || phone.length < 10)
     {
      error='Invalid phone number length! Please try again.';
     }
     else 
     {
      for (i=0; i < phone.length; i++)
     {
       temp = '' + phone.substring(i, i + 1);
       if (valid.indexOf(temp) == -1)
        {
        error='Invalid characters in your phone. Please try again.';
        }
      }
     }
     if (error)
     {
       if (!hasFocus) 
       {
         form.phoneno.focus();
         hasFocus = true;
       } 
      eobj.innerHTML=error;
      return false;
     }
     return true;
    }
    
    function validate() 
     {
      hasFocus = false;
     var form = document.forms['form'];
     var ary=[checkName,checkEmail,validatePwd,validPhone];
     var rtn=true;
     var z0=0;
     for (var z0=0;z0<ary.length;z0++)
    {
      if (!ary[z0](form))
      {
        rtn=false;
      }
     }
     return rtn;
    }
    
    // START OF MESSAGE SCRIPT //
    
    var MSGTIMER = 20;
    var MSGSPEED = 5;
    var MSGOFFSET = 3;
    var MSGHIDE = 3;
    
    // build out the divs, set attributes and call the fade function //
    function inlineMsg(target,string,autohide) {
      var msg;
      var msgcontent;
      if(!document.getElementById('msg')) {
        msg = document.createElement('div');
        msg.id = 'msg';
        msgcontent = document.createElement('div');
        msgcontent.id = 'msgcontent';
        document.body.appendChild(msg);
        msg.appendChild(msgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
      } else {
        msg = document.getElementById('msg');
        msgcontent = document.getElementById('msgcontent');
      }
      msgcontent.innerHTML = string;
      msg.style.display = 'block';
      var msgheight = msg.offsetHeight;
      var targetdiv = document.getElementById(target);
      targetdiv.focus();
      var targetheight = targetdiv.offsetHeight;
      var targetwidth = targetdiv.offsetWidth;
      var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
      var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
      msg.style.top = topposition + 'px';
      msg.style.left = leftposition + 'px';
      clearInterval(msg.timer);
      msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
      if(!autohide) {
        autohide = MSGHIDE;  
      }
      window.setTimeout("hideMsg()", (autohide * 1000));
    }
    
    // hide the form alert //
    function hideMsg(msg) {
      var msg = document.getElementById('msg');
      if(!msg.timer) {
        msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
      }
    }
    
    // face the message box //
    function fadeMsg(flag) {
      if(flag == null) {
        flag = 1;
      }
      var msg = document.getElementById('msg');
      var value;
      if(flag == 1) {
        value = msg.alpha + MSGSPEED;
      } else {
        value = msg.alpha - MSGSPEED;
      }
      msg.alpha = value;
      msg.style.opacity = (value / 100);
      msg.style.filter = 'alpha(opacity=' + value + ')';
      if(value >= 99) {
        clearInterval(msg.timer);
        msg.timer = null;
      } else if(value <= 1) {
        msg.style.display = "none";
        clearInterval(msg.timer);
      }
    }
    
    // calculate the position of the element in relation to the left of the browser //
    function leftPosition(target) {
      var left = 0;
      if(target.offsetParent) {
        while(1) {
          left += target.offsetLeft;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.x) {
        left += target.x;
      }
      return left;
    }
    
    // calculate the position of the element in relation to the top of the browser window //
    function topPosition(target) {
      var top = 0;
      if(target.offsetParent) {
        while(1) {
          top += target.offsetTop;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.y) {
        top += target.y;
      }
      return top;
    }
    // preload the arrow //
    if(document.images) {
      arrow = new Image(7,80); 
      arrow.src = "images/msg_arrow.gif"; 
    }

  2. #2
    SitePoint Enthusiast ironikart's Avatar
    Join Date
    Apr 2005
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are you invoking these functions? I think we are only seeing part of the picture with your JavaScript, do you have something extra that you use to run this to validate your form?

  3. #3
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i have HTML page for login it is saved as login.html which is used for logging in to the form...
    below is the code for login.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Inline Form Validation Demo</title>
    <link rel="stylesheet" type="text/css" href="messages.css" />
    <script type="text/javascript" src="messages.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
        <label for="name">User Name:</label>
        <input type="text" name="name" id="name" />
        
    	<label for="email">Email Id:</label>
        <input type="text" name="email" id="email" />
        
    	<label for="password">Password:</label>
        <input type="text" name="password" id="password" />
    	
        <label for="repassword">Retype Password:</label>
        <input type="text" name="repassword" id="repassword" />
    	
    	<label for="phoneno">Phone no:</label>
        <input type="text" name="phoneno" id="phoneno" />
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>
    below is my CSS code which i used for styling.it is saved as
    messages.css
    Code:
    * 
    {
     margin:0; 
     padding:0;
    }
    
    body 
    {
      font:12px Verdana, Arial, Helvetica, sans-serif; 
      color:black;
    }
    
    #wrapper 
    {
      width:600px; 
      margin:50px auto;
    }
    
    .form 
    {
      float:left; 
      padding:10px 10px 10px 10px; 
      background:lightblue; 
      border:2px solid white;
    }
    
    .form label 
    {
      float:left; 
      width:100px; 
      padding:10px 10px 0 10px; 
      font-weight:bold;
      clear:left;
    }
    
    .form select 
    {
      float:left; 
      width:146px; 
      margin-top:10px;
    }
    
    .form input 
    {
      float:left; 
      margin-top:10px;
    }
    
    .form .submit 
    {
      clear:both;
    }
    
    #msg 
    {
      display:none; 
      position:absolute; 
      z-index:200; 
      background:url(images/msg_arrow.gif) left center no-repeat; 
      padding-left:7px;
    }
    
    #msgcontent 
    {
      display:block; 
      background:#f3e6e6; 
      border:2px solid red; 
      border-left:none; 
      padding:5px; 
      min-width:150px; 
      max-width:250px;
    }
    below is my HTML code for success which i saved as
    success.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Inline Form Validation Demo</title>
    <link rel="stylesheet" type="text/css" href="messages.css" />
    <script type="text/javascript" src="messages.js"></script>
    </head>
    <body>
    <div id="wrapper">
      Successfully submitted!
    </div>
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    To begin with, neither of these realname pieces exist.

    Code:
    var eobj=document.getElementById('realnameerror');
    var sRealName = form.realname.value;
    No element in your HTML code has an id of "realnamerror" nor do any of your form elements have a name of "realname"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    then do you think i dont need to declare these things in javascript functions i have written...

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    then do you think i dont need to declare these things in javascript functions i have written...
    That is correct, no more than they currently are.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    then the functions i have written using javascript is it correct method to save as
    messages.js.......
    what will contain in file saved as .js

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    then the functions i have written using javascript is it correct method to save as
    messages.js.......
    what will contain in file saved as .js
    Did you write the script code yourself, or take it from somewhere else in the hopes that you might be able to make it work?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have modified the original code and i had to do it using the CSS so yhat it looks stylish displaying errors in the color we want.
    but i want to do on javascript which is new to me.....
    absolutely no idea on integrating HTML,CSS and javascript....
    but i know individually.......

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    absolutely no idea on integrating HTML,CSS and javascript....
    Okay, well I'm not in a position to be able to teach you how to do that at the moment.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually this is all about the INLINE VALIDATION for the login form means you must warnings or errors when filling the login form..
    i.e., you get errors beside the textbox.
    i have done perfectly in HTML using javscript...
    but i want to display in style using CSS and i want login form like real time applications.so i want to integrate so that i can get real time applications...

  12. #12
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Okay, well I'm not in a position to be able to teach you how to do that at the moment.
    can u tell me where can you find this type of real time inline validation and how they will be used......

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    actually this is all about the INLINE VALIDATION for the login form means you must warnings or errors when filling the login form..
    i.e., you get errors beside the textbox.
    Let's compare the form names with the names and error locations that the script expects.

    Code:
    Field names  Script names    Error locations
    --------    --------        --------
    name        realname        realnameerror
    email       email           emailerror
    password    password        passworderror
    repassword  password2       password2error
    phoneno     phoneno         phonenoerror
    For the script to work at all, the field names in the HTML code and the names in the script must all match.
    It's up to you to decide whether to change the field name or the script names.

    The other thing that needs to be done is for you to put in the form a place for each of the error messages. With the script the way it currently is, it means adding to your HTML a place to show the error. If you decide to change the HTML field names of the form, that would result in the following:

    Code html4strict:
    <input type="text" name="realname" id="name" />
    <span id="realnameerror">error</span>

    and using some CSS to present it appropriately:

    Code css:
    .form span {
        float: left;
        margin-top: 1em;
        margin-left: 0.5em;
        color: red;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have changed the html fields and replaced with fields in script.also included the span tag with error.but it is displaying error beside the text box even before i am about to do any thing.......
    below is my modified HTML with fields as in messages.js
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Dynamic Inline Form Validation Demo</title>
    <link rel="stylesheet" type="text/css" href="messages.css" />
    <script type="text/javascript" src="messages.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">
        <label for="name">User Name:</label>
        <input type="text" name="realname" id="name" />
    	<span id="realnameerror">error</span>
        
    	<label for="email">Email Id:</label>
        <input type="text" name="email" id="email" />
    	<span id="emailerror">error</span>
        
    	<label for="password">Password:</label>
        <input type="text" name="password" id="password" />
    	<span id="passworderror">error</span>
    	
        <label for="repassword">Retype Password:</label>
        <input type="text" name="repassword" id="repassword" />
    	<span id="password2error">error</span>
    	
    	<label for="phoneno">Phone no:</label>
        <input type="text" name="phoneno" id="phoneno" />
    	<span id="phonenoerror">error</span>
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>
    also i changed the CSS.....
    Code:
    * 
    {
     margin:0; 
     padding:0;
    }
    
    body 
    {
      font:12px Verdana, Arial, Helvetica, sans-serif; 
      color:black;
    }
    
    #wrapper 
    {
      width:600px; 
      margin:50px auto;
    }
    
    .form 
    {
      float:left; 
      padding:10px 10px 10px 10px; 
      background:lightblue; 
      border:2px solid white;
    }
    
    .form label 
    {
      float:left; 
      width:100px; 
      padding:10px 10px 0 10px; 
      font-weight:bold;
      clear:left;
    }
    
    .form span
    {
      float:left;
      margin-top:1em;
      matrgin-left:0.5em;
      color:red;
    }
    
    .form select 
    {
      float:left; 
      width:146px; 
      margin-top:10px;
    }
    
    .form input 
    {
      float:left; 
      margin-top:10px;
    }
    
    .form .submit 
    {
      clear:both;
    }
    
    #msg 
    {
      display:none; 
      position:absolute; 
      z-index:200; 
      background:url(images/msg_arrow.gif) left center no-repeat; 
      padding-left:7px;
    }
    
    #msgcontent 
    {
      display:block; 
      background:#f3e6e6; 
      border:2px solid red; 
      border-left:none; 
      padding:5px; 
      min-width:150px; 
      max-width:250px;
    }
    but it is not executing i think i have doubt in messages.js function only.
    what went wrong........

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    i have changed the html fields and replaced with fields in script.also included the span tag with error.but it is displaying error beside the text box even before i am about to do any thing
    That is due to the contents of the span in your HTML code.
    Leave the span empty and the error message won't show until the script is run.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have removed error in the span tag.when i click the submit button even before giving values it is displaying success message.....
    i want to display error actually in login form if we enter any wrong values.
    why it is not displaying errors.....

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    i have removed error in the span tag.when i click the submit button even before giving values it is displaying success message.....
    i want to display error actually in login form if we enter any wrong values.
    why it is not displaying errors.....
    Because there is more going wrong that needs to be fixed. We'll take it step by step.

    I'm out on the road right now, but will be able to investigate further in some hours time.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k i have identified in the login.html i have

    <form name="form" id="form" class="form" action="success.html" onsubmit="return validate(this)" method="post">

    but in my messages.js i have not included that one...1st thing

    and then i have checked using function validate(form) as....below
    Code:
    // form validation function //
     function validate(form)
     {
     
     function checkName(form)
    {
      var eobj=document.getElementById('realnameerror');
      var sRealName = form.realname.value;
      var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
      var error=false;
      eobj.innerHTML='';
      if (sRealName == '') 
      {
       error='Error: Username cannot be blank!';
      }
      else if (sRealName.length < 4) 
      {
        error="UserName should be atleast 4 characters long";
      }
      else if (!oRE.test(sRealName))
      {
       error="Incorrect format.";
      }
      if (error)
    {
       if (hasFocus == false) 
       {
         form.realname.focus();
         hasFocus = true;
       } 
       eobj.innerHTML=error;
       return false;
      }
      return true;
     }
    
    function checkEmail(form)          /* for email validation */
    {
     var eobj=document.getElementById('emailerror');
     eobj.innerHTML='';
     var error = false;
      if (form.email.value.length == 0) 
      {
        error = 'Please enter email.';
      } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
     {
      return true;
     } else 
     {
       error = 'Invalid E-mail Address! Please re-enter.';
     }
     if (error) 
    {
       eobj.innerHTML=error;
       if (!hasFocus) 
       {
         form.email.focus();
         hasFocus = true;
       } 
       return false;
     }
    
     return true;
    }
    
    function validatePwd(form)          /* password & retype-password verification */
    {       
     var eobj1=document.getElementById('passworderror');
     var eobj2=document.getElementById('password2error');
     var minLength=6;
     var invalid=' ';
     var pw1=form.password.value;
     var pw2=form.password2.value;
     var error=false;
     eobj1.innerHTML='';
     eobj2.innerHTML='';
     if (pw1.length<1)
     {
      error='Please enter your password.';
     }
     else if (pw1.length < minLength)
     {
      error='Your password must be at least ' + minLength + ' characters long. Try again.';
     }
     else if (pw1.indexOf(invalid) > -1)
     {
      error='Sorry, spaces are not allowed.';
     } 
    else if (pw2.length == 0) 
    {
      error='Please retype password.';
       if (!hasFocus) 
       {
         form.password2.focus();
         hasFocus = true;
       } 
      eobj2.innerHTML=error;
      return false;
     }
     if (error)
     {
       if (!hasFocus) 
       {
         form.password.focus();
         hasFocus = true;
       } 
        eobj1.innerHTML=error;
      return false;
     }
     if (pw1 != pw2)
     {
      eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
       if (!hasFocus) 
       {
         form.password2.focus();
         hasFocus = true;
       } 
      return false;
     }
     return true;
    }
    
    function validPhone(form)              /* phone no validation */
    {          
     var eobj=document.getElementById('phonenoerror');
     var valid = '0123456789';
     var phone = form.phoneno.value;
     var error=false;
     var i=0;
     var temp;
     eobj.innerHTML='';
     if (phone == '')
     {
      error='This field is required. Please enter phone number';
     }
     else if (!phone.length > 1 || phone.length < 10)
     {
      error='Invalid phone number length! Please try again.';
     }
     else 
     {
      for (i=0; i < phone.length; i++)
     {
       temp = '' + phone.substring(i, i + 1);
       if (valid.indexOf(temp) == -1)
        {
        error='Invalid characters in your phone. Please try again.';
        }
      }
     }
     if (error)
     {
       if (!hasFocus) 
       {
         form.phoneno.focus();
         hasFocus = true;
       } 
      eobj.innerHTML=error;
      return false;
     }
     return true;
    }
    
    function validate() 
     {
      hasFocus = false;
     var form = document.forms['form'];
     var ary=[checkName,checkEmail,validatePwd,validPhone];
     var rtn=true;
     var z0=0;
     for (var z0=0;z0<ary.length;z0++)
    {
      if (!ary[z0](form))
      {
        rtn=false;
      }
     }
     return rtn;
    }
    }
    // START OF MESSAGE SCRIPT //
    
    var MSGTIMER = 20;
    var MSGSPEED = 5;
    var MSGOFFSET = 3;
    var MSGHIDE = 3;
    
    // build out the divs, set attributes and call the fade function //
    function inlineMsg(target,string,autohide) {
      var msg;
      var msgcontent;
      if(!document.getElementById('msg')) {
        msg = document.createElement('div');
        msg.id = 'msg';
        msgcontent = document.createElement('div');
        msgcontent.id = 'msgcontent';
        document.body.appendChild(msg);
        msg.appendChild(msgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
      } else {
        msg = document.getElementById('msg');
        msgcontent = document.getElementById('msgcontent');
      }
      msgcontent.innerHTML = string;
      msg.style.display = 'block';
      var msgheight = msg.offsetHeight;
      var targetdiv = document.getElementById(target);
      targetdiv.focus();
      var targetheight = targetdiv.offsetHeight;
      var targetwidth = targetdiv.offsetWidth;
      var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
      var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
      msg.style.top = topposition + 'px';
      msg.style.left = leftposition + 'px';
      clearInterval(msg.timer);
      msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
      if(!autohide) {
        autohide = MSGHIDE;  
      }
      window.setTimeout("hideMsg()", (autohide * 1000));
    }
    
    // hide the form alert //
    function hideMsg(msg) {
      var msg = document.getElementById('msg');
      if(!msg.timer) {
        msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
      }
    }
    
    // face the message box //
    function fadeMsg(flag) {
      if(flag == null) {
        flag = 1;
      }
      var msg = document.getElementById('msg');
      var value;
      if(flag == 1) {
        value = msg.alpha + MSGSPEED;
      } else {
        value = msg.alpha - MSGSPEED;
      }
      msg.alpha = value;
      msg.style.opacity = (value / 100);
      msg.style.filter = 'alpha(opacity=' + value + ')';
      if(value >= 99) {
        clearInterval(msg.timer);
        msg.timer = null;
      } else if(value <= 1) {
        msg.style.display = "none";
        clearInterval(msg.timer);
      }
    }
    
    // calculate the position of the element in relation to the left of the browser //
    function leftPosition(target) {
      var left = 0;
      if(target.offsetParent) {
        while(1) {
          left += target.offsetLeft;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.x) {
        left += target.x;
      }
      return left;
    }
    
    // calculate the position of the element in relation to the top of the browser window //
    function topPosition(target) {
      var top = 0;
      if(target.offsetParent) {
        while(1) {
          top += target.offsetTop;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.y) {
        top += target.y;
      }
      return top;
    }
    // preload the arrow //
    if(document.images) {
      arrow = new Image(7,80); 
      arrow.src = "images/msg_arrow.gif"; 
    }
    Last edited by ravi951; Aug 1, 2011 at 22:51. Reason: got the point

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    and then i have checked using function validate(form) as....below
    There is no need for you to make any changes to the script. From what I see there, you have only guaranteed that the script will fail.

    The only changes that need to occur are to bring the HTML elements of the form in line with what the script expects there to be there. That being, to match up the names of the form elements, and to have the error sections there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  20. #20
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have modified the messages.js which is below.
    but it is also not executing.....
    is there any thing wrong in the below script....
    Code:
    // form validation function //
    
    function validate() 
    {
        var form = document.forms['form'];
        var ary = [checkName,checkEmail,validatePwd,validPhone];
        var rtn = true;
        var z0 = 0;
        for (var z0 = 0; z0 < ary.length; z0++) 
        {
            if (!ary[z0](form)) 
            {
                rtn = false;
            }
        }
        return rtn;
    }
     
    function checkName(form) 
    {
        var eobj = document.getElementById('realnameerror');
        var sRealName = form.realname.value;
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
        var error = false;
        eobj.innerHTML = '';
        if (sRealName == '') 
         {
            error = 'Error: Username cannot be blank!';
         }
        else if (sRealName.length < 4) 
        {
            error = "UserName should be atleast 4 characters long";
        }
        else if (!oRE.test(sRealName)) 
        {
            error = "Incorrect format.";
        }
        if (error) 
        {
            if (hasFocus == false) 
             {
                form.realname.focus();
                hasFocus = true;
             }
            eobj.innerHTML = error;
            return false;
        }
        return true;
    }
     
    function checkEmail(form)          /* for email validation */ 
    {
        var eobj = document.getElementById('emailerror');
        eobj.innerHTML = '';
        var error = false;
        if(form.email.value.length == 0) 
        {
            error = 'Please enter email.';
        } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) 
           {
            return true;
           } else 
              {
            error = 'Invalid E-mail Address! Please re-enter.';
              }
        if (error) 
         {
            eobj.innerHTML = error;
            if (!hasFocus) 
              {
                form.email.focus();
                hasFocus = true;
              }
            return false;
         }
         return true;
    }
    
    function validatePwd(form)          /* password & retype-password verification */ 
    {
        var eobj1 = document.getElementById('passworderror');
        var eobj2 = document.getElementById('password2error');
        var minLength = 6;
        var invalid = ' ';
        var pw1 = form.password.value;
        var pw2 = form.password2.value;
        var error = false;
        eobj1.innerHTML = '';
        eobj2.innerHTML = '';
        if (pw1.length < 1) 
    	{
            error = 'Please enter your password.';
        }
    
        else if (pw1.length < minLength) 
    	{
            error = 'Your password must be at least ' + minLength + ' characters long. Try again.';
        }
    
        else if (pw1.indexOf(invalid) > -1) 
    	{
            error = 'Sorry, spaces are not allowed.';
        }
    
        else if (pw2.length == 0) 
    	{
            error = 'Please retype password.';
            if (!hasFocus)
    		{
                form.password2.focus();
                hasFocus = true;
            }
            eobj2.innerHTML = error;
            return false;
        }
        if (error) 
    	{
            if (!hasFocus) 
    		{
                form.password.focus();
                hasFocus = true;
            }
            eobj1.innerHTML = error;
            return false;
        }
    
        if (pw1 != pw2) 
    	{
            eobj2.innerHTML = ' passwords not matching.Please re-enter your password.';
            if (!hasFocus) 
    		{
                form.password2.focus();
                hasFocus = true;
            }
            return false;
        }
        return true;
    }
    
    function validPhone(form)              /* phone no validation */ 
    {
        var eobj = document.getElementById('phonenoerror');
        var valid = '0123456789';
        var phone = form.phoneno.value;
        var error = false;
        var i = 0;
        var temp;
        eobj.innerHTML = '';
        if (phone == '') 
    	{
            error = 'This field is required. Please enter phone number';
        }
        else if (!phone.length > 1 || phone.length < 10) 
    	{
            error = 'Invalid phone number length! Please try again.';
        }
        else 
    	{
            for (i = 0; i < phone.length; i++) 
    		{
                temp = '' + phone.substring(i, i + 1);
                if (valid.indexOf(temp) == -1) 
    			{
                    error = 'Invalid characters in your phone. Please try again.';
                }
            }
        }
        if (error) 
    	{
            if (!hasFocus) 
    		{
                form.phoneno.focus();
                hasFocus = true;
            }
            eobj.innerHTML = error;
            return false;
        }
        return true;
    }
    // START OF MESSAGE SCRIPT //
    
    var MSGTIMER = 20;
    var MSGSPEED = 5;
    var MSGOFFSET = 3;
    var MSGHIDE = 3;
    
    // build out the divs, set attributes and call the fade function //
    function inlineMsg(target,string,autohide) {
      var msg;
      var msgcontent;
      if(!document.getElementById('msg')) {
        msg = document.createElement('div');
        msg.id = 'msg';
        msgcontent = document.createElement('div');
        msgcontent.id = 'msgcontent';
        document.body.appendChild(msg);
        msg.appendChild(msgcontent);
        msg.style.filter = 'alpha(opacity=0)';
        msg.style.opacity = 0;
        msg.alpha = 0;
      } else {
        msg = document.getElementById('msg');
        msgcontent = document.getElementById('msgcontent');
      }
      msgcontent.innerHTML = string;
      msg.style.display = 'block';
      var msgheight = msg.offsetHeight;
      var targetdiv = document.getElementById(target);
      targetdiv.focus();
      var targetheight = targetdiv.offsetHeight;
      var targetwidth = targetdiv.offsetWidth;
      var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
      var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
      msg.style.top = topposition + 'px';
      msg.style.left = leftposition + 'px';
      clearInterval(msg.timer);
      msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
      if(!autohide) {
        autohide = MSGHIDE;  
      }
      window.setTimeout("hideMsg()", (autohide * 1000));
    }
    
    // hide the form alert //
    function hideMsg(msg) {
      var msg = document.getElementById('msg');
      if(!msg.timer) {
        msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
      }
    }
    
    // face the message box //
    function fadeMsg(flag) {
      if(flag == null) {
        flag = 1;
      }
      var msg = document.getElementById('msg');
      var value;
      if(flag == 1) {
        value = msg.alpha + MSGSPEED;
      } else {
        value = msg.alpha - MSGSPEED;
      }
      msg.alpha = value;
      msg.style.opacity = (value / 100);
      msg.style.filter = 'alpha(opacity=' + value + ')';
      if(value >= 99) {
        clearInterval(msg.timer);
        msg.timer = null;
      } else if(value <= 1) {
        msg.style.display = "none";
        clearInterval(msg.timer);
      }
    }
    
    // calculate the position of the element in relation to the left of the browser //
    function leftPosition(target) {
      var left = 0;
      if(target.offsetParent) {
        while(1) {
          left += target.offsetLeft;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.x) {
        left += target.x;
      }
      return left;
    }
    
    // calculate the position of the element in relation to the top of the browser window //
    function topPosition(target) {
      var top = 0;
      if(target.offsetParent) {
        while(1) {
          top += target.offsetTop;
          if(!target.offsetParent) {
            break;
          }
          target = target.offsetParent;
        }
      } else if(target.y) {
        top += target.y;
      }
      return top;
    }
    // preload the arrow //
    if(document.images) {
      arrow = new Image(7,80); 
      arrow.src = "images/msg_arrow.gif"; 
    }

  21. #21
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    i have modified the messages.js which is below.
    but it is also not executing.....
    What did you modify?

    Quote Originally Posted by ravi951 View Post
    is there any thing wrong in the below script....
    There was nothing wrong with the original script. You should go back to the working script that you started with.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  22. #22
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in the validate() function itself i have been checking all the conditions...

  23. #23
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k i have started working with that previous code but it is also not executing...

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    k i have started working with that previous code but it is also not executing...
    Do you have a test page for what you currently have? If so, link to it. If not, put it up on jsfiddle.net and link us to that test page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    k below is my link to the script......http://jsfiddle.net/ravi951/NfjwK/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •