Form Validation
Accessing forms with JavaScript
The following is a way to reference a form object from <form id="someform">.
var form = document.getElementById("someform");
Submit event handler
Here's how to specify the handler function to perform when users click the submit button:
<form id="someform" onsubmit="return someHandler()">
The above someHandler() function should return true to pass the form to the server and false to cancel the form submission.
How to disable the radio button
Here is how to disable the radio button.
document.someform.radiogroup[i].disabled = true;
Disabled parameters don't go 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()">
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>
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.agree.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()">
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="agree" value="y" onchange="agree()" />
<input type="submit" id="submit" value="Submit" disabled="disabled" />
</form>
</body>
</html>
Things We Need To Know In HTML Form
- You can not dynamically add or delete radio button or checkbox options.
- The type attribute of the input element has three values:text, password, hidden.
- You can type multiple lines in the textarea.
- You can access values entered in input and textarea with their value attribute.
- In addition to click, you can use change, focus, and blur events to perform form validation. How to register each event handler is as follows.
- onchange="someHandler()"
- onfocus="someHandler()"
- onblur="someHandler()"
Decoupling JavaScript code and HTML design
Registering event handlers using the element's attributes increases coupling with HTML.
<form id="testForm" method="get" onsubmit="return check()">
You can loosen coupling by modifying send1.html as 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>
The above example registers all handlers when an onload event occurs. The onload event occurs when all elements of the HTML document (including images) are ready.
You can also make the JavaScript code into an external file to loosen coupling more. However, some of your co-workers may not like this approach in maintenance.
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>
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.agree.onchange = agree;
}
function agree() {
var form = document.getElementById("testForm");
var submit = document.getElementById("submit");
if (form.agree.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 terms and conditions
<input type="radio" name="agree" value="y"/>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Let's separate the JavaScript code from the example.