Form Validation

Accessing forms with JavaScript

The following is a way to get a reference to a form(<form id="someform">).

var form = document.getElementsTagName("form")[0];
var form = document.getElementById("someform");

Submit event handler

Here's how to specify the handler function to perform when the submit button is clicked:

<form id="someform" onsubmit="return someHandler() ">

The someHandler() function should return true to pass the form through validation, false to cancel the form submission because it fails validation.

How to disable the radio button

Here is how to disable the radio button.

document.someform.radiogroup[i].disabled = true;

Disabled parameters are not sent to the server.

send1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Test</title>
<script type="text/javascript">
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get" onsubmit="return check()">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="Submit" />
</form>
</body>
</html>

Run example
Enter the name, select W, and click the Summit button to confirm the parameters and values to be transmitted.
Select a value other than W and click the Summit button to confirm the parameters and values to be transmitted.

Event handler that executes when radio button or checkbox is selected

send2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Test</title>
<script type="text/javascript">
function agree() {
	var form = document.getElementById("testForm");
	var submit = document.getElementById("submit");
	if (form.agreement.checked == true) {
		submit.disabled = false;	
	} else {
		submit.disabled = true;
	}
	
}
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	var chk = form.confirm[0].value

	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get" onsubmit="return check()">
	이름 <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" /><br />
	I agree to the information provided.
	<input type="radio" name="agreement" value="y" onchange="agree()" />
	<input type="submit" id="submit" value="확인" disabled="disabled" />
</form>
</body>
</html>

Run example
After entering the name, click the Summit button to confirm the transmitted parameters and values.

Etc

  • You can not dynamically add or delete radio button or checkbox options.
  • The type attribute of the input element is text, password, hidden.
  • The textarea is used to enter multiple lines.
  • Values entered by the user in input and textarea can be accessed with the value attribute.
  • In addition to click, you can perform form validation using change, focus, and blur events.
  • How to register each event handler is as follows.
    • onclick="someHandler()"
    • onchange="someHandler()"
    • onfocus="someHandler()"
    • onblur="someHandler()"

Separation of JavaScript code and HTML design

If you register the event handler using the onclick attribute of the element as in the following, the degree of coupling with the HTML design becomes high.
<form id="testForm" method="get" onsubmit="return check()">
You can lower the degree of coupling by modifying send1.html as shown below.

send1-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Test</title>
<script type="text/javascript">
window.onload = initPage;

function initPage() {
	var form = document.getElementById("testForm");
	form.onsubmit = check;
}

function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get">
	Name <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="Submit" />
</form>
</body>
</html>

Run example

You can make the JavaScript code into an external file as follows.

send1.js
window.onload = initPage;

function initPage() {
	var form = document.getElementById("testForm");
	form.onsubmit = check;
}

function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
send1-2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Test</title>
<script type="text/javascript" src="send1.js"></script>
</head>
<body>
<form id="testForm" method="get">
	Name <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" />
	<input type="submit" value="Submit" />
</form>
</body>
</html>

Run example

send2-1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript Test</title>
<script type="text/javascript">
window.onload = initPage;

function initPage() {
	var submit = document.getElementById("submit");
	submit.disabled = true;
	var form = document.getElementById("testForm");
	form.onsubmit = check;
	form.agreement.onchange = agree;
}

function agree() {
	var form = document.getElementById("testForm");
	var submit = document.getElementById("submit");
	if (form.agreement.checked == true) {
		submit.disabled = false;	
	} else {
		submit.disabled = true;
	}
}
function check() {
	var form = document.getElementById("testForm");
	form.condition[4].disabled = true;
	return true;
}
</script>
</head>
<body>
<form id="testForm" method="get">
	Name <input type="text" name="name" /><br />
	B<input type="radio" name="condition" value="best" />
	G<input type="radio" name="condition" value="good" />
	N<input type="radio" name="condition" value="normal" />
	B<input type="radio" name="condition" value="bad" />
	W<input type="radio" name="condition" value="worst" /><br />
	I agree to the information provided.
	<input type="radio" name="agreement" value="y"/>
	<input type="submit" id="submit" value="확인" />
</form>
</body>
</html>

Run example
Separating the JavaScript code from the above example makes better code.
Run example