Log in

View Full Version : Required field(s) validation -- Newbie Help


JackieW
05-14-2012, 09:42 PM
Script: Required field(s) validation
http://www.dynamicdrive.com/dynamicindex16/requiredcheck.htm


Unless you keep the radio button field at 'Sex' and the choices 'Male' and 'Female' the Radio Button validation doesn't work. Frustrating!

Does anyone know why this is? The author's homepage doesn't even mention this particular JavaScript.

Original Code


<script language="JavaScript">
<!--

/***********************************************
* Required field(s) validation v1.10- By NavSurf
* Visit NavSurf.com at http://navsurf.com
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("FirstName", "LastName", "Sex", "Age");
// Enter field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Sex", "Age");
// 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){
alert("Just between the two of us, form submitted!")
return false;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>


My code


<script type="text/javascript" language="JavaScript">
<!--
// Copyright information must stay intact
// FormCheck v1.10
// Copyright NavSurf.com 2002, all rights reserved
// Creative Solutions for JavaScript navigation menus, scrollers and web widgets
// Affordable Services in JavaScript consulting, customization and trouble-shooting
// Visit NavSurf.com at http://navsurf.com

function formCheck(formobj){
// name of mandatory fields
var fieldRequired = Array("FirstName", "LastName", "OrdersPlaced", "OrdersPaid");
// field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Orders Placed Agreement", "Orders Paid Agreement");
// 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){
if (obj.type == null){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
continue;
}

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 (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
vwphillips
05-15-2012, 08:35 AM
works for me


<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript" language="JavaScript">
<!--
// Copyright information must stay intact
// FormCheck v1.10
// Copyright NavSurf.com 2002, all rights reserved
// Creative Solutions for JavaScript navigation menus, scrollers and web widgets
// Affordable Services in JavaScript consulting, customization and trouble-shooting
// Visit NavSurf.com at http://navsurf.com

function formCheck(formobj){
// name of mandatory fields
var fieldRequired = Array("FirstName", "LastName", "OrdersPlaced", "OrdersPaid");
// field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Orders Placed Agreement", "Orders Paid Agreement");
// 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){
if (!obj.type){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
continue;
}

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 (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
<form name="formcheck" onsubmit="return formCheck(this);">
First Name: <input type=text name="FirstName" size="25"><br>
Last Name: <input type=text name="LastName" size="25"><br>
<input type="radio" name="OrdersPlaced" /> <input type="radio" name="OrdersPlaced" /> <br />
<input type="radio" name="OrdersPaid" /><input type="radio" name="OrdersPaid" /><br />
<input type=submit value="Submit Form">
</form>
</body>

</html>
JackieW
05-15-2012, 01:27 PM
Thank you for your help.

When I put your code in it works great, but I get two radio buttons and no button description.



<form name="formcheck" onsubmit="return formCheck(this);">
First Name: <input type=text name="FirstName" size="25"><br>
Last Name: <input type=text name="LastName" size="25"><br>
<input type="radio" name="OrdersPlaced" /> <input type="radio" name="OrdersPlaced" /> <br />
<input type="radio" name="OrdersPaid" /> <input type="radio" name="OrdersPaid" /><br />
<input type=submit value="Submit Form">
</form>


But when I change it to remove one of the radio buttons and put in a description, it breaks and only validates the First Name and Last Name again.



<form name="formcheck" onsubmit="return formCheck(this);">
First Name: <input type=text name="FirstName" size="25"><br>
Last Name: <input type=text name="LastName" size="25"><br>
<input type="radio" name="OrdersPlaced" /> Orders Placed <br />
<input type="radio" name="OrdersPaid" /> Orders Paid<br />
<input type=submit value="Submit Form">
</form>


I can't figure out what I'm doing wrong.
vwphillips
05-15-2012, 04:04 PM
the script assumes that there will be more than 1 radio button of the same name

see

<!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" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript" language="JavaScript">
<!--
// Copyright information must stay intact
// FormCheck v1.10
// Copyright NavSurf.com 2002, all rights reserved
// Creative Solutions for JavaScript navigation menus, scrollers and web widgets
// Affordable Services in JavaScript consulting, customization and trouble-shooting
// Visit NavSurf.com at http://navsurf.com

function formCheck(formobj){
// name of mandatory fields
var fieldRequired = Array("FirstName", "LastName", "OrdersPlaced", "OrdersPaid");
// field description to appear in the dialog box
var fieldDescription = Array("First Name", "Last Name", "Orders Placed Agreement", "Orders Paid Agreement");
// 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){
if (!obj.type){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
continue;
}

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 "checkbox":
case "radio":
if (!obj.checked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
}
}

if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
// -->
</script>
<form name="formcheck" onsubmit="return formCheck(this);">
First Name: <input type=text name="FirstName" size="25"><br>
Last Name: <input type=text name="LastName" size="25"><br>
<input type="radio" name="OrdersPlaced" /> <br />
<input type="radio" name="OrdersPaid" /><br />
<input type=submit value="Submit Form">
</form>
</body>

</html>