Lecture 10

Input Validation and classList Manipulation

Agenda

• Administrivia
  • Reminder: CP 2 due today (git add/commit/push then turn in!)
  • Sign up for the CP showcase! (CP1 showcase coming soon)
  • Start HW 2 early!
• Final thoughts on DOM manipulation
• Input validation
• Manipulating classLists

DOM tree

Examining objects

Set a breakpoint in the initialize() function and refresh the page.

Then toggle the this: window object open to discover its contents

Traversing and Manipulating the DOM

We already know how to get an element of the DOM using document.getElementById(), document.querySelector() and document.querySelectorAll()

We also know we can add things to the tree using appendChild(node) on a DOM element.

The DOM also has

• properties and methods for traversing the tree
• methods for removing nodes from the tree

Review: Creating New Nodes

// create a new <h2> node
let newHeading = document.createElement("h2");
// Add text to the node method 1
let newText = document.createTextNode("This is a new heading!")
newHeading.appendChild(newText);
// Add text to the node method 2
newHeading.innerText = "This is a newer heading!";
document.appendChild(newHeading);

JS

Traversing the DOM Tree Manually

Every node's DOM object has the following (read-only) properties:

Complete list of DOM node properties

Browser incompatibility information (IE6 sucks)

DOM Tree Traversal Example

<p id="foo">
  This is a paragraph of text with a
  <a href="page.html">link</a>.
</p>

Element vs. Text Nodes

<div>
  <p id="foo">
    This is a paragraph of text with a
    <a href="page.html">link</a>.
  </p>
</div>

HTML

Q: How many children does the div have? A: 3

• an element node representing the <p>
• two text nodes representing "\n\t" (before/after the paragraph)

Q: How many children does the paragraph have? A: 3 (text, a, text)

Q: The a tag? A: 1 (text)

More modifying the DOM Tree

let p = document.createElement("p");
p.innerText = "A result!";
document.getElementById("the-place").appendChild(p);

JS

Every DOM element object has these methods:

Removing DOM elements... a decision

What happens if we don't remove the skittles when we start a new game?

Two methods for removing elements

Method 1: get all of the DOM elements and remove them from the DOM

function clearJar() {
  let skittles = qsa(".skittle");
  for (let i = 0; i < skittles.length; i++) {
    skittles[i].remove();
  }
}

JS

function clearJar() {
  $("jar").innerHTML = "";
}

Note: in general innerHTML hacking is bad

Why not just code this way?

document.getElementById("add").innerHTML =  "<p>A result!</p>";

JS

Bad code quality (maintainability) on many levels

• Not modular: HTML code embedded within JS
• What if you have a complicated new node (with many subchildren) to add?
• Error-prone: must carefully distinguish " and '
• Can only add at beginning or end, not in middle of child list

// Substitutes all children
$("add").innerHTML =  "<p>A result!</p>";
// adds a node to the front of the list of children.
$("add").innerHTML  = "<p>A result!</p>" + $("result").innerHTML;
// adds a node to the end of the list of children
$("add").innerHTML += "<p>A result!</p>";

JS

One more: removing elements via the parent node

Let's add code to get rid of a skittle when we double click it...

What is the source element? A skittle (div)

What is the event we want to respond to? dblclick

What is the response? removeSkittle

What is the output/elements changed? the parent of the skittle (the jar)

//code added to addSkittle()
skittle.addEventListener("dblclick", removeSkittle);
...
// new function added (with JSDoc not seen here)
function removeSkittle() {
  this.parentNode.removeChild(this);
}

Yes, you can also use remove(this); instead of removing from the parent node.

Input Validation

A user interface is like a joke. If you have to explain it, it’s not that good.

Martin LeBlanc

Example

Can I, as a user, do anything "wrong" here?

But what about the guesses text box?

Solution 1: Add instructions (the user will likely not read)

Solution 2: Prevent the user from doing something they shouldn't

HTML Input Validation

You can add attributes to your <input> tags to help with validation

The Skittles code already has a attribute that restricts the input to a number

<input type="number">

HTML

We can limit the up and down arrows with min (and max if we choose)

<input type="number" min=0>

HTML

To insist that there is a value in the input field we can add required

<input type="number" required>

HTML

To prevent a user from being able to type in erroneous values, we can add a regular expression to the required attribute

<input type="number" required="\d+">

HTML

Aside: What's a Regular Expression? (briefly)

A Regular Expression is way to specify a pattern to match.

We do not go into depth on Regular expressions in this class but they are fun to learn!

Handy resources include:

• Rubular for checking Regular Expressions
• Regex Crossword
• Examples

Now modify the CSS to display the error

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

CSS

What fields on this site warrant what types of validation?

Other Input Validation

Other HTML5 input types that can prevent a user from entering in erroneous input are listed here and include: