add more complex client-side validation #74

database/mongo.js

@@ -1,5 +1,4 @@
 const MongoClient = require('mongodb').MongoClient;
-require('env2')('./config.env');
 
 MongoClient.connect(process.env.DATABASE_URL, (err, db) => {
   if (err) return console.log(err);

public/scripts/index.js

@@ -8,8 +8,9 @@ var indexModule = (function() {
     }
     xhr.open(method, url);
 
-    if (method === 'POST' || method === 'PUT') {
-      xhr.send(data);
+    if (method === 'POST') {
+      xhr.setRequestHeader('Content-Type', 'application/json');
+      xhr.send(JSON.stringify(data));
     } else {
       xhr.send();
     }

public/scripts/register.js

@@ -6,36 +6,38 @@
       name: e.target.elements.name.value,
       email: e.target.elements.email.value,
       password: e.target.elements.password.value,
-      confirm: e.target.elements.confirm.value
+      confirmation: e.target.elements.confirm.value
     }
 
-    function validate(data) {
-      // check inputs aren't empty
-      for (var key in data) {
-        if (!data[key].trim()) {
-          indexModule.showMessage('Missing information: ' + key);
-          return false;
-        }
-      }
-
-      // check email contains @
-      if (!/@/.test(data.email) || data.email[data.email.length - 1] === '@') {
-        indexModule.showMessage('Email address is invalid');
-        return false;
-      }
+    // send data to server if it passes validation
+    if (validate(data)) {
+      indexModule.makeRequest('/add-user', 'POST', data, function(err) {
+        if (err) return console.log(err);
+      });
+    }
+  });
 
-      // check both passwords match
-      if (data.password !== data.confirm) {
-        indexModule.showMessage('Passwords don\'t match');
+  function validate(data) {
+    // check inputs aren't empty
+    for (var key in data) {
+      if (!data[key].trim()) {
+        indexModule.showMessage('Missing information: ' + key);
         return false;
       }
+    }
 
-      return true;
+    // check email contains @
+    if (!/@/.test(data.email) || data.email[0] === '@' || data.email[data.email.length - 1] === '@') {
+      indexModule.showMessage('Email address is invalid');
+      return false;
     }
 
-    // send data to server if it passes validation
-    if (validate(data)) {
-      console.log('Form validated, sending to server.');
+    // check both passwords match
+    if (data.password !== data.confirmation) {
+      indexModule.showMessage('Passwords don\'t match');
+      return false;
     }
-  });
+
+    return true;
+  }
 })();

public/style/sass/_form.scss

@@ -48,3 +48,7 @@
     }
   }
 }
+
+.input-focus {
+  border-color: $main !important;
+}

src/routes/add_user.js

@@ -1,22 +1,16 @@
 const MongoClient = require('mongodb').MongoClient;
-require('env2')('./config.env');
 
-module.exports = (req, res) => {
+module.exports = (req) => {
   MongoClient.connect(process.env.DATABASE_URL, (err, db) => {
     if (err) return console.log(err);
 
     return db.collection('users').insertOne({
       name: req.body.name,
       email: req.body.email,
       password: req.body.password
-    }, (error, result) => {
+    }, (error) => {
       if (error) return console.log(error);
-      console.log(result);
       return db.close();
     });
   });
-
-  res.render('register', {
-    title: 'Register'
-  });
 };

src/server.js

@@ -14,7 +14,8 @@ app.engine('hbs', hbs({
 
 app.set('view engine', 'hbs');
 
-app.use(bodyParser.urlencoded({ extended: false })); // required to process post data
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(bodyParser.json());
 app.use(express.static('public'));
 app.use(router);
 

src/start.js

@@ -1,4 +1,5 @@
 const app = require('./server.js');
+require('env2')('./config.env');
 
 app.listen(3000, () => {
   console.log('Server running at 3000');

views/register.hbs

@@ -1,22 +1,22 @@
 {{>header}}
 
 <div class="page-content">
-  <form class="registration-form" id="register-form">
+  <form class="registration-form" id="register-form" autocomplete="off">
     <div class="form-input-wrap">
       <label>Name
-        <input type="text" name="name" autocomplete="off">
+        <input type="text" name="name">
       </label>
 
       <label>Email Address
-        <input type="text" name="email" autocomplete="off">
+        <input type="text" name="email">
       </label>
 
       <label>Password
-        <input type="password" name="password" autocomplete="off">
+        <input type="password" name="password">
       </label>
 
       <label>Confirm Password
-        <input type="password" name="confirm" autocomplete="off">
+        <input type="password" name="confirm">
       </label>
     </div>
     <input id="submit" type="submit" value="SUBMIT">