Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning HTML, XHTML, CSS, and JavaScript
This is the forum to discuss the Wrox book Beginning HTML, XHTML, CSS, and JavaScript by Jon Duckett; ISBN: 978-0-470-54070-1
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning HTML, XHTML, CSS, and JavaScript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 28th, 2011, 04:54 AM
Authorized User
Points: 223, Level: 4
Points: 223, Level: 4 Points: 223, Level: 4 Points: 223, Level: 4
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jul 2011
Posts: 49
Thanks: 0
Thanked 0 Times in 0 Posts
Default new form

hi all,
below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
user name .i am not getting for the other fields can u tell me how to do it..
if possible using CSS also.i have written code for CSS also....
i am displaying the HTML page also...

Code:
<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
   function checkName(form)
 {
   var eobj=document.getElementById('realnameerror');
   eobj.innerHTML='';
   var sRealName = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealName);
    var error=false;
    if (!isCorrectFormat)
    {
        error="Incorrect format.";
        form.realname.select();
        form.realname.focus();
    }

    else if (sRealName == '')
    {
        error='Error: Username cannot be blank!';
        form.realname.focus();
    }
    else if (sRealName.length < 4)
    {
        error="UserName should be atleast 4 characters long";
    }
    if (error){
     eobj.innerHTML=error;
     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 (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('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"><span id="realnameerror" ></span>
    <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>
below is the HTML code
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic Inline Form Validation Demo</title>
<link rel="stylesheet" type="text/css" href="messages.css" />
<script type="text/javascript" src="messages.js"></script>
</head>
<body>
<div id="wrapper">
  <form name="form" id="form" class="form" action="success.html" 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="password">Password:</label>
    <input type="text" name="password" id="password" />
	
    <label for="repassword">Retype Password:</label>
    <input type="text" name="repassword" id="repassword" />
	
	<label for="phoneno">Phone no:</label>
    <input type="text" name="phoneno" id="phoneno" />
	
	<input type="submit" value="Submit" class="submit" />
  </form>
</div>
</body>
</html>
below is the css
Code:
* 
{
 margin:0; 
 padding:0;
}

body 
{
  font:12px Verdana, Arial, Helvetica, sans-serif; 
  color:#666;
}

#wrapper 
{
  width:600px; 
  margin:50px auto;
}

.form 
{
  float:left; 
  padding:10px 10px 10px 10px; 
  background:#f3f3f3; 
  border:2px solid #cfcfcf;
}

.form label 
{
  float:left; 
  width:100px; 
  padding:10px 10px 0 10px; 
  font-weight:bold;
  clear:left;
}

.form select 
{
  float:left; 
  width:146px; 
  margin-top:10px;
}

.form input 
{
  float:left; 
  margin-top:10px;
}

.form .submit 
{
  clear:both;
}

#msg 
{
  display:none; 
  position:absolute; 
  z-index:200; 
  background:url(images/msg_arrow.gif) left center no-repeat; 
  padding-left:7px;
}

#msgcontent 
{
  display:block; 
  background:#f3e6e6; 
  border:2px solid #924949; 
  border-left:none; 
  padding:5px; 
  min-width:150px; 
  max-width:250px;
}




Similar Threads
Thread Thread Starter Forum Replies Last Post
How to link a login form to an MDI parent form Dokumensah BOOK: Beginning Visual C# 2010 0 March 12th, 2011 09:39 AM
Dynamic Resizing of Form Elements Relative to Form Shape in C# Bill_Thompson C# 2005 2 April 28th, 2010 07:41 PM
Move form from table field into variable to run form AnninCT BOOK: Access 2007 VBA Programmer's Reference ISBN: 978-0-470-04703-3 0 April 17th, 2010 11:17 AM
Set form.field default value based on entry in another form rmccafferty SQL Language 1 February 11th, 2010 07:20 PM
How to refresh owner form on closing of child form akumarp2p C# 2005 0 December 22nd, 2006 10:27 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.