SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need very simple form validation script

    Newby to JS and I need a simple script to validate a form with 3 fields:
    name:
    email address:
    retype email address:

    I can handle processiong the form once submitted. I ususally use Dreamweaver to do this but I can't understand the JS well enough to get the retype email part.

    any help appreciated.

    R

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could you post some code? html and any existing javascript

  3. #3
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    207
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you want it to be validated?
    mmj

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do I want it to be validated? Just the "name" as not an empty string. The emails should have the "@" and a "." and not as a first or last letter. And the 2 emails should be the same.

    Dreamweaver put the following validation code in the header of the page:

    <script type="text/javascript">
    <!--
    function MM_validateForm() { //v4.0
    if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
    if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
    if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
    } else if (test!='R') { num = parseFloat(val);
    if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
    if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
    min=test.substring(8,p); max=test.substring(p+1);
    if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
    } if (errors) alert('The following error(s) occurred:\n'+errors);
    document.MM_returnValue = (errors == '');
    } }
    //-->
    </script>


    html code in the body of the page:

    <div id="requestform">
    <form action="" method="post" onsubmit="MM_validateForm('Name','','R','Email','','RisEmail','retype-email','','RisEmail');return document.MM_returnValue">

    <!--<input type="hidden" name="recipient" value="info@eliterealestate.com">-->
    <p>Send the form below to instantly receive the latest information on the real estate market with no obligation.</p>
    <p>Namebr />
    <input name="Name" type="text" id="Name" value="" size="25" maxlength="50" />
    </p>
    <p>Emailbr />
    <input name="Email" type="text" id="Email" value="" size="25" maxlength="50" />
    </p>
    <p>Retype Emailbr />
    <input name="retype-email" type="text" id="retype-email" value="" size="25" maxlength="50" />
    </p>
    <p class="cutshort"><input type="submit" name="btnSubmit" value="send" class="btn" /></p>
    </form>
    </div>

    I know a little JS, but I just can't figure out the JS in the header.

    Any help is greatly appreciated.
    R

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not surpirsed you can't figure that javascript out...it's a mess...my advice is to drop dreamweaver for things like this. If you want to be a web developer just stick to using it as a code editor!

    You just need to do something like this:

    Code JavaScript:
    var error = '';
    var email = '';
    var count = 0;
    function check() {
     
    //grabs all inputs
    var inputs = document.getElementsByTagName('input');
    //iterates over them
    for(var i =0; i<inputs.length; ++i) {
    	count ++;
        //if it's the email then check for the @
        if(inputs[i].getAttribute('name') == 'Email') {
            email = inputs[i].value;
            if(email == '') {
              error = 'please enter a correct email address\n';
     
            }
           else {
            var p =email.indexOf('@');
            //if theres a problem then fill a variable
            if (p<1 || p==(email.length-1)) {
                error = error + 'you must enter a valid email address\n';
     
            }
           }
       }
       //check that the 2nd address matches
       else if(inputs[i].getAttribute('name') == 'retype-email') {
          if(inputs[i].value != email) {
              error = error + "Your emails don't match\n"; 
          }
       }
       else {
          //if its not a email input then just validate to make sure its not empty or nul
          if(inputs[i].value == '') {
             error = error + 'You must fill out the required fields\n';
            // break;
          }
       }
    }
       //if theres an error then alert it
      if(error && error != '') {
     
          alert(error);
     
      } else {
      	return true;
      }
     
     
     
     
     
    }

    Then call the check() function on your submit button ...so onclick="check()"

    This code is not tested and written off ther top of my head so i cant expect it to work but its correct in essence!

    EDIT: Actually it works now!
    Last edited by elduderino; Aug 6, 2008 at 02:50.


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
  •