I'm trying to implement authentification system with express + node js. So far it's been good, but now I see that even when I refresh the page, the form submits to the server. This is how my code looks like:
Client side:
submit(e) {
let data = this.state; /// object with user's informations
e.preventDefault()
validate.form(this.state.username, this.state.email, this.state.password, this.state.confirm) // this returns true if everything is fine or returns the error string!
}
render() {
return (<div>
<form action="/login" onSubmit = {this.submit} method="post">
<p>Username:</p>
<input type="text" onChange = {this.getData} name="username" value = {this.state.username} />
<p>Email</p>
<input type="text" onChange={this.getData} name = "email" value = {this.state.email} />
<p>Password</p>
<input type="text" onChange={this.getData} name = "password" value = {this.state.password} />
<p>Confirm Password</p>
<input type="text" onChange={this.getData} name = "confirm" value = {this.state.confirm} />
<br/> <br/>
<input type="Submit" value='Submit' /> ///this is not working!
</form>
</div>)
}
Server side:
app.post('/login',(req, res) => {
console.log(req.body)
res.sendFile(__dirname + '/src/index.html')
db.query('INSERT INTO users SET ?', req.body, (err, res) => console.log("done!"))
})
TL;DR I'm looking to submit the form only if validate.form(username, email, password, confirm) returns true. I'm using bodyParser as module to parse the json!
Assuming that form.validate() is synchronous, you should call preventDefault only if form.validate() returns the error string.
submitForm(e) { // avoid to use 'submit' as method name
let data = this.state; /// object with user's informations
let formValid = validate.form(this.state.username, this.state.email, this.state.password, this.state.confirm);
if(formValid !== true) {
e.preventDefault()
}
// else, if formValid is true, the default behaviour will be executed.
}
Related
I have a view which contains a form and looks like this,
<form class="flex-form" id="form" method="">
<div class="form-component">
<label>Type</label>
<input type="text" id="type" name="type">
</div>
<div class="form-component">
<div class="form-component"><label><b>Contents</b></label></div>
<label>Savoury</label><input type="text" name="savoury" id="savoury">
<label>Fillings</label><input type="text" name="fillings" id="fillings">
<label>Amount</label><input type="text" name="amount" id="amount">
<div class="flex-component">
<button class="set-button" type="button" id="set">Set Item</button>
</div>
</div>
<div class="form-component">
<label class="description-label">Description</label>
<textarea class="fixed-textarea" id="description" name="description" cols="15" rows="10"></textarea>
</div>
<div class="form-component">
<label >Unit Price</label>
<input type="text" id="price" name="unit_price">
</div>
<div class="flex-component">
<button class="form-button" type="submit">Add</button>
</div>
</form>
I have a JavaScript that allows me to capture some intermediary information (via the Set Item button) from the form before the form gets submitted (via the Add Button). I want to handle the form's submission from the script since I need to capture the intermediary data.
let collectedItems = [];
let setter = document.getElementById('set');
let form = document.getElementById('form');
setter.addEventListener('click',getSetContent);
function getSetContent() {
let type = document.getElementById('savoury');
let fillings = document.getElementById('fillings');
let amount = document.getElementById('amount');
const content = {
type: type.value,
fillings: fillings.value.split(','),
amount: Number(amount.value)
};
collectedItems.push(content);
clearInputFields([type,fillings,amount]);
}
function clearInputFields(inputFields) {
inputFields.forEach(field => {
field.value = ''
});
console.log(collectedItems);
}
form.addEventListener('submit',submitForm);
function submitForm() {
const type = document.getElementById('type').value;
const desc = document.getElementById('description').value;
const price = Number(document.getElementById('price').value);
const content = collectedItems;
const data = {
type: type,
contents: content,
description: desc,
unit_price: price
};
post('http://localhost:8001/add/box',
{ 'Content-Type': 'application/json' },
JSON.stringify(data)
);
}
function post(endpoint,header,body) {
const response = fetch(endpoint,{ method: 'POST',headers: header,body: body });
response.then(
resp => {
if (resp.ok) {
console.log('form submitted');
} else {
console.log('form not submitted');
}
}
)
}
I then make a POST request using fetch() to an endpoint I have setup in Express which looks like this,
app.post('/add/box',(req,res) => {
const box: any = req.body;
console.log(box);
// DO SOME DB STUFF
res.redirect('/');
});
The form submission works as intended (logs to terminal using nodemon), however I am unable to redirect to the homepage. Instead I stay on the form page after the submission has occurred and I can't figure out why. Any help with this issue is much appreciated.
I already created my model 'order'
I try to add new order into my mongodb, but keep showing this error,please help me! Thanks
I rely on the add_order.ejs to submit the form.
"ReferenceError: Cannot access 'order' before initialization"
I have the other two model 'recipe' and 'customer',but they worked! I don't understand why only
order has error?
order.js
const userSchema = new mongoose.Schema({
order_id :{
type: String,required : true
},
sum :{
type:Number,
required : true,
},
account :{
type :String,
required : true,
}
});
module.exports = mongoose.model('order',userSchema);
routes.js
const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
const customer = require('../models/customer');
const recipe = require('../models/recipe');
const multer = require('multer');
const { GridFSBucketReadStream } = require('mongodb');
const fs = require('fs');
const order = require('../models/order');
//insert an order into database route
router.post('/add_order', upload, (req,res) => {
const order = new order({
order_id : req.body.order_id,
sum : req.body.sum,
account : req.body.account,
});
order.save((err) => {
if(err){
res.json({message : err.message, type :'danger'});
}
else{
req.session.message={
type:'success',
message :'Customer added successfully!'
};
res.redirect("/");
}
})
})
add_order.ejs
<form action="/add_order" method="POST" id="add-form" enctype="multipart/form-data">
<div class="one_third first">
<label for="name">order_id <span>*</span></label>
<input type="text" name="order_id" placeholder="Enter order_id" size="22" required /></td>
</div>
<div class="one_third">
<label for="email">sum <span>*</span></label>
<input type="number" name="sum" placeholder="Enter sum" size="22" required>
</div>
<div class="one_third">
<label for="url">account <span>*</span></label>
<input type="text" name="account" placeholder="Enter account" size="22" required />
</div>
<input type="submit" name="submit" value="Add order" />
<input type="reset" name="reset" value="Reset Form">
</form>
You have a problem on this:
const order = require('../models/order');
//insert an order into database route
router.post('/add_order', upload, (req,res) => {
const order = new order**({ // <- you trying to change an immutable class definition
Class variable and instance variable needs to have different names.
Recommend you to change your class name to Order (with capital O):
const Order = require('../models/order');
then call your instance like this:
const order = new Order({ ... });
See more
I'm having trouble sending data to the server using a form. I already made a register form that works just fine, and for the most part my client side javascript for the login form is very similar to the javascript for the register form, and I just can't figure out why it won't work. It just gives me "Cannot POST /login.html"
Here's the login form html:
<div class="loginTitle">
<h1>Login</h1>
</div>
<div class="loginFormLayout">
<form method=post id="loginForm">
<div class="loginFormText">
<label for="username">Username</label>
</div>
<div class="loginFormEntry">
<input type="text" placeholder="Enter Username" name="loginUsername" required>
</div>
<div class="loginFormText">
<label for="password">Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Enter Password" name=loginPassword required>
</div>
<button type="submit" class="loginButton">Log In</button>
</form>
</div>
And here's the client side javascript:
//Login as an existing user
const login = document.getElementsByClassName('loginButton');
const loginForm = document.getElementById('loginForm');
const loginURL = 'http://localhost:3000/loginUser';
loginForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(loginForm);
let username = formData.get('loginUsername');
let password = formData.get('loginPassword');
loginForm.reset();
let user = { //Create a user object that will be sent to the backend and compared to the user database
username,
password
};
fetch(loginURL, { //Send the user object to the backend in JSON format to be checked against the database
method: 'POST',
body: JSON.stringify(user),
headers: {
'content-type': 'application/json'
}
})});
And the server side javascript for now, console logs are just to see if the info is getting up to the server
app.post('/loginUser', (req, res) => {
console.log(req.body.username);
console.log(req.body.password);
});
EDIT: I've also decided to post the info for my register form, which DOES work and uses similar logic to the login form. Maybe I'm missing something that isn't in the login logic
Register form html:
<div class="loginMenu">
<div class="loginTitle">
<h1>Register</h1>
</div>
<div id="registerWarning"></div>
<div class="loginFormLayout">
<form method="post" id="registerForm">
<div class="loginFormText">
<label for="username" id="newUsername">Username</label>
</div>
<div class="loginFormEntry">
<input type="text" placeholder="Create Username" name="username" required>
</div>
<div class="loginFormText">
<label for="password" id="newPassword">Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Create Password" name=password required>
</div>
<div class="loginFormText">
<label for="confirmPassword">Confirm Password</label>
</div>
<div class="loginFormEntry">
<input type="password" placeholder="Confirm Password" name="confirmPassword" required>
</div>
<button type="submit" class="registerButton">Register</button>
</form>
</div>
</div>
Register form client side javascript:
//Register a new user
const register = document.getElementsByClassName('registerButton');
const registerForm = document.getElementById('registerForm');
const registerURL = 'http://localhost:3000/createNewUser';
//When the user presses the register button, get the info from the form
registerForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(registerForm);
let newUsername = formData.get('username');
let newPassword = formData.get('password');
let confirmPassword = formData.get('confirmPassword')
registerForm.reset();
//Make sure new password and confirm password are equal
if (newPassword == confirmPassword) {
if (newUsername != "" && newPassword != ""){ //Make sure user enters something for both fields
let newUser = { //Create an object to send to the back end
newUsername,
newPassword
};
fetch(registerURL, { //Send the newUser object to the backend in JSON format to be added to the database
method: 'POST',
body: JSON.stringify(newUser),
headers: {
'content-type': 'application/json'
}
});
}
}
else { //If newPassword and confirmPassword are not equal, ask the user to enter them correctly
const registerWarning = document.getElementById('registerWarning');
registerWarning.innerText = 'Password and Confirm Password do not match';
registerWarning.style.padding = "10px";
registerWarning.style.background = 'red';
};
});
Register form server-side javascript:
app.post('/createNewUser', (req, res) => {
let newUsername = req.body.newUsername;
let newPassword = req.body.newPassword;
let newUserData = 'INSERT INTO users (username, password) VALUES (?, ?)';//Use the question marks as placeholders
//Use bcrypt to hash the password before putting it in the database
bcrypt.hash(newPassword, saltRounds, function(err, hash) {
db.query(newUserData, [newUsername, hash], function(err, result) {
if (err) throw err;
console.log('New user registered');
});
});
});
I figured it out, thanks to #Rocky Sims for the help.
Basically, the register form doesn't exist on the login html page, which was throwing an error up about how that doesn't exist before it could even get to the login code. So I just had to make seperate register.js and login.js files, as the issue was due to them being in the same file.
Try wrapping your form method (post) in quotes ('') like so <form method='post' id="loginForm">
Also the value for the name attribute for your password input should by in quotes. Like so <input type="password" placeholder="Enter Password" name='password' required>
I think the problem is that you haven't told the server what to send back to the client when the POST /loginUser endpoint gets called. Try adding res.sendStatus(200); at the end of your POST /loginUser handler function (so right after console.log(req.body.password);).
I am trying to do a Post request to my NodeJs server using PostMan and the terminal, but it seems the request never ends.
I have a website and a form, and I try to send the form by using Ajax. I do the same thing in other file except the fact that the other file does not contain a form and the post works.
This is my html form:
<div class="team">
<img class="teamInfo" src="images/leaderboard.png">
<p class= "createT"> Create a Team </p>
<p class= "chooseC"> Choose a Charity </p>
<p class= "enter"> Enter Team Member's Email</p>
<p class= "upload">Upload your Company<br>or Team's Logo</p>
<!-- added action tag solved the 405 error : "post method not allowed"-->
<form id="create_team_form" action="/" method="post">
<input class="teamName" type="text" id="teamName" name="teamName" size="25" maxlength="60" value="Team Name">
<input class="companyName" type="text" id="companyName" name="companyName" size="25" maxlength= "60" value="Company Name">
<input class="teamDescription" type="text" id="teamDescription" name="teamDescription" size="25" maxlength= "60" value="Team Description">
<input class= "email" type="text" id="email" name="email" size="25" maxlength= "60" value="emails">
<input class="searchCharity" type="text" id="charityName" name="charityID" size ="25" maxlength="60">
<p class="click"> Click the charity's name to select who your team will run for!</p>
<input class="greenButton" type="button" onclick="createTeam();" value="Create My Team!">
</form>
<img class="img-box" src="images/imgBox.png" alt=""/>
</div>
This is my javascript ajax to send the form to the server:
function createTeam(){
var teamN= document.getElementById("teamName").value;
var companyName =document.getElementById("companyName").value; //maybe not, tae it off.
var charityName = document.getElementById("charityName").value;
if((teamN.trim() === "") || (companyName.trim() === "") || (charityName.trim() === ""))
{
alert("You did not fill the team Name or companyName, Please enter with a name");
}else{
var sessionID = $.cookie("sessionID")
$.ajax({
type: "POST",
url: "http://xxx.xxxx.xxx.x:9000/team/?sessionID="+sessionID,
data: $("#create_team_form").serialize(),
success: function(msg) {
alert("team supposedly saved")
$.cookie("teamID",msg.teamID)
$.cookie("sessionID",sessionID)
//window.location.href='teamCreated.html'
}
});
}
}
It goes inside the if, but the else is just slow. I don't know if the data is being sent. I could not save a document so far in my mongodb.
This is my team.js in the server:
var express = require('express');
var sha1 = require('sha1');
var router = express.Router();
var sessionOBJ = require('./session');
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
router.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT, GET,POST");
});
var teamSchema = new Schema({
teamID: String,
teamName: String,
teamDescription: String,
teamAdminID: String,
teamLink: String,
charityID: String
});
var teamModel = mongoose.model('teams',teamSchema);
router.post('/', function (req, res){
log.d("Entrou no method post");
var sessionID = req.query.sessionID
var team = req.body;
var teamName = team.teamName;
var teamDescription = team.teamDescription;
var charityID = team.charityID;
var teamLink = team.teamLink;
sessionOBJ.isAuthorized(sessionID, function(sessionID){
log.d("Checking session to save team", sessionID);
var adminID = sessionID.userID;
var newTeam = new teamModel({
teamName: teamName,
teamDescription: teamDescription,
teamAdminID: adminID,
teamLink: teamLink,
charityID: charityID
});
newTeam.save(function(err, team){
if(err) return console.error(err);
res.send({"status" : "Created", "teamID" : team._id, "teamAdminID":team.teamAdminID });
log.d("Created Team ID", team._id)
log.d("XXXXXXX XXXXXX XXXXXXX Team Saved inside save method",team);
});
});
})
}
Does someone can see what I am doing wrong?
Thanks in advance.
After res.send() call res.end(). response.end tells the server that the entire message has been sent and can close the connection, otherwise, it'll wait for more data.
source:
https://nodejs.org/api/http.html#http_response_end_data_encoding_callback
Hi guys i ran into a problem that i don't understand why, it is very strange or maybe i write the code wrongly so i hope you guys can point out the mistake or enlighten me .
so i was trying to submit a form to my database and before submit the form the validate function will validate the data, if there's an error it will notify the user
when i click submit button the form cannot be submitted and nothing happened, no error in terminal , no error on console , nothing ( it looks like you click on <button> inside a form, while the form is expecting <input type="submit"> to submit the form>
here's the full code https://github.com/johnlim5847/form-test
App.js ( i think nothing wrong in here)
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
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' });
});
}
routes/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]+#[\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>
i think it might be a silly mistake i hope there's nothing wrong with my HTML tag LOL
ok, so after short debugging session:
taken from Angular's docs
Since the role of forms in client-side Angular applications is
different than in classical roundtrip apps, it is desirable for the
browser not to translate the form submission into a full page reload
that sends the data to the server. Instead some javascript logic
should be triggered to handle the form submission in an
application-specific way.
For this reason, Angular prevents the default action (form submission
to the server) unless the element has an action attribute
specified.
so it seems like you did not provide proper handling for form submit :-)
so either provide one or add the 'action' attribute to the form - that should "fix" it
let me know if that makes sense to you.
You're missing the action attribute inside your form tag in register.ejs
It should be as following
<form method="post" action="/user/register" class="pure-form pure-form-aligned">
Now upon hitting "submit" a POST request will be generated and server shall look for a post type of route mentioned in action.
Another thing that's wrong with your code is ... you need to declare SessionHandler function using "exports" keyword as mentioned below.
exports.SessionHandler = async (req, res, next) => {
// Session handler with arrow function
}
OR
exports.SessionHandler = async function (req, res, next) {
// Session handler without arrow function
}
I believe you need a space so that type='submit'class becomes: type='submit' class.