Search⌘ K
AI Features
Home
Courses
Building Front-End Web Applications with Plain JavaScript

Challenge Solution: Model Validations

Explore how to implement model validations in plain JavaScript to maintain data integrity. This lesson helps you understand checking constraints on data attributes, such as IDs, titles, and dates, and applying validation functions before setting values in your app's model.

We'll cover the following...

Solution

...
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Plain JS Validation App: Create</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="theme-color" content="#ffffff"/>

  <link rel="stylesheet" href="css/normalize.css"/>
  <link rel="stylesheet" href="css/main.css"/>

  <script src="src/v/createMovie.mjs" type="module"></script>
</head>
<body>
<header>
  <div class="wrapper clearfix">
    <div class="title">
      <h1>Create a new movie record</h1>
    </div>
    <nav>
      <ul>
        <li><a href="createMovie.html">C</a></li>
        <li><a href="retrieveAndListAllMovies.html">R</a></li>
        <li><a href="updateMovie.html">U</a></li>
        <li><a href="deleteMovie.html">D</a></li>
      </ul>
    </nav>
  </div>
</header>
<main>
  <div class="wrapper clearfix">
    <form id="Movie">
      <div><label>Movie ID: <input name="movieId" type="text"/></label></div>
      <div><label>Title: <input name="title" type="text"/></label></div>
      <div><label>Release date: <input name="releaseDate" type="date"/></label></div>
      <div>
        <button type="submit" name="commit">Save</button>
      </div>
    </form>
    <a href="index.html">Back to main menu</a>
  </div>
</main>
</body>
</html>
Solution
...