Form validation

Form validation ensures that the data going into your database from an HTML form or other source is valid.

Keeping your data clean protects your application from mischievous users and from your data breaking any process in your application.

Client and Server side

It is possible and appropriate to have both validation on the server side and the client side (browser). Server side will protect the data getting saved into the database and client side validation will help prompt the user that their form submission is incorrect before the form is submitted and allowing them to fix the issue.

MongooseJS Model Validation

MongooseJS Validation docs

Mongoose provides basic model validation that can be used when creating new documents. The validation is allows us to write custom functions to verify the data is correct before saving it into the MongoDB collection.

We implement server side in 3 different files,

• models/astronaut.js - custom validation function for any property, (name, birthdate, photo, etc.)
• routes/index.js - during the initial .save() callback, may contain validation errors, redisplay the create form.
• views/create_form.html - add values to form elements and add error messages.

Inside our models/astronaut.js model file let's create a custom validation function to ensure the name of the astronaut is at least 5 characters long.

models/astronaut.js

routes/index.js
During the create .save() function, check for errors and redisplay the form if needed.

views/create_form.html
Redisplay form with user input and field errors. Add in value= attributes and error messages.

Client side validation

Client side validation with JavaScript can be tricky but luckily there are prebuilt jQuery plugins to use.

jQuery Validation is a really good choice.

• Demo
• Download
• Documentation
• Github

What to install

• After downloading open the dist directory.
• Copy all the dist directory files to your app's /public/js folder.

• Open /views/layout.html, just above the closing BODY tag, add the SCRIPT for jQuery Validate.

  <script src="/js/jquery.validate.min.js"></script>
  <script>
      // when the page is loaded...
      jQuery(document).ready( function() {
          jQuery('form').validate(); // turn on validation for all forms
      });
  </script>
  

• Save layout.html

Update HTML forms

If a form field is required

<input type="text" name="first_name" id="first_name" class="required" required>

Or a require a valid email address

<input type="email" name="email" id="email" class="required email" required>

Error messages are automatically placed next to the appropriate fields and can be styled with CSS. jQuery Validation allows for custom validator functions, read the documentation for more information.

Assignment