www.webdeveloper.com
Results 1 to 8 of 8

Thread: form validation

  1. #1
    Join Date
    Jul 2011
    Posts
    55

    form validation

    Hi all,
    i need one form consisting of user name,email id,password,retype password and telephone number. using javascript.
    where username may be any valid one,emailid should be valid email id,password and retype password should match and phone no should be 10 digit no.
    Below i have given code for each one individually except for username.please intergrate all so that i get all required fields...and include user name and submit button also.

    /* this is valid Email id */
    <html>
    <head>

    <SCRIPT LANGUAGE="JavaScript">

    function checkEmail(myForm)
    {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
    {
    return (true)
    }
    alert("Invalid E-mail Address! Please re-enter.")
    return (false)
    }

    </script>

    </head>

    <body>

    <form onSubmit="return checkEmail(this)">
    E-mail Address:<br>
    <input type="text" name="emailAddr">
    <p>
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
    </form>
    </html>
    /* this is password and retype password*/
    <html>
    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    function validatePwd()
    {
    var invalid = " "; // Invalid character is a space
    var minLength = 6; // Minimum length
    var pw1 = document.myForm.password.value;
    var pw2 = document.myForm.password2.value;
    // check for a value in both fields.
    if (pw1 == '' || pw2 == '')
    {
    alert('Please enter your password twice.');
    return false;
    }
    // check for minimum length
    if (document.myForm.password.value.length < minLength) {
    alert('Your password must be at least ' + minLength + ' characters long. Try again.');
    return false;
    }
    // check for spaces
    if (document.myForm.password.value.indexOf(invalid) > -1)
    {
    alert("Sorry, spaces are not allowed.");
    return false;
    }
    else
    {
    if (pw1 != pw2)
    {
    alert ("You did not enter the same new password twice. Please re-enter your password.");
    return false;
    }
    else
    {
    alert('Nice job.');
    return true;
    }
    }
    }
    // End -->
    </script>
    </HEAD>
    <BODY>
    <form name=myForm onSubmit="return validatePwd()">
    Enter your password twice.
    <br>
    <p>
    Password: <input type=password name=password maxlength=12>
    <br>
    Retype password: <input type=password name=password2 maxlength=12>
    <p>
    <input type=submit value="Submit">
    </form>
    </html>
    /* this is valid 10 digit phone no */
    <html>
    <script type="text/javascript>
    function ValidPhone(aphone)
    {
    var valid = "0123456789";
    if(aphone=="")
    {
    alert ("This field is required. Please enter phone number");
    return false;
    }

    if(aphone.length !=10)
    {
    alert("Invalid phone number length! Please try again.");
    return false;
    }

    for (var i=0; i < aphone.length; i++)
    {
    temp = "" + aphone.substring(i, i+1);
    if (valid.indexOf(temp) == "-1")
    {
    alert("Invalid characters in your phone. Please try again.");
    return false;
    }
    }

    return true;
    }
    </script>
    <body>

    <form>
    <form name="myform" action="" onsubmit="return ValidPhone(aphone)"
    method="post">
    Phone No:<input type="text" name="phone No">
    <input type="submit" value="submit">
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    607

    Home Work?

    I would do it like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
      <head>
        <title>Home Work</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Language" content="en-US" />
        <meta name="Author" content="James Alarie - jalarie@umich.edu" />
        <meta name="description" content="Help this person with home work." />
        <meta name="keywords" content="help,home,work" />
        <link rev="made" href="mailto:jalarie@umich.edu" />
    <!--
        Author:    James Alarie
        Company:   -independent-
        Address:   3391 N Genesee Rd
                   Flint  MI  48506
                   Latitude: 42.9663  Longitude: -83.7769
        Telephone: +1-810-736-8259
        Fax:       -none-
        Web Site:  http://spruce.flint.umich.edu/~jalarie/
        E-Mail:    jalarie@umich.edu
        Comments:  Having said that, I've probably told you more than I know.
    -->
    
        <style type="text/css">
          /*<![CDATA[*/
    
      .center {
        text-align: center;
      }
      .center > div {
        display: table;
        margin: 0px auto;
      }
      .center > form {
        display: table;
        margin: 0px auto;
      }
      .center > form > div {
        display: table;
        margin: 0px auto;
      }
    
          /*]]>*/
        </style>
        
        <script type="text/javascript">
          /*<![CDATA[*/
    
      function checkForm() {
        f1=document.forms[0];                           // abbreviation
        if (!f1.emailAddr.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
          alert("Invalid E-mail Address! Please re-enter.")
          return false;
        }
        pw1=f1.password.value;
        pw2=f1.password2.value;
        if (pw1 == '' || pw2 == '') {
          alert('Please enter your password twice.');
          return false;
        }
        var invalid = " "; // Invalid character is a space
        var minLength = 6; // Minimum length
        if (pw1.length < minLength) {
          alert('Your password must be at least ' + minLength + ' characters long. Try again.');
          return false;
        }
        if (pw1.indexOf(invalid) > -1) {
          alert("Sorry, spaces are not allowed.");
          return false;
        }
        if (pw1 != pw2) {
          alert ("You did not enter the same new password twice. Please re-enter your password.");
          return false;
        }
        var valid = "0123456789";
        aphone=f1.phoneNo.value
        if (aphone == "") {
          alert ("This field is required. Please enter phone number");
          return false;
        }
        if (aphone.length !=10) {
          alert("Invalid phone number length! Please try again.");
          return false;
        }
        for (var i=0; i < aphone.length; i++) {
          temp = "" + aphone.substring(i, i+1);
          if (valid.indexOf(temp) == "-1") {
            alert("Invalid characters in your phone. Please try again.");
            return false;
          }
        }
        alert('Nice job.');
        return true;
      } // checkForm
    
          /*]]>*/
        </script>
    
      </head>
      <body class="body1">
       <div id="body">
    <!-- Page Header -->
        <div id="header">
          <h1>Home Work</h1>
          <hr />
        </div>
    <!-- Content -->
        <div id="content">
          <br />
          <noscript>
            <p class="notice">
              You must have scripting enabled to make full use of this page.
            </p>
          </noscript>
          <div class="center">
            <form method="post" action="javascript:void(0);" onsubmit="return checkForm();">
             <div class="form">
              E-mail Address:&nbsp; <br />
              <input type="text" name="emailAddr" id="emailAddr" />
              <br />
              Enter your password twice.<br />
              <p>
                Password: <input type="password" name="password" id=="password" maxlength="12" />
                <br>
                Retype password: <input type="password" name="password2" id="password2" maxlength="12">
              </p>
              Phone No: <input type="text" name="phoneNo" id="phoneNo" />
              <br />
              <input type="submit" value="Submit" title="Submit" />&nbsp;
              <input type="reset" value="Reset" title="Reset" />&nbsp; 
             </div><!-- form -->
            </form>
          </div><!-- center -->
        </div>
    <!-- Page Footer -->
        <div id="footer">
          <br clear="all" /><hr />
          Written on July 19, 2011, by:&nbsp;
          <a href="mailto:jalarie@umich.edu">James Alarie</a>.
        </div>
       </div>
      </body>
    </html>

  3. #3
    Join Date
    Jul 2011
    Posts
    55

    reply

    hi
    i want to check the username we give should accept a-z &b 0-9 and 3 special characters .(dot),_(underscore),-(hypen)
    below is the code i have written but for valid username also it is displaying error message.
    tell me what to do so that it should accept only valid username and 3 special characters.

    function checkName(form) /* for real name verification */
    {
    var re =/^[a-z0-9]{4}[._-]\d{3}/i;
    var isCorrectFormat = re.test(form);
    if (!isCorrectFormat)
    {
    alert("Invalid characters in username. It can only contain._ and-");
    return false;
    }

  4. #4
    Join Date
    Nov 2002
    Location
    Flint, Michigan, USA
    Posts
    607
    Quote Originally Posted by ravi951 View Post
    var re =/^[a-z0-9]{4}[._-]\d{3}/i;
    You've asked for four characters chosen from the alphabetics and numerics (case ignored) followed by any one of your special characters and three digits. There may be more characters following those three digits, but you haven't mentioned them so they can be anything or nothing at all. What specific pattern do you want? Please give examples of valid and invalid values.

  5. #5
    Join Date
    Jul 2011
    Posts
    55

    reply

    i want username to accept characters and digits and only 3 special characters which are .(dot),_(underscore) and -(hypen).
    At any time only one special character is allowed

    valid examples are ravikumar.951,ravikumar_951 ,ravikumar-951

    invalid examples are
    ravikumar.951_ ravi_kumar-951 and ravi-kumar.951

    only one special character is allowed and length of username restricted to max of 15 characters

  6. #6
    Join Date
    Jul 2011
    Posts
    55

    combining two functions

    hi all
    i have 2 javascript one is simple login form and other is username function.
    i want to fit username function into login form because username function will allow special characters.
    below is my login form ..
    <html>
    <head>
    <meta charset="utf-8">
    <title>Simple Registration Form</title>
    <script type="text/javascript">
    function checkName(form) /* for real name verification */
    {
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(text);
    if (!isCorrectFormat)
    {
    alert("Invalid characters in username. It can only contain...");
    return false;
    }


    if (form.realname.value == '')
    {
    alert('Error: Username cannot be blank!');
    form.realname.focus();
    return false;
    }

    return true;
    }

    function checkEmail(form) /* for email validation */
    {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
    {
    return true;
    }

    alert('Invalid E-mail Address! Please re-enter.');
    return false;
    }

    function validatePwd(form) /* password & retype-password verification */
    {
    var invalid = ' ', minLength = 6;
    var pw1 = form.password.value, pw2 = form.password2.value;

    if (pw1 == '' || pw2 == '')
    {
    alert('Please enter your password twice.');
    return false;
    }

    if (form.password.value.length < minLength)
    {
    alert('Your password must be at least ' + minLength + ' characters long. Try again.');
    return false;
    }

    if (document.form.password.value.indexOf(invalid) > -1)
    {
    alert('Sorry, spaces are not allowed.');
    return false;
    }
    else
    {
    if (pw1 != pw2)
    {
    alert('You did not enter the same new password twice. Please re-enter your password.');
    return false;
    }
    else
    {
    alert('Successfull.');
    return true;
    }
    }
    }

    function validPhone(form) /* phone no validation */
    {
    var valid = '0123456789', phone = form.phoneno.value;

    if (phone == '')
    {
    alert('This field is required. Please enter phone number');
    return false;
    }

    if (!phone.length > 1 || phone.length < 10)
    {
    alert('Invalid phone number length! Please try again.');
    return false;
    }

    for (var i = 0; i < phone.length; i++)
    {
    temp = '' + phone.substring(i, i + 1);

    if (valid.indexOf(temp) == -1)
    {
    alert('Invalid characters in your phone. Please try again.');
    return false;
    }
    }

    return true;
    }

    function validate()
    {
    var form = document.forms['form'];

    if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
    {
    return false;
    }

    return true;
    }
    </script>
    </head>
    <body>

    <form action="" method="post" name="form" onsubmit="return validate()">
    Name: <input type="text" name="realname" size="25">
    <br>
    E-Mail: <input type="text" name="email" size="25">
    <br>
    Password: <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo: <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

    i want to include the below one in the above function so that it works perfectly
    <html>
    <head>
    <title> Validate Username</title>
    <script type="text/javascript">
    function validateUsername(form)
    {
    var sUsername = form.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sUsername);
    if (!isCorrectFormat)
    {
    alert("Incorrect format.");
    textbox.select();
    textbox.focus();
    return false;
    }
    alert("Correct format");
    return true;
    }
    </script>
    </head>
    <body>
    <form>
    <input type="text" id="txtUsername" size="30" maxlength="20" />&nbsp;<input type="button"
    value="Validate" onclick="validateUsername(document.getElementById('txtUsername'));" />
    </form>
    </body>
    </html>
    please can you make for that me..

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Please use tags around your code or select your code and click the "#" button.

  8. #8
    Join Date
    Jul 2011
    Posts
    55

    javascript error

    i have combined that into one javascript program..now before i am inserting any thing to password and clicking the submit button it is alerting the message "password should be atleast 6 characters long".
    what is the solution for it

    <code>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Validation using JavaScript</title>
    <script type="text/javascript">
    function checkName(form)
    {
    var sRealName = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealName);

    if (sRealName == '')
    {
    alert('Error: Username cannot be blank!');
    form.realname.focus();
    return false;
    }
    else if (sRealName.length < 4)
    {
    alert("UserName should be atleast 4 characters long");
    return false;
    }
    else if (!isCorrectFormat)
    {
    alert("Incorrect format.");
    textbox.select();
    textbox.focus();
    return false;
    }

    return true;
    }

    function checkEmail(form) /* for email validation */
    {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
    {
    return true;
    }

    alert('Invalid E-mail Address! Please re-enter.');
    return false;
    }

    function validatePwd(form) /* password & retype-password verification */
    {
    var invalid = ' ';
    minLength = 6;
    var pw1 = form.password.value;
    var pw2 = form.password2.value;

    if (form.password.value.length < minLength)
    {
    alert('Your password must be at least ' + minLength + ' characters long. Try again.');
    return false;
    }

    else if (pw1 == '' || pw2 == '')
    {
    alert('Please enter your password twice.');
    return false;
    }



    if (document.form.password.value.indexOf(invalid) > -1)
    {
    alert('Sorry, spaces are not allowed.');
    return false;
    }
    else
    {
    if (pw1 != pw2)
    {
    alert('You did not enter the same new password twice. Please re-enter your password.');
    return false;
    }
    else
    {
    alert('Passwords Match.');
    return false;
    }

    return false;
    }
    }

    function validPhone(form) /* phone no validation */
    {
    var valid = '0123456789';
    phone = form.phoneno.value;

    if (phone == '')
    {
    alert('This field is required. Please enter phone number');
    return false;
    }

    if (!phone.length > 1 || phone.length < 10)
    {
    alert('Invalid phone number length! Please try again.');
    return false;
    }

    for (var i = 0; i < phone.length; i++)
    {
    temp = '' + phone.substring(i, i + 1);

    if (valid.indexOf(temp) == -1)
    {
    alert('Invalid characters in your phone. Please try again.');
    return false;
    }
    }

    return true;
    }

    function validate()
    {
    var form = document.forms['form'];

    if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
    {
    return false;
    }

    return true;
    }
    </script>
    </head>
    <body>

    <form action="" method="post" name="form" onsubmit="return validate()">
    User Name : <input type="text" name="realname" size="19">
    <br>
    E-Mail : <input type="text" name="email" size="25">
    <br>
    Password : <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>
    </code>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles