2013-11-20 2 views
0

Привет, ребята, я столкнулся с проблемой, что я не понимаю, почему это очень странно, или, может быть, я неправильно написал код, поэтому, надеюсь, вы, ребята, можете указать на просветите меня.
не может отправить форму при нажатии кнопки отправки в EJS

так я пытался представить форму в свою базу данных и до отправки формы функции Validate будет проверять данные, если есть ошибка будет уведомлять пользователя

, когда я нажимаю кнопку отправки формы не может быть представлена ​​и ничего не произошло, нет ошибки в терминале, нет ошибки на консоли, ничего (это выглядит как вы нажмете на <button> внутри формы, в то время как форма ожидает <input type="submit"> представить форму>

вот полный код https://github.com/johnlim5847/form-test

App.js (я не думаю, что ничего плохого здесь)

var express = require('express'), 
     app = express(), 
     http = require('http'), 
     path = require('path'), 
     MongoClient = require('mongodb').MongoClient, 
     routes = require('./routes'), 
     passport = require('passport'); 
    MongoClient.connect('mongodb://localhost:27017/test', function(err, db) { 
     "use strict"; 
     if(err) throw err; 
    // all environments 
    app.set('port', process.env.PORT || 3000); 
    app.set('views', __dirname + '/public/views'); 
    app.set('view engine', 'ejs'); 
    app.use('/static', express.static(path.join(__dirname, 'public'))); 
    app.use(express.cookieParser()); 
    app.use(express.favicon()); 
    app.use(express.logger('dev')); 
    app.use(express.bodyParser()); 
    app.use(express.methodOverride()); 
    app.use(express.session({ secret: 'Super Duper Awesome Duck' })); 
    app.use(passport.initialize()); 
    app.use(passport.session()); 
    app.use(app.router); 
    // development only 
    if ('development' == app.get('env')) { 
     app.use(express.errorHandler()); 
    } 

    routes(app, db); 

    http.createServer(app).listen(app.get('port'), function(){ 
     console.log('Express server listening on port ' + app.get('port')); 
    }); 

    }); 

маршруты/index.js

var SessionHandler = require('./session'); 

module.exports = exports = function(app, db) { 
var sessionHandler = new SessionHandler(db); 
app.use(sessionHandler.isLoggedInMiddleware); 
// Signup form 
app.post('/register', sessionHandler.handleSignup); 

app.use(function (req,res) { 
res.status(404).render('error', { 
url: req.originalUrl 
    }); 
}); 

app.get('*',function(req, res){ 
    res.render('master', { title: 'form' }); 
}); 


} 

маршруты/session.js

var UsersDAO = require('../users').UsersDAO 
    , SessionsDAO = require('../sessions').SessionsDAO; 

/* The SessionHandler must be constructed with a connected db */ 
function SessionHandler (db) { 
    "use strict"; 

    var users = new UsersDAO(db); 
    var sessions = new SessionsDAO(db); 



    function validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors) { 
     "use strict"; 
     var USER_RE = /^[a-zA-Z0-9_-]{2,25}$/; 
     var PASS_RE = /^.{6,100}$/; 
     var EMAIL_RE = /^[\S][email protected][\S]+\.[\S]+$/; 

     errors['publicUsername_error'] = ""; 
     errors['password_error'] = ""; 
     errors['confirmPassword_error'] = ""; 
     errors['email_error'] = ""; 
     errors['confirmEmail_error'] = ""; 

     if (!USER_RE.test(publicUsername)) { 
      errors['publicUsername_error'] = "Try just letters and numbers, e.g: Ed, 69, Kelvin and etc"; 
      return false; 
     } 
     if (!PASS_RE.test(password)) { 
      errors['password_error'] = "Password must be at least 6 characters long"; 
      return false; 
     } 
     if (password != confirmPassword) { 
      errors['confirmPassword_error'] = "Password must match"; 
      return false; 
     } 
     if (!EMAIL_RE.test(email)) { 
       errors['email_error'] = "Invalid email address"; 
       return false; 
      } 
     if (email != confirmEmail) { 
      errors['confirmEmail_error'] = "Email must match"; 
      return false; 
     } 
     return true; 
    } 

    this.handleSignup = function(req, res, next) { 
     "use strict"; 

     var email = req.body.email, 
     confirmEmail = req.body.confirmEmail, 
     password = req.body.password, 
     confirmPassword = req.body.confirmPassword, 
     firstName = req.body.firstName, 
     lastName = req.body.lastName, 
     penName = req.body.penName, 
     publicUsername = req.body.publicUsername; 

     // set these up in case we have an error case 
     var errors = {'email': email,'publicUsername': publicUsername,'firstName': firstName,'lastName': lastName,'penName': penName} 
     if (validateSignup(publicUsername, password, confirmPassword, email, confirmEmail, errors)) { 
      users.addUser(email, password, firstName, lastName, penName, publicUsername, function(err, user) { 
       "use strict"; 

       if (err) { 
        // this was a duplicate 
        if (err.code == '11000') { 
         errors['email_error'] = "Email already in use. Please choose another"; 
         return res.render("register", errors); 
        } 
        // this was a different error 
        else { 
         return next(err); 
        } 
       } 

       sessions.startSession(user['_id'], function(err, session_id) { 
        "use strict"; 

        if (err) return next(err); 

        res.cookie('session', session_id); 
        return res.redirect('/'); 
       }); 
      }); 
     } else { 
      console.log("user did not validate"); 
      return res.render("register", errors); 
     } 
    } 
} 

register.ejs

<div class="pure-u-1 text-center"> 
<form method="post" class="pure-form pure-form-aligned"> 
    <fieldset> 
    <legend><h1 class="pure-splash-subhead midnightblue"><span class='lightblue'>Join</span> us today and start write things that <span class='maroon'>matter</span></h1> 
    </legend> 
     <p class="text-center red">{{email_error}}</p> 
     <div class="pure-control-group"> 
      <label for="email">Email Address</label> 
      <input required name="email" class="pure-u-1-3" type="email" placeholder="Email Address"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{confirmEmail_error}}</p> 
      <label for="confirmEmail">Confirm Email Address</label> 
      <input required name="confirmEmail" class="pure-u-1-3" type="email" placeholder="Confirm Email Address"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{password_error}}</p> 
      <label for="password">Password</label> 
      <input required name="password" class="pure-u-1-3" type="password" placeholder="Password"> 
     </div> 
     <div class="pure-control-group"> 
     <p class="text-center red">{{confirmPassword_error}}</p> 
      <label for="confirmPassword">Confirm Password</label> 
      <input required name="confirmPassword" class="pure-u-1-3" type="password" placeholder="Confirm Password"> 
     </div> 
     <br/> 
     <br/> 
     <div class="pure-control-group"> 
      <label for="firstName">First Name</label> 
      <input required name="firstName" class="pure-u-1-3" type="text" placeholder="Your first name"> 
     </div> 
     <div class="pure-control-group"> 
      <label for="lastName">Last Name</label> 
      <input required name="lastName" class="pure-u-1-3" type="text" placeholder="and your last name"> 
     </div> 
     <div class="pure-control-group"> 
      <label for="penName"><abbr title="A pen name, nom de plume, or literary double, is a pseudonym adopted by an author. The author's real name may be known to only the publisher, or may come to be common knowledge.">Nom de plume</abbr></label> 
      <input required name="penName" class="pure-u-1-3" type="text" placeholder="Pen Name eg:J.R.R. Tolkien"> 
     </div> 

     <div class="pure-control-group"> 
      <label for="publicUsername">Public Username</label> 
      <input required name="publicUsername" class="pure-u-1-3" type="text"> 
      <p class="text-center red">{{publicUsername_error}}</p> 
     </div> 

     <div class="pure-u-1 "> 
      <label for="conAndTerm" class="pure-checkbox"> 
       <input id="conAndTerm" type="checkbox"> I've read the <a class='link blue'href="#">terms and conditions</a> 
      </label> 
      <br/> 
      <input type='submit'class="pure-button pure-button-secondary pure-u-1-3" value="Register"> 
      <br/> 
     </div> 
    </fieldset> 
</form> 
</div> 

я думаю, что это может быть глупой ошибкой я надеюсь, что нет ничего плохого в моем HTML тег LOL

+1

Вы можете отправить форму с помощью кнопки через обработчик кликов, найдя форму и вызвав метод submit() объекта формы. Это не вещь EJS, а всего лишь вещь с прямым HTML. Смотрите: http://stackoverflow.com/questions/290215/difference-between-input-type-button-and-input-type-submit – chsh

+1

nonono Я объяснял, как это чувствует, когда я нажимаю на кнопку –

+1

Make убедитесь, что у вас есть действие = "/ register" в вашей форме. –

ответ

0

Я считаю, что вам нужно пространство, так что type='submit'class становится: type='submit' class.

+0

спасибо за ответ на мой вопрос, но он по-прежнему остается тем же –

0

нормально, поэтому после короткого сеанса отладки:

взяты из Угловое-х docs

Поскольку роль форм на стороне клиента угловых приложений иначе, чем в классических туда и обратно приложений, желательно браузер не переводить отправку формы в полную перезагрузку страницы , которая отправляет данные на сервер. Вместо этого должна быть активирована некоторая логика javascript для обработки заявки на получение формы в .

По этой причине Angular предотвращает действие по умолчанию (отправку формы на сервер), если только у элемента не указан атрибут действия .

так кажется, что вы не предоставили надлежащую обработку для отправки формы :-)

так или предоставить один или добавить «действие» атрибут в форме - что должен «исправить» его

дайте мне знать, если это имеет смысл для вас.

+0

, но он отлично работает до возникновения этой проблемы. Даже без атрибута действия –

+0

, пожалуйста, определите _ "before" _ –

Смежные вопросы