Results 1 to 2 of 2

Thread: need help! | can't add variable

  1. #1
    Join Date
    Jan 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry need help! | can't add variable

    FORM VALIDATION| need help! | Cant add variable

    JavaScript that helps to validate my feedback form. This script has 4 variabels I think, name | email gender | message . I do not need gender var I would like to add a number var and validate it as well, for example I dont care about amount of numbers or area code, but I need to eliminate symbols line % & @ and so on.
    After playing with it I get sytax errors and so on. I really dont know JavaScript and killed more than a day trying to complete it.
    If anyone can help me thank you in advance!

    Code:
    // form validation function //
    function validate(form) {
      var name = form.name.value;
      var email = form.email.value;
      var gender = form.gender.value;
      var message = form.message.value;
      var nameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
      var emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
      var messageRegex = new RegExp(/<\/?\w+((\s+\w+(\s*=\s*(?:".*?"|'.*?'|[^'">\s]+))?)+\s*|\s*)\/?>/gim);
      if(name == "") {
        inlineMsg('name','You must enter your name.',2);
        return false;
      }
      if(!name.match(nameRegex)) {
        inlineMsg('name','You have entered an invalid name.',2);
        return false;
      }
      if(email == "") {
        inlineMsg('email','<strong>Error</strong><br />You must enter your email.',2);
        return false;
      }
      if(!email.match(emailRegex)) {
        inlineMsg('email','<strong>Error</strong><br />You have entered an invalid email.',2);
        return false;
      }
      if(gender == "") {
        inlineMsg('gender','<strong>Error</strong><br />You must select your gender.',2);
        return false;
      }
      if(message == "") {
        inlineMsg('message','You must enter a message.');
        return false;
      }
      if(message.match(messageRegex)) {
        inlineMsg('message','You have entered an invalid message.');
        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";
    }
    
    
    </script>

    this is the form

    Code:
    <form name="form" id="form" class="form" action="mypage.php" onsubmit="return validate(this)" method="post">
        <label for="name">Full Name:</label>
        <input type="text" name="name" id="name" />
        <label for="email">Email Address:</label>
        <input type="text" name="email" id="email" />
        <label for="gender">Gender:</label>
        <select name="gender" id="gender">
          <option value ="">Please Select</option>
          <option value ="male">Male</option>
          <option value ="female">Female</option>
        </select>
        <label for="message">Message:</label>
        <input type="text" name="message" id="message" />
        <input type="submit" value="Submit" class="submit" />
      </form>
    thankx

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Show us your form that has the "number/area" textbox.

    If you want to eliminate those strings, you can use replace() method of String object:
    Code:
    document.getElementById('area_number_element').value.replace(/[%&a]/g,'');
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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
  •