Thursday 1 March 2012

Complete code with html sign up form and validation:



Copy and past given code in notepad and save it with .html for demo. Click here for detail 

<head>
<script type="text/javascript">
function validation_for_signup()
{

                var check_email = /^[\w\.]+@[a-zA-Z_]+?\.[a-zA-Z\.]{2,6}$/;
                var check_username = /^[a-zA-Z0-9_]{3,16}$/;
                var check_name = /^[a-zA-Z]{3,16}$/;
                var check_phone = /^[0-9]{3,16}$/;
                                if(document.signup.username.value=="")
                                {
                                                alert("please enter username");
                                                document.signup.username.focus();
                                                return false;
                                }
                                else if(check_username.test(document.signup.username.value) == false)
                                {
                                                alert('Invalid  username');
                                                document.signup.username.focus();
                                                return false;
                                }
                                if(document.signup.email.value=="")
                                {
                                                alert("please enter email");
                                                document.signup.email.focus();
                                                return false;
                                }
                                else if(check_email.test(document.signup.email.value) == false)
                                {
                                                alert('Invalid  email');
                                                document.signup.email.focus();
                                                return false;
                                }
                                if(document.signup.password.value=='')
                                {
                                                alert("Please enter Password.");
                                                document.signup.password.focus();
                                                return false;
                                }
                                else if(document.signup.password.value.length<6)
                                {
                                                alert("Password is too short.");
                                                document.signup.password.focus();
                                                return false;
                                }
                                if(document.signup.passconf.value=='')
                                {
                                                alert("Please confirm Password.");
                                                document.signup.passconf.focus();
                                                return false;
                                }
                                else if(document.signup.password.value!=document.signup.passconf.value)
                                {
                                                alert("Password does not match.");
                                                document.signup.password.focus();
                                                return false;
                                }
                               
                                if(document.signup.firstname.value=="")
                                {
                                                alert("please enter firstname");
                                                document.signup.firstname.focus();
                                                return false;
                                }
                                else if(check_name.test(document.signup.firstname.value) == false)
                                {
                                                alert('Invalid  firstname');
                                                document.signup.firstname.focus();
                                                return false;
                                }
                                if(document.signup.lastname.value=="")
                                {
                                                alert("please enter lastname");
                                                document.signup.lastname.focus();
                                                return false;
                                }
                                else if(check_name.test(document.signup.lastname.value) == false)
                                {
                                                alert('Invalid  lastname');
                                                document.signup.lastname.focus();
                                                return false;
                                }
                                if(document.signup.phone.value=="")
                                {
                                                alert("please enter phone");
                                                document.signup.phone.focus();
                                                return false;
                                }
                                else if(check_phone.test(document.signup.phone.value) == false)
                                {
                                                alert('Invalid  phone');
                                                document.signup.phone.focus();
                                                return false;
                                }
}


</script>
</head>

<body>

<form name="signup" action="" onSubmit="return validation_for_signup()" method="post">

<ul>

<li>
<p>Username:</p>
<p><input type="text" name="username" value="" size="50" /></p></li>

<li>
<p>Email:</p>
<p><input type="text" name="email"  value="" size="50" /></p></li>

<li><p>Password:</p>
<p><input type="password" name="password"  value="" size="50" /></p></li>
<li>
<p>Password Confirm:</p>
<p><input type="password" name="passconf"  value="" size="50" /></p></li>
<li>
<p>First Name:</p>
<p><input type="text" name="firstname"  value="" size="50" /></p></li>
<li>
<p>Last Name:</p>
<p><input type="text" name="lastname"  value="" size="50" /></p></li>
<li>
<p>Phone:</p>
<p><input type="text" name="phone"  value="" size="50" /></p></li>
<li>
<p><input type="submit" value="Submit" /></p>
</li></ul>
</form>

</body>

2 comments:

  1. im not getting the error pop for this script if enter the wrong text or if i keep a empty text box im not getting the error pop up with this code so help me out from this

    ReplyDelete
  2. nice it's working thank u.... : - }

    ReplyDelete