2
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
- Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
- transitional.dtd">
- <html>
- <head>
- <title>Login</title>
- <style type="text/css">
- h1
- {
- color:red;
- text-align:center;
- }
- h2
- {
- color:blue;
- text-align:center;
- }
- div
- {
- width:250px;
- padding:20px;
- border:5px solid orange;
- margin:25px 250px 200px 365px;
- }
- p
- {
- text-align:center;
- font-family:Times New Roman;
- font-size:20px;
- }
- body
- {
- background-color:grey;
- background-image:url('images.jpg');
- }
- </style>
- <script type="text/javascript">
- var REEMAIL = /^(\w+[\-\_\.])*\w+\@(\w+\.)+[A-Za-z]+$/;
- function validate(form){
- var userName = form.username.value;
- var password = form.password.value;
- var errors = [];
- if (!REEMAIL.test(userName)) {
- errors[errors.length] ="You must enter a valid username.";
- }
- if (!checkLength(userName)) {
- errors[errors.length] = "You must enter a username.";
- }
- if (!checkLength(userName)) {
- errors[errors.length] = "It is not proper email address.";
- }
- if (!checkLength(password)) {
- errors[errors.length] = "You must enter a password.";
- }
- if(!checkpass(password)) {
- errors[errors.length] = " Password must have more than six characters.";
- }
- if ( !checkRadioArray(form.container) ) {
- errors[errors.length] = "You must choose any one";
- }
- if ( !checkCheckBox(form.jtech) && !checkCheckBox(form.indo)) {
- errors[errors.length] = "You must click anyone .";
- }
- if (errors.length > 0) {
- reportErrors(errors);
- return false;
- }
- return true;
- }
- function checkLength(text, min, max){
- min = min || 1;
- max = max || 10000;
- if (text.length < min || text.length > max) {
- return false;
- }
- return true;
- }
- function checkpass(text,max){
- max= max || 6;
- if(text.length < max) {
- return false;
- }
- return true;
- }
- function checkRadioArray(radioButtons){
- for (var i=0; i < radioButtons.length; i++) {
- if (radioButtons[i].checked) {
- return true;
- }
- }
- return false;
- }
- function checkCheckBox(cb){
- return cb.checked;
- }
- function reportErrors(errors){
- var msg = "There were some problems...\n";
- var numError;
- for (var i = 0; i<errors.length; i++) {
- numError = i + 1;
- msg += "\n" + numError + ". " + errors[i];
- }
- alert(msg);
- }
- </script>
- </head>
- <body>
- <h1>Registration Form</h1>
- <form method="post" action="Process.html"
- onsubmit="return validate(this);">
- <div>
- <p>
- <h2>Login</h2>
- Username: <input type="text" name="username" size="20"><br/><br/>
- Password: <input type="password" name="password" size="20"><br/><br/>
- <h2>Gender</h2>
- <b>Select the gender</b>
- <input type="radio" name="container" value="Male"> Male
- <input type="radio" name="container" value="Female"> Female
- <br/><br/>
- <h2>Employee</h2>
- <input type="checkbox" name="jtech">
- Jtech
- <input type='checkbox' name="indo">
- Indoshell
- <br/><br/>
- <input type="submit" value="Submit">
- <input type="reset" value="Reset Form">
- </p>
- </div>
- </form>
- </body>
- </html>
