SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member passam's Avatar
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question FORM validation | NEED HELP! | Cant 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>
    Last edited by passam; Jan 20, 2009 at 20:17.

  2. #2
    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)
    I removed the gender part of the form and replaced it with a part for a phone number instead.

    Code javascript:
    <label for="number">Phone Number:</label>
    <input type="text" name="number" id="number" />

    All of the parts in the code that are to do with gender, should be changed to appropriate parts to deal with a phone number instead. You want to eliminate inappropriate symbols, so I presume that you do want to include appropriate ones, such as digits, parenthaesis, spaces and dashes.

    Here are the code parts to do with gender, that will be replaced

    Code javascript:
    var gender = form.gender.value;
    ...
    if(gender == "") {
        inlineMsg('phone','<strong>Error</strong><br />You must select your gender.',2);
        return false;
    }

    The updated parts of the script are as follows:

    Code javascript:
    var phone = form.phone.value;
    ...
    var phoneRegex = /^[\d\(\)\- ]+$/;
    ...
    if(phone == "") {
        inlineMsg('phone','<strong>Error</strong><br />You must enter your phone number.',2);
        return false;
    }
    if(!phone.match(phoneRegex)) {
        inlineMsg('phone','<strong>Error</strong><br />You have entered an invalid phone number.',2);
        return false;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    var phoneRegex = /^[\d\(\)\- ]+$/;
    I'm just learning regular expressions.. is the above a character class saying it will match one or more digit parenthesis dash and space?

    so in this if statement:
    Code JavaScript:
    if(!phone.match(phoneRegex)) {
        inlineMsg('phone','<strong>Error</strong><br />You have entered an invalid phone number.',2);
        return false;
    }

    is the conditional true if a digit parenthesis dash or space is not there?

  4. #4
    SitePoint Member passam's Avatar
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PMW57Unobtrusively ZenThank you so much!!!!!!!!!!!!!!!! It works !!!!!!!!

  5. #5
    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)
    *steps back, somewhat in shock*

    Er, thanks.

    Quote Originally Posted by tictike View Post
    is the conditional true if a digit parenthesis dash or space is not there?
    The match is true if any of those items in the character class is there.
    The flip side is that the match is false if anything else other than those characters is there.

    So, the condition is checking if any of the entered characters do not match what is in the list.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm. I'm getting it, slowly. So I first thought that the reg ex engine would stop searching the string once 1 digit, 1 space, etc were found, but now I think that's what the plus sign is supposed to fix.

  7. #7
    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)
    This site should help you understand this a lot more.
    http://www.regular-expressions.info/repeat.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •