Javascript 在EJS中单击“提交”按钮时无法提交表单

Javascript 在EJS中单击“提交”按钮时无法提交表单,javascript,forms,node.js,express,ejs,Javascript,Forms,Node.js,Express,Ejs,大家好,我遇到了一个问题,我不明白为什么,这是非常奇怪的,或者我写的代码错误,所以我希望你们能指出错误或启发我 因此,我试图将表单提交到数据库,在提交表单之前,validate函数将验证数据,如果出现错误,它将通知用户 当我单击“提交”按钮时,表单无法提交,并且没有发生任何事情,终端没有错误,控制台没有错误,看起来您在表单内部单击了什么,而表单希望提交表单> 这是完整的代码 我觉得这里没什么问题 var express = require('express'), app =

大家好,我遇到了一个问题,我不明白为什么,这是非常奇怪的,或者我写的代码错误,所以我希望你们能指出错误或启发我

因此,我试图将表单提交到数据库,在提交表单之前,validate函数将验证数据,如果出现错误,它将通知用户

当我单击“提交”按钮时,表单无法提交,并且没有发生任何事情,终端没有错误,控制台没有错误,看起来您在表单内部单击了什么,而表单希望提交表单>

这是完整的代码

我觉得这里没什么问题

  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'));
    });

    });
routes/index.js

路由/session.js

register.ejs


我认为这可能是一个愚蠢的错误。我希望我的HTML标记LOL没有问题。我相信您需要一个空间,以便type='submit'类变成:type='submit'类。

好的,在短暂的调试会话之后:

取自Angular的

由于表单在客户端应用程序中的作用是 与经典的往返应用程序不同,它适合 浏览器不将表单提交转换为整页重新加载 它将数据发送到服务器。取而代之的是一些javascript逻辑 应触发以在 特定于应用程序的方式

因此,Angular会阻止默认操作表单提交 除非元素具有action属性,否则不能将其复制到服务器 指定的

因此,您似乎没有为表单提交提供适当的处理:-

因此,要么提供一个,要么将“action”属性添加到表单中——这将修复它

如果这对你有意义,请告诉我

register.ejs中的表单标记中缺少action属性

应该是这样的


您可以通过单击处理程序从按钮提交表单,方法是查找表单并调用表单对象的提交方法。这不是一个EJS的东西,更只是一个简单的HTML的东西。请看:Nono我正在解释当我点击按钮时的感受确保你有一个动作=/在你的表单中注册;我完全误读了你最初的帖子。Hector很可能是正确的,没有定义任何操作,表单就不会去任何地方。@Hector Correa我可以在没有操作的情况下提交表单=/register,当然是在出现问题之前谢谢你回答我的问题,但它仍然保持不变,但在出现此问题之前,它工作得非常好。即使没有操作属性,也请在之前定义
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' });
});


}
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]+@[\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);
        }
    }
}
<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>