Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | 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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
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;
}
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


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



All times are GMT -4. The time now is 07:07 AM.


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