It's meant to be a basic web form but I am having issues with it. I have spent hours working on it but can't seem to find the problem.
I am getting the error message Cannot destructure property 'email' of 'req.body' as it is undefined. The full source code can be found here: https://github.com/SophalLee/project_06_sophal_lee. Here are snippets of my code:
index.js
app.post('/login', (req, res) => {
const { email, password } = req.body;
console.log(email);
})
login-form.js
import { checkName, numbersAndSpaceCheck, emailCheck } from '/js/validation.js';
const loginForm = document.getElementById('login');
const email = document.getElementById('email');
const password = document.getElementById('password');
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
if(checkInputs()) {
loginForm.submit();
}
});
/* Validate input from form */
function checkInputs() {
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
let emailSuccess = false;
let passwordSuccess = false;
if(emailValue === '') {
setErrorFor(email, "Email cannot be blank");
emailSuccess = false;
}
else if(!emailCheck(emailValue)) {
setErrorFor(email, "Invalid email");
emailSuccess = false;
}
else {
setSuccessFor(email);
emailSuccess = true;
}
if(passwordValue === '') {
setErrorFor(password, "Password cannot be blank");
passwordSuccess = false;
}
else {
setSuccessFor(password);
passwordSuccess = true;
}
return (emailSuccess & passwordSuccess);
}
/* Display error message and error icon */
export function setErrorFor(input, message) {
const formControl = input.parentElement;
const error = formControl.querySelector('.error-message');
error.className = 'error-message error';
error.innerText = message;
formControl.className = 'form-control error';
}
/* Display success icon and remove any error message */
export function setSuccessFor(input) {
const formControl = input.parentElement;
const error = formControl.querySelector('.error-message');
error.className = 'error-message';
formControl.className = 'form-control success';
}
login.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/cf53bba659.js" crossorigin="anonymous"></script>
<link href="/css/forms.css" rel="stylesheet" type="text/css"/>
<script type="module" src="/js/login-form.js" defer></script>
<title>Locations - Login</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>Login</h1>
</div>
<form class="form" id="login" action="/login" method="POST" novalidate>
<div class="form-control">
<label for="email">Email</label>
<input name="email" id="email" type="text" required>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<div class="error-message"> </div>
</div>
<div class="form-control">
<label for="password">Password</label>
<input name="password" id="password" type="password" required>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<div class="error-message"> </div>
</div>
<button>Submit</button>
</div>
</form>
</div>
</body>
</html>
I just needed the following line in index.js file:
app.use(express.urlencoded({ extended: true }));
Related
Ideal Case:
if form valid send data to the servlet.
if not show the respective errors
What actually is happening: when i submit a form with wrong credentials the form gets stuck and the data does not go to the servlet which is what we want but when I enter the right credentials even then the form is not being submitted to the servlet. Here is my JavaScript code:
const form = document.getElementById('register-form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const email = document.getElementById('email');
const password = document.getElementById('password');
const sendData = (fnameVal, sRate, count) => {
if (sRate === count) {
swal("Congratulations " + fnameVal + " !", "Account Created Successfully", "success");
form.submit();
}
}
const successMsg = (fnameVal) => {
let formG = document.getElementsByClassName('form-group');
var count = formG.length - 1;
for (var i = 0; i < formG.length; i++) {
if (formG[i].className === "form-group success") {
var sRate = 0 + i;
sendData(fnameVal, sRate, count);
} else {
return false;
}
}
}
const isEmail = (emailVal) => {
var re = /^\S+#\S+\.\S+$/;
if (!re.test(emailVal)) return false;
var atSymbol = emailVal.indexOf("#");
if (atSymbol < 1) return false;
var dot = emailVal.indexOf('.');
if (dot === emailVal.length - 1) return false;
return true;
}
const isPassword = (passwordVal) => {
var re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$!%*?&])[A-Za-z\d#$!%*?&]{8,}$/;
if (!re.test(passwordVal)) {
return false;
}
return true;
}
const validate = () => {
const fnameVal = fname.value.trim();
const lnameVal = lname.value.trim();
const emailVal = email.value.trim();
const passwordVal = password.value.trim();
// validate first-name
if (fnameVal.length <= 2) {
setErrorMsg(fname, 'first-name requires min 3 char');
} else {
setSuccessMsg(fname);
}
// check last-name
if (lnameVal.length <= 2) {
setErrorMsg(lname, 'last-name requires min 3 char');
} else {
setSuccessMsg(lname);
}
// check email
if (!isEmail(emailVal)) {
setErrorMsg(email, 'not valide email');
} else {
setSuccessMsg(email);
}
// check password
if (!isPassword(passwordVal)) {
setErrorMsg(password, "min 8 char, at least 1 uppercase and lowercase letter, one number and special character");
} else {
setSuccessMsg(password);
}
successMsg(fnameVal);
}
function setErrorMsg(input, errormsgs) {
const formGroup = input.parentElement;
const small = formGroup.querySelector('small');
formGroup.className = "form-group error";
small.innerText = errormsgs;
}
function setSuccessMsg(input) {
const formGroup = input.parentElement;
formGroup.className = "form-group success";
}
var s = document.getElementById("status").value;
if (s == "success") {
swal("Congratulations", "Account Created Successfully", "success");
}
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QuizzBuzz Sign-Up Portal</title>
<link rel="stylesheet" href="./css/registration-style.css">
<!--font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<input type="hidden" name="hiddenalert" id = "status" value = "<%= request.getAttribute("hiddenalert") %>">
<div class="main">
<section class="signup">
<div class="container">
<div class="signup-content">
<div class="signup-image">
<figure>
<img src="./images/signup-image.jpg" alt="singup-image">
</figure>
</div>
<div class="signup-form">
<h2 class="title">Create an Account</h2>
<form method="post" action="Register" class="register-form" id="register-form">
<div class="form-group">
<select id="userType" class="userType" name="userType" required="required">
<option value="student">Student</option>
<option value="teacher">Teacher</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="form-group">
<input type="text" name="firstname" id="fname" placeholder="Enter your first-name" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="text" name="lastname" id="lname" placeholder="Enter your last-name" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="email" name="email" id="email" placeholder="Enter your Email ID" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<div class="form-group">
<input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="off" required="required">
<i class="fa-solid fa-circle-check"></i>
<i class="fa-solid fa-exclamation-circle"></i>
<small>Error!</small>
</div>
<input type="submit" value="Submit" onclick = "event.preventDefault(); validate()" class="button">
</form>
</div>
</div>
</div>
</section>
</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="./js/member-registration.js"></script>
</body>
</html>
I think it has something to do with the event.preventDefault() function but i dont know exactly how to get around the problem and solve it.And the sweet alerts also do not work
I highly recommend you to validate users and passwords formats also in servlets(or server side).
This because people could just erase or stop all javascript validation and directly send their data.
Validating in client side is not wrong but is not secure at all.
Now, answering your request, if the credentials are in a correct format you are just submitting the form tag like this.
<form method="post" action="Register" class="register-form" id="register-form">
The "action" attribute work is redirecting the form content to the url you write in it.
So action="Register" is not correct(If you were reaching a servlet, it have to be a valid path, like: '/Register').
In it's place, you have to write a relative path that is current being listened by a servlet or a jsp, like this:
action="register.jsp" or action="/register"
This way, when you submit your form, it is gonna redirect you and your form content to the path you wrote.
Another way is send data trough ajax(You can research it), the form data is sent without reloading and your javascript recives a response from the server.
Let me know if i helped.
i have a simple form where i am doing some validations in javascript, the submit button is prevented by default to check if all validations are done the form is like below:
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
if (usernameValue === '') {
setErrorFor(username, 'Full name cannot be blank');
} else {
setSuccessFor(username);
}
if (emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if (passwordValue === '') {
setErrorFor(password, 'Roll number cannot be blank');
} else if (passwordValue.length < 10) {
setErrorFor(password, 'Roll number must be 10 digits');
} else {
setSuccessFor(password);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
<form id="form" class="form" method="post" action="">
<div class="form-control">
<label for="username">Full Name</label>
<input type="text" placeholder="Full Name" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="Email" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Roll Number</label>
<input type="text" maxlength="10" placeholder="Roll Number" id="password" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
the validations are working fine, the issue if the form is not getting submitted if all validations are successful, can anyone please tell me how to accomplish this, thanks in advance
Not getting submitted becouse for e.preventDefault();. So e.preventDefault(); exicute when form is not valid otherwise not needed.
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
form.addEventListener('submit', e => {
if(!checkInputs())
e.preventDefault();
});
function checkInputs() {
// trim to remove the whitespaces
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
let error =true;
if (usernameValue === '') {
setErrorFor(username, 'Full name cannot be blank');
error =false;
} else {
setSuccessFor(username);
}
if (emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
error =false;
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
error =false;
} else {
setSuccessFor(email);
}
if (passwordValue === '') {
setErrorFor(password, 'Roll number cannot be blank');
error =false;
} else if (passwordValue.length < 10) {
setErrorFor(password, 'Roll number must be 10 digits');
error =false;
} else {
setSuccessFor(password);
}
return error;
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control success';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
<form id="form" class="form" method="post" action="">
<div class="form-control">
<label for="username">Full Name</label>
<input type="text" placeholder="Full Name" id="username" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Email</label>
<input type="email" placeholder="Email" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label for="username">Roll Number</label>
<input type="text" maxlength="10" placeholder="Roll Number" id="password" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button type="submit">Submit</button>
</form>
I'm trying to make a register page. When I enter the data that needs to be registered, it shows up on the console followed by Error: ER_EMPTY_QUERY.
I believe the problem is in the controllers/auth.js file but I can't figure it out for some reason. Please help, been stuck on this for the past 2 days.
controllers/auth.js:
const mysql = require('mysql');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'practice'
})
exports.register = (req, res) => {
console.log(req.body)
const {name, email, password, passwordConfirm} = req.body
db.query('SELECT email FROM users WHERE email = ?' [email], async (error, results) => {
if(error) {
console.log(error)
}
if( results.length > 0 ) {
return res.render('register', {
message: 'That email is already is use'
})
} else if( password !== passwordConfirm) {
return res.render('register', {
message: 'Passwords do not match'
})
}
let hashedPassword = await bcrypt.hash(password, 8);
console.log(hashedPassword);
db.query('INSERT INTO users SET ?', {name: name, email: email, password: hashedPassword}, (error, results) => {
if(error) {
console.log(error)
} else {
console.log(results);
return res.render('register', {
message: 'User registered'
})
}
})
})
}
register.hbs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles.css">
<title>Document</title>
</head>
<body>
<nav>
<h4>Node MySQL</h4>
<ul>
<li>Home</li>
<li>Login</li>
<li>register</li>
</ul>
</nav>
<div class="container mt-4">
<div class="card">
<div class="card-header">
Register Form
</div>
<div class="card-body">
<form action="/auth/register" method="POST">
<div class="mb-3">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="mb-3">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="mb-3">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="mb-3">
<label for="passwordConfirm">Confirm Password</label>
<input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
{{#if message}}
<h4 class="alert alert-daner mt-4">{{message}}</h4>
{{/if}}
</div>
</body>
</html>
I'm trying to make a form and two things are not working. The form doesn't submit and I can't get it to hide either. I'm trying to make it so if the user clicks on the binocular icon it displays the form and it's hidden until the user does so. I'm a UX Designer trying to up my front-end skills.
HTML:
<body>
<a href onclick="document.getElementById('hide').style.display='block'">
<img src="iconmonstr-binoculars-8.png" width="40" height="30" alt=""/>
</a><br>
<p id="demo" style="display:none">
<div class="container">
<h2>Have a Product Suggestion?</h2>
<form class="form" id="form">
<div class="form-control">
<label for="fName">Full Name</label><br>
<input type="text" id="Fname" placeholder="Lisa Simpson" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i><br>
<small>Error Message</small><br>
</div>
<div class="form-control">
<label for="email">Email Address</label><br>
<input type="email" placeholder="iheartthesax#gmail.com" id="email" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i><br>
<small>Error Message</small><br>
</div>
<div class="form-control">
<label for="productDes">Product Description</label><br>
<textarea name="message" rows="4" cols="35" id="productDes">Describe the product you are looking for, please be as detailed as possible.
</textarea>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i><br>
<small>Error Message</small><br>
</div>
<input type="submit" value="Submit" /><br>
</form>
</div></p>
Javascript:
const form = document.getElementById('form');
const fname = document.getElementById('fname');
const email = document.getElementById('email');
const productDes = document.getElementById('productDes');
form.addEventListener('Submit', (e) => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
//get the values from the inputs
const fnameValue = fname.value.trim();
const emailValue = email.value.trim();
const productDesValue = productDes.value.trim();
if(fnameValue === '' ) {
setErrorFor(fname, 'Oh no! Please add your name.');
} else {
setSuccessFor(fname);
}
if(emailValue === '') {
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Not a valid email');
} else {
setSuccessFor(email);
}
if(productDesValue === '' ) {
setErrorFor(productDes, 'Oh no! Please add details for the product.');
} else {
setSuccessFor(productDes);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.queryselector('small');
small.innerText = message;
formControl.className = 'form-control error';
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'form-control sucess';
}
function isEmail(email) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}
document.getElementById("hide").style.display = "block";
'''
So for the hiding with document.getElementById("hide").style.display = "block" and document.getElementById('hide').style.display='block' you are trying to change the display value of something with the id hide. I see no such element in your HTML.
I think what you actually want to do is make the Element wit the ID demo visible again right? So for the hiding I guess using document.getElementById("demo").style.display = "block" would fix your problem.
And for the submitting, I am not sure but the events might be case sensitive, have you tried registering to the submit event instead of Submit?
Replace submit event handler with this code. It will submit the form.
form.addEventListener('submit', (e) => {
e.preventDefault();
checkInputs();
});
Parts of the following code are from a quick form verification tutorial I found on YouTube. I'm trying to create an additional feature to generate a success message inside of the checkInputs() function if all the formControl class names = form-control success in the setSuccessFor(input) function. I created a variable allEl that converts the allElementsNode to an array, but I can't seem to iterate through that to pull the class names of the children. So [...allElementsNode][0] gives me access to the parent form element, so what I'm trying to do is iterate through all child divs in order to grab the class value to compare if it is equal to form-control success. If I try to iterate through allEl, I get undefined.
HTML
<form class="form" id="form">
<div class="form-control">
<label>Username</label>
<input type="text" placeholder="Angel" id="username">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label>Email</label>
<input type="email" placeholder="angel#gmail.com" id="email">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label>Password</label>
<input type="password" placeholder="password" id="password">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="form-control">
<label>Password check</label>
<input type="password" placeholder="Password two" id="password2">
<i class="fa fa-check-circle"></i>
<i class="fa fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<button>Submit</button>
</form>
JavaScript
const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const password2 = document.querySelector('#password2');
let allElementsNode = document.querySelectorAll("#form");
const allElementsArray = Array.from(allElementsNode);
let formControl;
form.addEventListener('submit', (e) => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// get values from the inputs
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if (usernameValue === '') {
// show error
setErrorFor(username, 'Username cannot be blank');
} else {
// show success
setSuccessFor(username);
}
if (emailValue === '') {
// show error
setErrorFor(email, 'Email cannot be blank');
} else if (!isEmail(emailValue)) {
setErrorFor(email, 'Email is not valid')
} else {
// show success
setSuccessFor(email);
}
if (passwordValue === '') {
// show error
setErrorFor(password, 'Passwords cannot be blank');
} else {
// show success
setSuccessFor(password);
}
if (password2Value === '' || password2Value !== passwordValue) {
// show error
setErrorFor(password2, 'Passwords cannot be blank and must match!');
} else {
// show success
setSuccessFor(password2);
}
// Set success message. All formControl should have the success class set
// console.log(formControl.className)
const allEl = [...allElementsNode][0];
console.log(allEl);
const allCtrlEl = Array.from(allEl).forEach(item => item);
console.log(allCtrlEl);
}
function setErrorFor(input, message) {
formControl = input.parentElement; // .form-control
const small = formControl.querySelector('small');
// add error message inside small
small.innerText = message;
// add error class
formControl.className = 'form-control error';
}
function setSuccessFor(input) {
formControl = input.parentElement; // .form-control
formControl.className = 'form-control success';
}
function isEmail(email) {
const emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(email);
}
It looks like your allElementsNode is the parent form so you need to get childrenElements like so
const allEl = [...allElementsNode.children];