SitePoint Sponsor

User Tag List

Results 1 to 25 of 125

Hybrid View

  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,696
    Mentioned
    101 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,696
    Mentioned
    101 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,696
    Mentioned
    101 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
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    why my password field is displaying passwords which i given
    Have you specified in the HTML type attribute that the type of field should be password?

    Quote Originally Posted by ravi951 View Post
    also the phone no field is accepting phone no more than 10 digits
    Currently the script has the invalid length if the length is less than 10. If you want to change the error from less-than 10 to greater-than 10, then do that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes in my html page i clearly mentioned that...
    below is my login page
    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="messages1.css" />
    <script type="text/javascript" src="messages1.js"></script>
    </head>
    <body>
    <div id="wrapper">
      <form name="form" id="form" class="form" action="success1.html" onsubmit="return validate(this)" method="post">
        <label for="name">User Name</label>:
        <input type="text" name="realname" id="name" />
    	<span id="realnameerror"></span>
        
    	<label for="email">Email Id</label>:
        <input type="text" name="email" id="email" />
    	<span id="emailerror"></span>
        
    	<label for="password">Password</label>:
        <input type="text" name="password" id="password" />
    	<span id="passworderror"></span>
    	
        <label for="repassword">Retype Password</label>:
        <input type="text" name="password2" id="password2" />
    	<span id="password2error"></span>
    	
    	<label for="phoneno">Phone no</label>:
        <input type="text" name="phoneno" id="phoneno" />
    	<span id="phonenoerror"></span>
    	
    	<input type="submit" value="Submit" class="submit" />
      </form>
    </div>
    </body>
    </html>
    i have changed the phone no length to greater than 10 but it is not accepting.,.......
    below is what i changed.....
    else if (!phone.length > 1 || phone.length > 10)

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    i have changed the phone no length to greater than 10 but it is not accepting.,.......
    below is what i changed.....
    else if (!phone.length > 1 || phone.length > 10)
    Your link to the recent update doesn't show the changed condition. What is the link that shows it?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is my updated link......
    http://jsfiddle.net/ravi951/gYyAQ/1/
    i have changed to > ......

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ravi951 View Post
    this is my updated link......
    http://jsfiddle.net/ravi951/gYyAQ/1/
    i have changed to > ......
    It seems to work for me. A phone number that is more than 10 characters in length (11 characters or greater) results in the error message.

    If you still have trouble, perhaps you could consent to allow us the knowledge of what it is with which the testing is being performed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Is this what your looking for?

    http://www.sitepoint.com/books/jquery1/

  15. #15
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reply

    hi in my below jsfiddle my code is not executing kindly tell me how tom execute it.....
    below is my link to jsfiddle.....

    http://jsfiddle.net/ravi951/JwLeD/

  16. #16
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The answer to your question can be found here

  17. #17
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so i need to create a javascript for id=sc_cart and for class=smartcart() then i have to write
    the code for both is it......

  18. #18
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    The problem overall is you don't have a jQuery plugin called smartCart() which is causing the issue, if you comment out the line that tries to create a new instance of the non-existent plugin the rest of your code should run without any issues otherwise we can help you solves any issues that may arise after doing so.

  19. #19
    SitePoint Addict
    Join Date
    Jul 2011
    Location
    Hyderabad,India.
    Posts
    327
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually i am a beginner in jquery i want to do it by simple method by just using class and id function......
    whether is it possible with both of them..
    if not then i have to go for pluins.....


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
  •