Javascripts and forms:HELP!

Question

moerpheus 0 Junior Poster in Training

16 Years Ago

hi people,
I am weak in most computer aspects, i think because of my school.

I am creating this website and inside it there is a registration page. I used tables to create this page. So, text fields, radio buttons and check boxes belong to different forms.
I want to use javascript to make sure that the "username","password" and "confirm_password" fields don't stay blank. A user must fill the

How can i do this?

What I have done:

<script type="text/javascript">
var username;
var password;
var cp=cfpassword;
function alert()
{
   if username=""{
   alert('Please fill the user name');
   }
   else if password=""{
   alert('Please fill the password');
   }
   else if password=!cfpassword{
   alert('Passwords do not match');
   }
   }

</script>

and on the submit button i put this;

<input type="submit" name="Register" id="Register" value="Register" onclick="alert()" />

Please help me.....

javascript

3 Contributors
5 Replies
101 Views
16 Hours Discussion Span
Latest Post 16 Years Ago Latest Post by electron33

essential 84 Posting Shark

16 Years Ago

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</title>

<script type="text/javascript">
<!-- BEGIN HIDING
/* All codes are tested before release, so you are well assured that all of my codes are hustle free... 
This example will validate your form and to ensure that both fields has a valid entries. Enjoy coding */
 
var validPassword = /^[A-Za-z\d]{6,8}$/;
var validName = validPassword;
function validate(form)
{ var userId = form.UserId.value;
  var password = form.Password.value;
  var errors = [];
  if ( !validName.test( userId )) { errors[errors.length] = 'You must enter a valid name'; }
  if ( !validPassword.test( password )) { errors[errors.length] = 'You must enter a valid password!'; }
  if ( errors.length > 0 ) { reportErrors( errors ); return false; } return true; }

function reportErrors( errors ) 
{ var errorMessage = 'There where some problems...\n';
   for ( var x = 0; x < errors.length; x++ ) { var numberOfError = x + 1;
   errorMessage += '\n' + numberOfError + '. ' + errors[x]; } alert( errorMessage ); 
}
// DONE HIDING -->
</script>

</head>
<body>
<p>
<span><b>Login Form</b></span>
<form method="post" action="#" onsubmit="return validate( this );">
Username:<br /><input type="text" name="UserId" size="25" /><br />
Password:<br /><input type="password" name="Password" size="15" /><br />
<br />
<font color="red">*</font> Username and Password must be between 6 and 10 characters and can only contain letters and digits.<br /><br />
<input type="submit" value="Submit" />&nbsp;<input type="reset" value="Clear" />
</form>  

</p>
</body>
</html>

essential 84 Posting Shark

16 Years Ago

Ok got it!

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

moerpheus 0 Junior Poster in Training · Answer 1 · 2008-09-02T18:17:05+00:00

Please feel free to modify this code to match your needs. If you have any question regarding this code you can document.write('Me on my inbox'). lol! Have a good day...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Some title</title>

<script type="text/javascript">
<!-- BEGIN HIDING
/* All codes are tested before release, so you are well assured that all of my codes are hustle free... 
This example will validate your form and to ensure that both fields has a valid entries. Enjoy coding */
 
var validPassword = /^[A-Za-z\d]{6,8}$/;
var validName = validPassword;
function validate(form)
{ var userId = form.UserId.value;
  var password = form.Password.value;
  var errors = [];
  if ( !validName.test( userId )) { errors[errors.length] = 'You must enter a valid name'; }
  if ( !validPassword.test( password )) { errors[errors.length] = 'You must enter a valid password!'; }
  if ( errors.length > 0 ) { reportErrors( errors ); return false; } return true; }

function reportErrors( errors ) 
{ var errorMessage = 'There where some problems...\n';
   for ( var x = 0; x < errors.length; x++ ) { var numberOfError = x + 1;
   errorMessage += '\n' + numberOfError + '. ' + errors[x]; } alert( errorMessage ); 
}
// DONE HIDING -->
</script>

</head>
<body>
<p>
<span><b>Login Form</b></span>
<form method="post" action="#" onsubmit="return validate( this );">
Username:<br /><input type="text" name="UserId" size="25" /><br />
Password:<br /><input type="password" name="Password" size="15" /><br />
<br />
<font color="red">*</font> Username and Password must be between 6 and 10 characters and can only contain letters and digits.<br /><br />
<input type="submit" value="Submit" />&nbsp;<input type="reset" value="Clear" />
</form>  

</p>
</body>
</html>

This doesn't work because each field is contained in a separete form with different name.

just like this example

<html>
<head>
</head>
<body>
<table>
<tr><td>Username</td><td><form name="form1" method="post" action=""><input type="text" name="username" id="username" /> </form></td></tr>
<tr>Password</td>
<td><form name="form2" method="post" action=""><input type="text" name="username" id="username" /></form>
</td></tr>
</table>
<form name=form3 method="post">
<input type="submit" name="Register" id="Register" value="Register" />
</form>
</body>
</html>

please help.

essential 84 Posting Shark Featured Poster · Answer 2 · 2008-09-02T20:57:49+00:00

Modified and tested!

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form Validation</title>

<script type="text/javascript">
<!-- BEGIN HIDING
/* Tested and Modified as follows with your post example! Actually it's quite simple if you will give 1 specific name value for the 3 forms or simply apply 1 form for all the fields just like what i did on my 1st example. GoodLuck on your javascripting... */


var validPassword = /^[A-Za-z\d]{6,8}$/;
var validName = validPassword;

document.onsubmit = function( _form )
{ _form = _form ? _form : window.event;
  thisForm = _form.target ? _form.target : _form.srcElement;
var names = [ 'form1', 'form2', 'form3' ];
for ( var x = 0; x < names.length; x++ ) {
if (( thisForm.name ) && ( thisForm.name ==  names[x] )) { 
var errors = [];
if ( !validName.test( document.form1.username.value )) { errors[errors.length] = 'You must enter a valid name'; }
  if ( !validPassword.test( document.form2.username.value )) { errors[errors.length] = 'You must enter a valid password!'; } 
  if ( errors.length > 0 ) { reportErrors( errors ); return false; 
    } 
  } 
} return true;  
} 

function reportErrors( errors ) 
{ var errorMessage = 'There where some problems...\n';
   for ( var x = 0; x < errors.length; x++ ) { var numberOfError = x + 1;
   errorMessage += '\n' + numberOfError + '. ' + errors[x]; } alert( errorMessage ); 
 } 
// DONE HIDING -->
</script>

<!-- Your Pattern -->
</head> 
<body> 
<table> 
<tr>
<td>Username</td>
<td>
<form name="form1" method="post" action="#">
<input type="text" name="username" id="username" /> 
</form>
</td>
</tr> 
<tr>
<td>Password</td> <td><form name="form2" method="post" action="#">
<input type="text" name="username" id="username" />
</form>
</td>
</tr>
</table> 
<form name="form3" method="post"> 
<input type="submit" name="Register" id="Register" value="Register" /> 
</form> 
</body> 
</html>

electron33 · Answer 3 · 2008-09-02T23:47:52+00:00

hi people,
I am weak in most computer aspects, i think because of my school.

I am creating this website and inside it there is a registration page. I used tables to create this page. So, text fields, radio buttons and check boxes belong to different forms.
I want to use javascript to make sure that the "username","password" and "confirm_password" fields don't stay blank. A user must fill the

How can i do this?

What I have done:

and on the submit button i put this;

<input type="submit" name="Register" id="Register" value="Register" onclick="alert()" />

Please help me.....

Hi.
What you must do is to get the elements from the webpage first of all

<script type="javascript">
function validateUser(){
     var username = "";
     var password = "";

     username = document.form.getElementByName("username");
     password = document.form.getElementByName("password");

    if(username == "" && password == ""){
       alert("Username required");
    }
    else{
          //do some stuff
    }
}
</script>
<html>
    <form name="form">
        <input type="textfield" name="username"/>
        <input type="password" name="password"/>
        <submit value="Send" onClick="validateUser()"/>
    </form>
</html>

I'm not sure if this is correct but it may help you a little on the way.