#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    [New Member] Contact Form Validation


    hey guys i have a simple application form i made for my MMO guild for new members to apply the only problem i cant figure out is how to make validation work can someone help me?


    first field just want not blank 2nd field just want to make sure they used only numbers and that there is 3 of them and 3rd field i just want to make sure they picked one heres my source code oh and i want it so it checks on submit
    (bear with me am a NOOB to web design)

    <html>
    <body BGCOLOR="#000">
    <font color="white">

    <fieldset>
    <legend><big><Big><BIG>
    Raid Application</big></big></big>
    </legend><br>
    <form method='POST' Action="apply.php">


    <input type='hidden' name='submitted' id='submitted' value='1'/>

    <label for='name' >Character Name*: </label><br/>
    <input type='text' name='name' id='name' maxlength="50" /><br/>

    <label for='ilvl' >Ilvl*:</label><br/>
    <input type='text' name='ilvl' id='ilvl' maxlength="3" /><br/>

    <label for='class/spec' >Please indicate Class and Spec*:</label><br/>
    <select name="class" size="5" multiple>
    <optgroup label="Death Knight">
    <option value="DKUnholy">Unholy</option>
    <option value="DKblood">Blood</option>
    <option value="DKfrost">Frost</option>
    </optgroup>

    <optgroup label="Druid">
    <option value="Boomy">Balance</option>
    <option value="Cat">Feral</option>
    <option value="Bear">Guardian</option>
    <option value="Restrodrood">Restoration</option>
    </optgroup>

    <optgroup label="Hunter">
    <option value="BMhunt">Beastmaster</option>
    <option value="SVhunt">Survival</option>
    <option value="MMhunt">Marksman</option>
    </optgroup>

    <optgroup label="Mage">
    <option value="magearc">Arcane</option>
    <option value="magefire">Fire</option>
    <option value="magefrost">Frost</option>
    </optgroup>

    <optgroup label="Monk">
    <option value="monktank">Brewmaster</option>
    <option value="MonkHealz">Mistweaver</option>
    <option value="Monkdps">Windwalker</option>
    </optgroup>

    <optgroup label="Paladin">
    <option value="Hpal">Holy</option>
    <option value="ProtPal">Protection</option>
    <option value="Retpal">Retribution</option>
    </optgroup>

    <optgroup label="Priest">
    <option value="Discpriest">Discipline</option>
    <option value="Hpriest">Holy</option>
    <option value="Spriest">Shadow</option>
    </optgroup>

    <optgroup label="Rouge">
    <option value="rougeass">Assassination</option>
    <option value="rougecombat">Combat</option>
    <option value="rougesub">Subtlety</option>
    </optgroup>

    <optgroup label="Shaman">
    <option value="elesham">Elemental</option>
    <option value="enhancesham">Enhancement</option>
    <option value="Restrosham">Restoration</option>
    </optgroup>

    <optgroup label="Warlock">
    <option value="afflock">Affliction</option>
    <option value="destrolock">Destruction</option>
    <option value="demolock">Demonology</option>
    </optgroup>

    <optgroup label="Warrior">
    <option value="MSwar">Arms</option>
    <option value="furywar">Fury</option>
    <option value="protwar">Protection</option>
    </optgroup>
    </select><br>
    <label for='extra' >Extra Information:</label><br/>
    <textarea rows="10" cols="50" name='extra' id='extra'> </textarea><br>

    <input type="submit" name='submit' value='Apply!'>
    </div>
    </fieldset>
    </form>
    </font>
    </body>
    </html>


    thanks for the help
  2. #2
  3. Contributing User
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Aug 2010
    Location
    Eastern Florida
    Posts
    3,711
    Rep Power
    347
  4. #3
  5. Banned ;)
    Devshed Supreme Being (6500+ posts)

    Join Date
    Nov 2001
    Location
    Woodland Hills, Los Angeles County, California, USA
    Posts
    9,616
    Rep Power
    4247
    Moved thread to the javascript forum. Java != JavaScript.
    Up the Irons
    What Would Jimi Do? Smash amps. Burn guitar. Take the groupies home.
    "Death Before Dishonour, my Friends!!" - Bruce D ickinson, Iron Maiden Aug 20, 2005 @ OzzFest
    Down with Sharon Osbourne

    "I wouldn't hire a butcher to fix my car. I also wouldn't hire a marketing firm to build my website." - Nilpo
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,132
    Rep Power
    119
    This is a basic JavaScript example, using an alert(); but..., you should also validate, your form, server side; so I am not sure why your post was not moved to one of the server side language forums, on this site. Anyway... here is the client side validation of your form:

    Code:
    <html>
    <head>
    <script>
    
    var errorIndicator, error1, error2, error3;
    
    function validate()
    {
    var cn = document.apply.name.value;
    var ILVL = document.apply.ilvl.value;
    var specs = document.apply.class.value;
    var regex = /^[0-9]{3}$/; // regular expression to allow only three digits
    var regi = regex.test(ILVL).toString();
    
    // validate input fields
     if (cn.length == 0) {
      error1 = "Please Enter Your Character Name.\n";
      errorIndicator1="yes";
     }
     else if (cn.length != 0) {
      error1 = "";
      errorIndicator1="no";
     }
     if (regi == "false") {
      error2 = "Please Enter A 3 Digit Number In The Ilvl.\n";
      errorIndicator2="yes";
     }
     else if (regi == "true") {
      error2 = "";
      errorIndicator2="no";
     }
     if (specs.length == 0) {
      error3 = "Please Select Your Class(es) And/Or Spec(s).";
      errorIndicator3="yes";
     }
     else if (specs.length != 0) {
      error3 = "";
      errorIndicator3="no";
     }
    
    // validate errors
     if (errorIndicator1 == "yes") {
      alert(error1 + error2 + error3);
     }
     else if (errorIndicator2 == "yes") {
      alert(error1 + error2 + error3);
     }
     else if (errorIndicator3 == "yes") {
      alert(error1 + error2 + error3);
     }
     // submit form, if all validation passes
     else {
      document.apply.onsubmit = function() {
       return true;
      }
     }
    }
    
    </script>
    </head>
    <body BGCOLOR="#000">
    <font color="white">
    
    <fieldset>
    <legend><big><Big><BIG>
    Raid Application</big></big></big>
    </legend><br>
    <form name="apply" method='POST' Action="apply.php" onsubmit="return false">
    
    
    <input type='hidden' name='submitted' id='submitted' value='1'/>
    
    <label for='name' >Character Name*: </label><br/>
    <input type='text' name='name' id='name' maxlength="50" /><br/>
    
    <label for='ilvl' >Ilvl*:</label><br/>
    <input type='text' name='ilvl' id='ilvl' maxlength="3" /><br/>
    
    <label for='class/spec' >Please indicate Class and Spec*:</label><br/>
    <select name="class" size="5" multiple>
    <optgroup label="Death Knight">
    <option value="DKUnholy">Unholy</option>
    <option value="DKblood">Blood</option>
    <option value="DKfrost">Frost</option>
    </optgroup>
    
    <optgroup label="Druid">
    <option value="Boomy">Balance</option>
    <option value="Cat">Feral</option>
    <option value="Bear">Guardian</option>
    <option value="Restrodrood">Restoration</option>
    </optgroup>
    
    <optgroup label="Hunter">
    <option value="BMhunt">Beastmaster</option>
    <option value="SVhunt">Survival</option>
    <option value="MMhunt">Marksman</option>
    </optgroup>
    
    <optgroup label="Mage">
    <option value="magearc">Arcane</option>
    <option value="magefire">Fire</option>
    <option value="magefrost">Frost</option>
    </optgroup>
    
    <optgroup label="Monk">
    <option value="monktank">Brewmaster</option>
    <option value="MonkHealz">Mistweaver</option>
    <option value="Monkdps">Windwalker</option>
    </optgroup>
    
    <optgroup label="Paladin">
    <option value="Hpal">Holy</option>
    <option value="ProtPal">Protection</option>
    <option value="Retpal">Retribution</option>
    </optgroup>
    
    <optgroup label="Priest">
    <option value="Discpriest">Discipline</option>
    <option value="Hpriest">Holy</option>
    <option value="Spriest">Shadow</option>
    </optgroup>
    
    <optgroup label="Rouge">
    <option value="rougeass">Assassination</option>
    <option value="rougecombat">Combat</option>
    <option value="rougesub">Subtlety</option>
    </optgroup>
    
    <optgroup label="Shaman">
    <option value="elesham">Elemental</option>
    <option value="enhancesham">Enhancement</option>
    <option value="Restrosham">Restoration</option>
    </optgroup>
    
    <optgroup label="Warlock">
    <option value="afflock">Affliction</option>
    <option value="destrolock">Destruction</option>
    <option value="demolock">Demonology</option>
    </optgroup>
    
    <optgroup label="Warrior">
    <option value="MSwar">Arms</option>
    <option value="furywar">Fury</option>
    <option value="protwar">Protection</option>
    </optgroup>
    </select><br>
    <label for='extra' >Extra Information:</label><br/>
    <textarea rows="10" cols="50" name='extra' id='extra'> </textarea><br>
    
    <input type="submit" name='submit' value='Apply!' onclick="validate()">
    </div> 
    </fieldset>
    </form>
    </font>
    </body>
    </html>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thanks so much for the validation script. im using a free web hosting server so im not sure how much it will let me do server side things, and to be honest the only php i know is what i wrote to get the form to email me
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,132
    Rep Power
    119
    Originally Posted by Parnoya
    to be honest the only php i know is what i wrote to get the form to email me
    Validation would be similar; you would just have to make sure you adapted it... for this form.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by web_loone08
    Validation would be similar; you would just have to make sure you adapted it... for this form.
    i got confused on what all the .document.apply.name stuff means i assume apply is my submit button name is the form box named "name" but what is all the rest for?
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,132
    Rep Power
    119
    It's part of JavaScript DOM (Document Object Model) method.

    Here's a breakdown:

    document = refers to the web page
    "apply" = the name, that I gave to the form
    "name" = the "Character Name" input field's name
    value = text string value of input field
    length = text string's length
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    ok i get it now. i also just discovered the javascript for noobs guide on this site so im gonna read up on it a little more, thanks for all your help

    ps if i happen to get stuck again on somthing would you mind if i sent you a message
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,132
    Rep Power
    119
    Originally Posted by Parnoya
    ok i get it now. i also just discovered the javascript for noobs guide on this site so im gonna read up on it a little more, thanks for all your help

    ps if i happen to get stuck again on somthing would you mind if i sent you a message
    Yeah, that's probably a good place to start and that will be fine, but if you post a question or issue; you may get your question answered faster by one of the moderators or other members, on this site; as some days I do not get on here. Plus, when you post questions and they are answered on a forum; they can be used later to help others, who may be dealing with the same issue or have the same question you do.

IMN logo majestic logo threadwatch logo seochat tools logo