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>

Run example

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>

Run example

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>

Run example

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>

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.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>

Run example

Let's separate the JavaScript code from the example.

Run example