Require Two Form Fields To Be The Same

[HokieTracks]

Hi, I currently have an html form for my user registration that uses Java Script to check that all required fields are filled in. But, now I want to add a confirm password field. Is there a way to use Java Script to check that both fields are the same?

 

Here is my current code:

 

<script language="JavaScript">
<!--
var RecaptchaOptions = {
theme: 'clean'
};

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("loginName", "password", "firstName", "lastName", "email");
// Enter field description to appear in the dialog box
var fieldDescription = Array("User Name", "Password", "First Name", "Last Name", "Email");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];
	if (obj){
		switch(obj.type){
		case "select-one":
			if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "select-multiple":
			if (obj.selectedIndex == -1){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "text":
		case "textarea":
			if (obj.value == "" || obj.value == null){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		default:
		}
		if (obj.type == undefined){
			var blnchecked = false;
			for (var j = 0; j < obj.length; j++){
				if (obj[j].checked){
					blnchecked = true;
				}
			}
			if (!blnchecked){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
		}
	}
}

if (alertMsg.length == l_Msg){
	return true;
}else{
	alert(alertMsg);
	return false;
}
}
// -->
</script>

<form action="insert.php" method="post" form name="formcheck" onsubmit="return formCheck(this);">
Username*: <input type="text" name="loginName" /><br><br>
Password*: <input type="password" name="password" /><br><br>
Firstname*: <input type="text" name="firstName" /><br><br>
Lastname*: <input type="text" name="lastName" /><br><br>
Age: <input type="number" name="age" /><br><br>
Email*: <input type="text" name="email" /><br><br>
Gender: <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female<br><br>
Location: <input type="text" name="location" /><br><br>

<?php
require_once('recaptchalib.php');
$publickey = "*******************************";
echo recaptcha_get_html($publickey);
?>
<br>
By clicking register you agree to our <a href="">Terms of Use</a>

<br><br>
<input type="submit" value="Register">
</form>

[Axeia]

Compare the .value of the two fields with ==

Not telling any more till you at least give it a try and actually add a second password field.

[HokieTracks]

Well I must admit that I am completely new to java script so any extra help would be appreciated. And sorry I posted my old code which didnt have the second field.

 

<?php
session_start();
if (@$_SESSION['auth'] != "yes")
{}

else	{
header('Location: index.php');
}
?>

<script language="JavaScript">
<!--
var RecaptchaOptions = {
theme: 'clean'
};

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("loginName", "password", "confrim", "firstName", "lastName", "email");
// Enter field description to appear in the dialog box
var fieldDescription = Array("User Name", "Password", "Password Confirm", "First Name", "Last Name", "Email");
// dialog message
var alertMsg = "Please complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
	var obj = formobj.elements[fieldRequired[i]];
	if (obj){
		switch(obj.type){
		case "select-one":
			if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "select-multiple":
			if (obj.selectedIndex == -1){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		case "text":
		case "textarea":
			if (obj.value == "" || obj.value == null){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
			break;
		default:
		}
		if (obj.type == undefined){
			var blnchecked = false;
			for (var j = 0; j < obj.length; j++){
				if (obj[j].checked){
					blnchecked = true;
				}
			}
			if (!blnchecked){
				alertMsg += " - " + fieldDescription[i] + "\n";
			}
		}
	}
}

if (alertMsg.length == l_Msg){
	return true;
}else{
	alert(alertMsg);
	return false;
}
}
// -->
</script>

<form action="insert.php" method="post" form name="formcheck" onsubmit="return formCheck(this);">
Username*: <input type="text" name="loginName" /><br><br>
Password*: <input type="password" name="password" /><br><br>
Password Confirm*: <input type="password" name="confirm" /><br><br>
Firstname*: <input type="text" name="firstName" /><br><br>
Lastname*: <input type="text" name="lastName" /><br><br>
Age: <input type="number" name="age" /><br><br>
Email*: <input type="text" name="email" /><br><br>
Gender: <input type="radio" name="gender" value="male" /> Male <input type="radio" name="gender" value="female" /> Female<br><br>
Location: <input type="text" name="location" /><br><br>

<?php
require_once('recaptchalib.php');
$publickey = "6Lfm1gUAAAAAAP__-TmBn42nN_Uirtnj9lngoNoi";
echo recaptcha_get_html($publickey);
?>
<br>
By clicking register you agree to our <a href="">Terms of Use</a>

<br><br>
<input type="submit" value="Register">
</form>

[Axeia]

var pass    = document.getElementsByName( 'password' )
var passChk = document.getElementsByName( 'confirm' )


//If the passwords not matching is the only error.
if( alertMsg.length == 1_Msg && pass[0].value != passChk[0].value ) 
{
    alertMsg += 'Passwords do not match.';
}
else if( pass[0].value != passChk[0].value ) //There are more errors than password not matching
{
    alertMsg += "Additionally: \n The passwords did not match.";
}

Try adding this bit between the last if/else statement and the for loop.

Should work (Unless the original alertMsg and my elseif are the same length )

 

PS: You made a typo in your fieldRequired array. confrim