UX Design and Development course

Forms

When creating a form, validation is HUGE! In this example, we are going to check and see of the checkbox is checked in the form prior to submission.

var checkForm = function() {
  if (document.myForm.theBox.checked) {
    alert('You Win!');
  } else {
    alert('Oops!');
  }
}

When creating a form, JS already creates the necessary form object(s) each form in a view is actually listed into an array

<form name="myForm">
  <label>username: </label>
  <input type="text" name="usersName" />

  <label>password: </label>
  <input type="password"  name="usersPassword" />

  <input type="checkbox" name="theBox"/>

  <input type="button" onClick="checkForm()" type="submit" value="Click me" />
</form>

Play with code

JS Bin