Develop Reference

NodeJS - expressJS - req.body only get one variable

I'm trying to do a login and signUp pages, the login page get all variables right while the signup only transfer the password for some reason.
App.JS:
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
// configure the app to use bodyParser()
app.use(bodyParser.urlencoded({extended: true,}));
app.use(bodyParser.json());
const port = process.env.PORT || 5555;
const usersSignup = [];
const { Client } = require("pg");
//Create static files
app.use(express.static(__dirname));
app.post("/sign-in", function (req, res) {
let email = req.body.email;
let pass = req.body.psw;
index = usersSignup.findIndex((x) => x.user === email && x.pass === pass);
if (index != -1) {
if (email == "Admin#g.com" && pass == "Admin") {
res.redirect("/contact");
}
res.send(
`Welcome!` + JSON.stringify(email) + "Password:" + JSON.stringify(pass)
);
console.log("Hello");
} else {
res.send("User not found");
console.log("User not found");
}
});
app.post("/sign-up", function (req, res) {
console.log(req.body);
var Fname = req.body.firstName;
var Lname = req.body.lastName;
var pass = req.body.Password;
var email = req.body.email;
var pCode = req.body.promoCode;
con.query("select * from users where email=$1", [email], (err, res) => {
var result = JSON.stringify(res.rows[1]);
if (result != null) {
console.log("User exists");
} else {
con.query(
"INSERT INTO users (Name,FamilyName,Email,PromoCode,Password) values($1,$2,$3,$4,$5)",
[Fname, Lname, email, pass, pCode]
);
}
});
SignUp form - req.body only get the password (psw) and nothing else... i tried to disable the modal but same problem.
the associated function are to check that both password are the same and to check password limits (6 digits,capital, etc...)
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Login form (Works fine) - all the data comes like it should.
<form method="POST" action="sign-in">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_account_box_black_18dp.png" alt=""></span>
</div>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter email" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_lock_black_18dp.png" alt=""></span>
</div>
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" title=" Must contain at least one number and one uppercase and lowercase letter and one special
char, and at least 6 or more characters" required>
</div>
<div class="g-recaptcha" data-sitekey="6LeryQAaAAAAACtRGmnGbDekQjszQXzXrH858eJe"></div><br>
<button type="submit" class="btn btn-primary" onclick="return alerts()">Log In</button>
<div class="sign-up"><br>
<hr>
<p><b>Need an account? Sign Up</b></p>
</div>
</form>

You forgot name attributes
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
Should be
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
HTML forms use name for sending data, not id
Do this for all inputs, also you wrote name="psw" on HTML but doing req.body.Password on server part, you need to correct this too.
Fixed HTML:
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password" name="Password"
placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>

You didn't set name attribute for signup!
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword" name="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>

Can you post the content of validFunc() that you used for onClick of password, and also the content of displayForm() used on form submit? I suspect that the missing fields somehow got undefined with your content checking code.

Javascript - Reading data from text file through javascript

I'm new in javascript. can you help me?
I've a js modal popup which loaded whenever user visits my website. in that modal popup I've a login form and I'm trying to login a user through javascript. I've a user.txt file where I've record of users.it doesn't show any error message or page. popup comes again and again
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times</button>
<h4 style="color:red;"> Login</h4></div>
<div class="modal-body">
<form role="form" >
<div class="form-group">
<label for="usrname"> Username</label>
<input type="text" name="username" class="form-control" id="usrname" placeholder="Enter username" required/>
</div>
<div class="form-group">
<label for="psw"> Email</label>
<input type="email" name="Email" class="form-control" id="email" placeholder="Enter Email" required/>
</div>
<span id="loginSpan" style="color:Red"></span>
<button type="submit" onclick="LoginFunction()" class="btn btn-
default btn-success "> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"> Cancel</button>
<p>Not a member? <a href="#myModal2" data-toggle="modal">Sign Up</</p>
</div>
</div>
</div>
</div>
and my javascript as follow for login
<script>
function LoginFunction(){
var email= $("#email").val();
var usern= $("#usrname").text();
var text = ReadFile();
var lines = text.split(";");
var text = readFile();
lines.pop();
if(email==text[2] && usern==text[1]){
window.location("index.html");
}
else{
var span=document.getElementById("loginSpan");
span.text="username or email does not match";
}
};
function ReadFile(){
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile("user.txt", 1, false, 0);
var lines = "";
while (!fh.AtEndOfStream) {
lines += fh.ReadLine();
}
fh.Close();
return lines;
}
</script>

Bootstrap validation not working on form submission

So I am new to bootstrap and so far I've got everything working the way I want. I have created a contact form which uses the Modal Form and sends the email via PHP using the Mail function.
I have created a script to do the validation on the form. If the validation passes I want the email to be sent out.
Currently when the user submits the form that is blank the validation isn't working and the email is getting sent.
Please keep in mind I'm am new to working with bootstrap.
HTML
<div id="ContactUs" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel">Contact Us</h4>
<p><b>XXXX</b><br>
Company Phone: XXXXX
</p>
</div>
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here.">
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here.">
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here.">
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here."></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</div>
Script
$(document).ready(function()
{
$validator = $("#contactForm").validate({
errorClass:'error',
validClass:'success',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass);
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass(errorClass).addClass(validClass);
},
rules: {
name: {
required: true,
minlength: 2
},
subject: {
required: true,
minlength: 10
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 10
}
},
messages: {
name: {
required: '<span class="help-inline">Your name is required</span>',
minlength: jQuery.format('<span class="help-inline">2 chars</span>')
},
subject: {
required: '<span class="help-inline">A Subject is required.
</span>',
minlength:jQuery.format('<span class="help-inline">10 characters</span>')
},
email: {
required: '<span class="help-inline">Email.</span>',
email: '<span class="help-inline">Ex : name#exemple.com</span>'
},
message: {
required: '<span class="help-block">Message</span>',
minlength: jQuery.format('<span class="help-block">10 chars</span>')
}
},
submitHandler: function(form)
{
$('form').submit(function() {
if ($validator.numberOfInvalids() > 0)
{
$('#submit').modal('hide');
} else
{
$('#submit').modal('show');
}
});
}
});
});

On each input field add 'required'. Simple way to ensure each field has data
<form id="contactForm" method="post" action="scripts/email.php">
<div class="modal-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" id="name" class="form-control" placeholder="Please enter your full name here." required />
<label for="name">Email</label>
<input type="text" name="email" id="email" class="form-control" placeholder="Please enter your email address here." required />
<label for="name">Subject</label>
<input type="text" name="subject" id="subject" class="form-control" placeholder="Please enter your subject here." required />
<label for="message">Message</label>
<textarea name="message" class="form-control" placeholder="Please enter your message here." required /></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Did you already include jquery and validation library?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>

pass your form to your button with attribute
<button type="submit" class="btn btn-primary" form="ContactUs">Submit</button>
you should put your form id inside that

editing multiple users using modal form (javascript, html)

Hi guys the issue I have is within my users admin page, I have displayed all the admin users within a table each assigned a delete and edit button.
When I click on edit the given users details appear in a modal form. Within the edit details there is a password and confirm password box, when I click on the edit details for the first user, the validation for confirm password appears as "passwords don't match" however when I click on the second user the confirm password does not validate.
Below is the source code I am having issues with any help will be much appreciated:
<a rel="tooltip" title="Edit" id="e<?php echo $id; ?>" href="#edit<?php echo $id; ?>" data-toggle="modal" class="btn btn-success"></i>Edit</a>
<div id="edit<?php echo $id;?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<div class="alert alert-info"><strong>Edit User</strong></div>
<form class="form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" name="firstname" value="<?php echo $row['firstname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Lastname</label>
<div class="controls">
<input type="text" id="inputEmail" name="lastname" value="<?php echo $row['lastname']; ?>" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputEmail">Mobile Number</label>
<div class="controls">
<input type="text" id="inputEmail" name="mobilenumber" value="<?php echo $row['mobilenumber']; ?>" required>
</div>
</div>
<input type="hidden" id="inputEmail" name="id" value="<?php echo $row['admin_id']; ?>" required>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input type="text" name="password" id="password" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Confirm Password</label>
<div class="controls">
<input type="text" name="confirmpassword" id="confirmpassword" required>
</div>
</div>
<div class="control-group">
<div class="controls">
<button name="edit" type="submit" class="btn btn-success"> Update</button>
</div>
</div>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("confirmpassword").onchange = validatePassword;
}
function validatePassword(){
var confirmpassword=document.getElementById("confirmpassword").value;
var password=document.getElementById("password").value;
if(password!=confirmpassword)
document.getElementById("confirmpassword").setCustomValidity("Passwords Don't Match");
else
document.getElementById("confirmpassword").setCustomValidity('');
//empty string means no validation error
}
</script>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"> Close</button>
</div>
</div>
<?php
if (isset($_POST['edit'])){
$admin_id=$_POST['id'];
$firstname=$_POST['firstname'];
$lastname=$_POST['lastname'];
$mobilenumber=$_POST['mobilenumber'];
$password= sha1 ($_POST['password']);
mysql_query("update admin set firstname = '$firstname', lastname = '$lastname', mobilenumber = '$mobilenumber', password = '$password' where admin_id='$admin_id'")or die(mysql_error()); ?>
<script>
window.location="adminusers.php";
</script>
<?php
}
}
?>
Validation issue
Validation issue 2

data parsley not stopping form submit

I thought Data-Parsley is supposed to stop form submit when errors are found. When I submit the following form, I briefly see the errors caught by data-parsley, but then the form action goes through. What am I missing here?
<div id="registerreg" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Register...</h4>
</div>
<div class="modal-body">
<form action="<?php echo 'register_success.php'; ?>" method="POST" name="registration_form" id="registration_form" class="margin-bottom-0">
<div class="form-group">
<label>First Name:</label>
<input type="text" id="first" name="first" class="form-control input-lg" placeholder="First Name" required />
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" id="last" name="last" class="form-control input-lg" placeholder="Last Name" required />
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control input-lg" placeholder="Email Address" id="emailreg" name="emailreg" onkeyup="checkvalid()" data-parsley-trigger="change" required />
<div id="emailwarning" style="color:red;"></div>
</div>
<div class="form-group">
<label>Password: (At least 6 charactors with 1 number)</label>
<input type="password" id="passwordreg" name="passwordreg" class="form-control input-lg" placeholder="Password" data-parsley-minlength="6" data-parsley-pattern="/^[a-zA-Z0-9., ]*[0-9]+[a-zA-Z0-9., ]*$/" title="Passwords must be at least 6 characters long, contain at least one uppercase letter (A..Z), at least one lower case letter (a..z), and at least one number (0..9)"/>
</div>
<div class="form-group">
<label>Repeat Password:</label>
<input type="password" name="confirmpwd" id="confirmpwd" class="form-control input-lg" placeholder="Repeat Password" data-parsley-equalto="#passwordreg" data-parsley-error-message="The entered text does not match the password field."/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#registration_form').parsley();
</script>

The onclick event in the submit button is overriding data parsley functions. Removing the onclick event from the submit button and letting data parsley fire the events solved the problem.
changed ...
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
to...
<input type="submit" id="registerbutton" class="btn btn-primary" value="Register" >
and ...
$('#registration_form').parsley();
to....
$('#registration_form').parsley().on('form:success', function() {
var form = document.getElementById('registration_form');
var passwordreg = form.passwordreg;
return regformhash(form, passwordreg);
});