SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Riverside, CA, USA
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form Validation Help

    Hi, I'm new to programming and I'm having trouble grasping certain concepts. I've done some client-side validation (for now... I plan on doing server-side validation before I go live with the form) to make sure there is input in the fields and selections before the form is processed. However, I'd like to make sure that not only are those fields passing data into the form, but also that they are passing the right kind of data (string data, numeric data) and a specified minimum and maximum amount of characters in each field. How would I go about expanding the validation in my code? I understand what my current code is doing but I don't know how to make it do a deeper validation. For example, if I wanted to only allow text in the first field and numbers in the second, would I need to create new functions or could I just add code to my current functions?

    Below is an example similar to my current form and validation code.

    Code:
    <html>
    <head>
    <title>Validation Test</title>
    <script language="JavaScript">
    function isFilled(elm) {
      if (elm.value == "" || elm.value == null) {
        return false;
      }
      else {
        return true;
      }
    }
    
    function isSelected(elm) {
      if (elm.value == "") {
        return false;
      }
      else {
        return true;
      }
    }
    
    function submitForm() {
      if (isFilled(myForm.first) == false) {
        alert("Please enter something in first field.");
        myForm.first.focus();
        return false;
      }
      if (isFilled(myForm.second) == false) {
        alert("Please enter something in second field.");
        myForm.second.focus();
        return false;
      }
      if (isSelected(myForm.selection1) == false) {
        alert("Please choose a selection in selection 1");
        myForm.selection1.focus();
        return false;
      }
      if (isSelected(myForm.selection2) == false) {
        alert("Please choose a selection in selection 2."); 
        myForm.selection2.focus();
        return false;
      }
    }
    </script>
    
    </head>
    <body>
    <form name="myForm" method="post" action="myForm2.php" onsubmit="return submitForm(this)" id="myForm">
    
    <label for="first">First: </label>
    <input type="text" name="first" id="first" />
    
    <label for="second">Second: </label>
    <input type="text" name="second" id="second" />
    
    <label for="selection1">Selection 1: </label>
    <select name="selection1" id="selection1">
    <option value="">-Choose One-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    
    <label for="selection2">Selection 2: </label>
    <select name="selection2" id="selection2">
    <option value="">-Choose One-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    
    <input type="submit" name="submit" id="submit" value="submit" />
    <input type="reset" name="reset" id="reset" value="reset" />
    </form>
    </body>
    </html>
    I appreciate any help and/or advice. Thanks!

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    To see if there is only text you can do something like this:
    Code:
    function isAlphabetic(str) {
      var regex =  /^[a-zA-Z]+$/;
      if (regex.test(str))
        return true;
      return false;
    }
    That is a regular expression. There is a simpler to understand, but less efficient method as well where you have a string that has all valid characters, and then you check each character in your string and make sure it exists in your valid character string.

    Here is an isNumeric function that uses that approach:
    Code:
    function IsNumeric(str)
    {
       var validChars = "0123456789.";
     
       for (i = 0; i < str.length; i++) 
          if (ValidChars.indexOf(str.charAt(i)) == -1) 
             return false;
       return true;
    }
    To check if they meet the min and max length, just do an if statement seeing if str.length > minLength and str.length < maxLength.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    eCodeBank has a good validation tutorial where you can just plugin different validation strategies of your choosing.


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
  •