So I am currently working on this form validation part for this web-based app. Trying to apply some front end js code on the ejs file as shown below,
<body>
<h1>Doctor</h1>
<p>Registration</p>
<!--physician route-->
<div id="doc_reg">
<form method='POST'onsubmit="return formValidation()"action="/physician/loggedin">
<label>Username:</label>
<input type="text" id="user_name" name="user_name">
<label>Email:</label>
<input type="email" id="user_email" name="user_email">
<label>Type in First Name:</label>
<input type="text" id="first_name" name="first_name">
<label>Type in Last Name:</label>
<input type="text" id="last_name" name="last_name">
<label>Create your password:</label>
<input type="text" id='password_1' name='password_1'>
<label>Confirm your password:</label>
<input type="text" id='password_2' name='password_2'>
<button type="submit">Register</button>
</form>
</div>
<script src="../../public/doclogin.js"></script>
</body>
</html>
the js code that I am trying to implement here (made it simple just for the sake of convenience in communication)
function formValidation(){
const user_name = document.getElementById('user_name').value
const user_email = document.getElementById('user_email').value
const first_name = document.getElementById('first_name').value
const last_name = document.getElementById('last_name').value
const password_1 = document.getElementById('password_1').value
const password_2 = document.getElementById('password_2').value
//we will leave the creating password part later, because it is such a pain in the ass
if (user_name==="" || user_email==="" || first_name==="" || last_name===""|| password_1===""|| password_2===""){
alert("Information Missing for Required Entries")
return false
}
}
I don't know why the validation does not work the way it is expected.
However, when I make a form on a pure html file with the same js code, it works.
Why is that??
use && to check for all required fields
Answer to this question can be found here How to include external .js file to ejs Node template page.
Related
I have been working on a little coding project for my friends. This includes a somewhat password system that changes your username. I implemented this so that impersonation was harder to do.
<main class="join-main">
<label for="password">Password</label>
<input type="password" name="password" id="password" placeholder="Enter password..." required />
<button type="button" onclick="fn1()">Check ig</button>
<script>
function fn1() {
let pswvalue = document.getElementById("password").value
if (pswvalue = "1234") {
document.getElementById("username").value = "Hello"
} else {
return;
}
}
</script>
<form action="chat.html">
<div class="form-control">
<label for="username">Logging Into:</label>
<input
type="text"
name="username"
id="username"
placeholder="The User you are logging into will appear here."
readonly
/>
</div>
</form>
For some reason, even if the password isn't "1234", The username still changes to Hello. Any suggestions on how to fix it?
It should be if (pswvalue === "1234") since we are comparing two stings.
I'm working with handlebars for the first time while creating an express app with sequelize and postgresql (courtesy of brad traversy). Upon filling out a form, I am using Joi for validating the request body , if there is an error I re-render the form (view) keeping the originally entered values. The problem is when this happens the text is being trimmed automatically.
E.G. I fill out the title field with "Hello World" and don't fill another field in the form, Joi won't be happy so I re-render the form (view) and when the title repopulates in the form, it will just say "Hello" instead.
Post Endpoint for Gig Resource
// Add a Gig
router.post("/add", (req, res) => {
let { title, technologies, budget, description, contact_email } = req.body;
const { error } = validateGig(req.body);
if (error) {
// Re-Render The Form
return res.status(400).render("add", {
error: error.details[0].message,
title,
technologies,
budget,
description,
contact_email
});
} else {
budget == "" ? (budget = "Unknown") : (budget = `$${budget}`);
// Make Lower Case and Remove Space After Comma
technologies = technologies.toLowerCase().replace(/, /g, ",");
// Insert Into Table
Gig.create({
title,
technologies,
budget,
description,
contact_email
})
.then((gig) => res.redirect("/gigs"))
.catch((err) => console.log("Error Adding Gig" + err));
}
});
Handlebars View
<section id="add" class="container">
<div class="form-wrap">
<h1>Add A Gig</h1>
<p>Your contact email will be shared with registered users to apply to your gig</p>
{{#if error}}
<div class="error">
<p>{{error}}</p>
</div>
{{/if}}
<form action="/gigs/add" method="POST">
<div class="input-group">
<label for="title">Gig Title</label>
<input type="text" name="title" id="title" class="input-box"
placeholder="eg. Small Wordpress website, React developer" maxlength="100" value={{title}}>
</div>
<div class="input-group">
<label for="technologies">Technologies Needed</label>
<input type="text" name="technologies" id="technologies" class="input-box"
placeholder="eg. javascript, react, PHP" maxlength="100" value={{technologies}}>
</div>
<div class="input-group">
<label for="budget">Budget (Leave blank for unknown)</label>
<input type="number" name="budget" id="budget" class="input-box" placeholder="eg. 500, 5000, 10000"
value={{budget}}>
</div>
<div class="input-group">
<label for="description">Gig Description</label>
<textarea name="description" id="description" class="input-box"
placeholder="Describe the details of the gig" rows="10">{{description}}</textarea>
</div>
<div class="input-group">
<label for="budget">Contact Email</label>
<input type="email" name="contact_email" id="contactemail" class="input-box"
placeholder="Enter an email" value={{contact_email}}>
</div>
<input type="submit" value="Add Gig" class="btn btn-reverse">
</form>
</div>
</section>
When using variables in your template, you'll still want to include the quotes around the attribute value.
For example:
value={{title}}
Should be written as
value="{{title}}"
I have only learned HTML, CSS, JavaScript and jQuery and I want to get a value from my form to my index page, which is located in different files, using the languages I know. So this is my form :
<form action="../index/index.html" method="GET">
<label for="name">Name :</label>
<input type="text" name="name" id="name" required>
<label for="email">Email :</label>
<input type="text" name="email" id="email" placeholder="eg.yourname#gmail.com" required>
<input type="submit" name="submit" id="submit">
</form>
I want the value that a user submits in the #name input in my index's div tag when the submit button is pressed (this div has the class sing-in).
Both pages have their own JavaScript and CSS so if I would import the JavaScript of the page where the form is to my index pages it will mess up both pages I guess. Therefore, I want to do this without importing the JavaScript and just by taking the value from another page into my index page. Thank you.
When you submit your form and get redrected to your index page the values of the form will be put at the end of the url as GET parameters.
Example url: localhost:80/index/index.html?name=Eddie&email=eddie#gmail.com
To read the GET parameters you can use this code:
var urlString = window.location.href
var url = new URL(urlString);
var name = url.searchParams.get("name");
var email = url.searchParams.get("email");
//Check if name and email are set
Make sure to check if name and email have actually been set in index.html
You can get the values from for like this:
if this is the form
<form action="../index/index.html" method="GET">
<label for="name">Name :</label>
<input type="text" name="name" id="name" required>
<label for="email">Email :</label>
<input type="text" name="email" id="email" placeholder="eg.yourname#gmail.com" required>
<input type="submit" name="submit" id="submit">
</form>
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
or in jquery
var name = $('#name').val();
var email = $('#email').val();
have a look:
https://www.w3schools.com/jsref/prop_text_value.asp
this might help you
This is my first post so don't judge me if i do something wrong because i'm still learning but i have a question i'm making a form and i have a problem. When i left the button without any extra stuff when i tested the form i got as many entries as many times i clicked the button so i used a code snippet from here in JS and made the button so it disappears, problem is when i don't fill the form correctly it doesn't send the entry, so the question is how can i add the condition in form so the button only disappears when every field is written correctly? I would add the whole html but it's houndreds of lines of code now since it's pretty much where i test things here is the form code though.
My other thought was to maybe try to edit the php code, but to be honest i have no knowledge of that because my friend made that.
I also searched google and here for some tips but couldn't find any, thanks for help in advance.
$("#hideme").click(function(){
$(this).hide();
});
<form method="post" action="thankyou.php" style="overflow:hidden" class="accident-form4">
<input type="hidden" name="lang" value="pl">
<div class="form-group required">
<label for="name">Imię i nazwisko<span></span></label>
<input type="text" class="form-control inputToUpper" name="firstname" placeholder="Andrzej Kowalski" required="required" pattern=".*\S+.*" title="Wpisz swoje imię">
</div>
<div class="form-group required">
<label for="email">Email<span></span></label>
<input type="email" class="form-control" required="required" name="email" placeholder="np. andrzej.kowalski#gmail.com" title="Wpisz poprawny adres email!" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
<div class="form-group">
<label for="tel">Numer telefonu<span></span></label>
<input type="text" name="tel" placeholder="079 1234 5678" class="form-control" required="required" size="12" value="">
</div>
<label for="hour">Preferowana godzina kontaktu</label>
<select class="form-control" name="hour" placeholder="" title="" />
<option>Dowolna</option>
<option>Rano</option>
<option>Po południu</option>
<option>Wieczorem</option>
</select>
<input type="submit" name="lead" class="send" id="hideme" value="ROZPOCZNIJ CLAIM →">
</form>
you can simply check the value of the required fields before hiding the button.
$("#hideme").click(function(){
if (document.getElementsByName('firstname')[0].value != '' &&
document.getElementsByName('email')[0].value != '' &&
document.getElementsByName('tel')[0].value != '') {
$(this).hide();
}
});
or use your RegExp in Javascript again.
$("#hideme").click(function(){
if (document.getElementsByName('firstname')[0].value.match (/.*\S+.*/) &&
document.getElementsByName('email')[0].value.match (/[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$/) &&
document.getElementsByName('tel')[0].value.match (/[0-9]+/)) {
$(this).hide();
}
});
that should to the trick (but i didn't test it).
I'm new with Javascript and I'm learning by myself. I have a problem with a form on my page. I just want to test with a simple javascript code that I can manipulate my input "type=submit" by adding a function to it to console.log a string when the form is submitted (I watched it on a video and I wanted to do it by myself).
Here is my code:
(function() {
"use strict";
document.getElementById('enviar').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
and this is my HTML code:
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>
The problem that I'm having here is that is not working at all.. my ID element is selected properly but I don't know what is wrong with my code. I created a variable and console my ID selected to see if I was getting the right element from the DOM and I'm getting in the console the right input element. please if someone knows why is not working.
plus: On my text input field I have a regular expression but I'm not getting the output I want.. the goal is that the user has to write at least two names (First and Last), so when they write just one it will be incorrect.. the problem that I'm having with this regular expression if when someone writes more than two names (First, Middle and Last) I DON'T want to make that an incorrect answer because technically is correct. So I need to make a better regular expression to get that result (when the user writes two or more names, not just two) but I don't know too much about Regular Expressions.
You are getting the element with the id enviar which is the submit button element. You need to be querying based on the form's element id which is escribenos. Try running the snippet below and you can see that it has the expected outcome.
(function() {
"use strict";
document.getElementById('escribenos').addEventListener('submit', enviar);
function enviar(event) {
event.preventDefault();
console.log("you submitted the form");
}
})();
<form id="escribenos" method="post">
<label for="name">Nombre y Apellido</label>
<input type="text" name="name" id="name" pattern="[A-Za-z]+\s+[A-Za-z]+" required value=""/>
<label for="email">Correo electrónico</label>
<input type="email" name="email" id="email" required />
<label for="asunto">Asunto</label>
<input type="text" name="asunto" id="asunto" />
<label for="comentario">Mensaje</label>
<textarea maxlength="250" rows="5" name="comentario" id="comentario" style="resize:none;"></textarea>
<input id="enviar" value="enviar" type="submit" ></input>
</form>