2015-12-09 59 views
0

我的工作我的第一個項目的節點,我嘗試使用jQuery驗證http://jqueryvalidation.org如何影響路由表單驗證

來驗證一個表單我有它工作的jsfiddle http://jsfiddle.net/o16u2fLq/,但在我的項目我的表單提交時未經驗證。我認爲這與我如何路由表單有關,但我不確定問題是什麼。

這裏是我的路線:

var express = require('express'); 
var router = express.Router(); 
var Greeting = require('../models/greetings'); 


router.get('/', function(req, res) { 
    Greeting.getGreetings(req).then(function (greetings) { 
    res.render('index', { greetings: greetings }); 
    res.redirect('/'); 
    }); 
}); 

router.post('/greeting', function(req, res){ 
    console.log(req.body); 
    Greeting.createGreeting(req, res); 
    res.redirect('/'); 
    Greeting.getGreetings(req).then(function (greetings) { 
     res.render('index', { greetings: greetings }); 
    }); 
}); 

module.exports = router; 

我已經試過玩弄的路線,但什麼也沒有工作。我如何在發佈提交之前驗證表單?

編輯:

HTML的要求

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="./bower_components/jquery-ui/themes/smoothness/jquery-ui.css"> 
    <link rel="stylesheet" href="./css/custom.css"> 
    </head> 
    <body> 
    <div class="container-fluid" style="padding-top:20px"> 
     <form action="/greeting" method="Post" enctype="application/x-www-form-urlencoded" class="form-horizontal col-lg-4" id="welcome"> 
     <div class="form-group"> 
      <label for="guest" class="col-lg-3 control-label">Guest Name: </label> 
      <div class="col-lg-9"> 
      <input type="text" class="form-control" id="guest" name="guest"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="message" class="col-lg-3 control-label">Message: </label> 
      <div class="col-lg-9"> 
      <textarea class="form-control" id="message" name="message" rows="3"></textarea> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="datepicker" class="col-lg-3 control-label">Date: </label> 
      <div class="col-lg-9"> 
      <input type="text" class="form-control" name="display_date" id="datepicker"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-lg-offset-3 col-lg-9"> 
      <button type="submit" class="btn btn-primary">Submit</button> 
      </div> 
     </div> 
     </form> 
     <div class="col-lg-offset-2 col-lg-5"> 
     <table class="table"> 
      <thead> 
      <th> 
       Guest 
      </th> 
      <th> 
       Message 
      </th> 
      </thead> 
      <tbody>   
      <% for(var i=0; i < greetings.length; i++) { %> 
       <tr> 
       <td><%= greetings[i].guest %></td> 
       <td><%= greetings[i].message %></td> 
       </tr> 
      <% } %> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    </body> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script src="./bower_components/jquery-ui/jquery-ui.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.js"></script> 
    <script src="./scripts/custom.js"></script> 
    <script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 
</html> 
+0

JS小提琴是偉大的,但你可以發佈你的HTML頁面? –

+0

哦,我要求看到HTML的原因是,我認爲你可能會在你的JS中出現錯誤,這意味着表單不管提交。 –

+0

@AdrianLynch我已更新該帖子以包含我的html。 – badger0053

回答

0

在我openion

  1. 創建validator.js文件
  2. 添加的所有驗證

的應用程序。 js fil首先你指向瓦爾代爾,之後去路由器文件夾