Simple form validation: but can it include a checkbox valid?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Simple form validation: but can it include a checkbox valid?

Post by simonmlewis »

I need this to check that a checkbox has also been checked.
Because it already has a value, it's not straight forward. But can it be added to this code to make it work?
It's a simple "I have read the terms" type form.

Code: Select all

function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("firstname", "lastname", "telephone", "email", "address1", "town", "postcode", "terms");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("Firstname","Lastname","Telephone Number","Email Address","Address","Town","Postcode", "Terms and Conditions");
	// dialog message
	var alertMsg = "Please complete these fields to complete your registration:\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;
	}
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Simple form validation: but can it include a checkbox va

Post by Celauran »

You know the type is going to be checkbox, you know you need to check if it has been checked, what have you tried so far?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Simple form validation: but can it include a checkbox va

Post by simonmlewis »

Here is the code that I tried... but it didn't disable the button.

Code: Select all

  <script language="JavaScript">
window.onload=function(){
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendme');
checker.onchange = function(){
	if(this.checked){
		sendbtn.disabled = false;
	} else {
		sendbtn.disabled = true;
	}
	
}
}


function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("firstname", "lastname", "telephone", "email", "address1", "town", "postcode", "terms");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("Firstname","Lastname","Telephone Number","Email Address","Address","Town","Postcode", "Terms and Conditions");
	// dialog message
	var alertMsg = "Please complete these fields to complete your registration:\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 method='post' action='/register' onSubmit=\"return formCheck(this)\">
<input type='checkbox' value='yes' id='checkme'> I accept the terms and conditions - <a href='/terms' target='_new'>click here to view in new tab</a>.<br/><br/>
<span class='validation'>*</span> These fields must be completed<br/><br/>
<input type='submit' value='Next > >'  id='sendme' name='sendme'>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Simple form validation: but can it include a checkbox va

Post by simonmlewis »

Done this:

Code: Select all

function unlock()
{
document.getElementById("send").disabled = false;
}
<input type='checkbox' value='yes' id='checkme' onClick=\"unlock();\"> I accept the terms and conditions
If they want to tick and untick, sod it. But at least it does the job.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply