I was making simple contact form with email validation, but I ran into an error in my JS code. I was trying to figure out how to fix it but I have no idea what to do.
I was also trying different solutions from other People on StackOverflow but nothing work.
This Is My HTML code :
<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="../assets/css/style.css">
<title>blackbubble | Contact</title>
</head>
<body>
<form action="#" id="form">
<div class="form_body">
<div class="form_title">
<span></span>
<h1>Get In Touch</h1>
<span></span>
</div>
<div class="user_name">
<input type="name" placeholder="Your name"></input>
<input type="name" placeholder="Second name">
</div>
<div class="email">
<input type="email" id="email" placeholder="Your email address" onkeydown="validation()">
<p class="text"></p>
</div>
<div class="textarea_box">
<textarea placeholder="Message"></textarea>
</div>
<div class="form_footer">
<button class="btn btn_submit">Submit</button>
</div>
</div>
</form>
<script src="../assets/js/main.js"></script>
</body>
</html>
here is my JS Code:
function validation() {
var form = document.getElementById("form");
var email = document.getElementById("email").value;
var text = document.getElementById("text");
var text = document.getElementById("text");
var pattern = /^[^ ]+#[^ ]+\.[a-z]{2,3}$/;
if (email.match(pattern)) {
form.classList.add("valid");
form.classList.remove("invalid");
text.innerHTML = "Your Email Address Is Valid.";
text.style.color = "#00ff00";
}
else {
form.classList.remove("valid");
form.classList.add("invalid");
text.innerHTML = "Please Enter A Valid Email Address.";
text.style.color = "#ff0000";
}
}
There is no element with the id text.
You probably meant to select the element with the class text instead. This can be done with document.querySelector() and the .text CSS selector.
function validation() {
var form = document.getElementById("form");
var email = document.getElementById("email").value;
var text = document.querySelector(".text");
var pattern = /^[^ ]+#[^ ]+\.[a-z]{2,3}$/;
if (email.match(pattern)) {
form.classList.add("valid");
form.classList.remove("invalid");
text.innerHTML = "Your Email Address Is Valid.";
text.style.color = "#00ff00";
} else {
form.classList.remove("valid");
form.classList.add("invalid");
text.innerHTML = "Please Enter A Valid Email Address.";
text.style.color = "#ff0000";
}
}
<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="../assets/css/style.css">
<title>blackbubble | Contact</title>
</head>
<body>
<form action="#" id="form">
<div class="form_body">
<div class="form_title">
<span></span>
<h1>Get In Touch</h1>
<span></span>
</div>
<div class="user_name">
<input type="name" placeholder="Your name">
<input type="name" placeholder="Second name">
</div>
<div class="email">
<input type="email" id="email" placeholder="Your email address" onkeydown="validation()">
<p class="text"></p>
</div>
<div class="textarea_box">
<textarea placeholder="Message"></textarea>
</div>
<div class="form_footer">
<button class="btn btn_submit">Submit</button>
</div>
</div>
</form>
</body>
</html>
Related
I managed to import a function from my main.js to my signin.js, but for some reason, I get this error on my sign in html page Cannot read properties of null (reading 'addEventListener')
and the function for the signin js is not working and I need to import the function of the main.js as the signin js function relys on the main.js function to work.
HTML 1 - signin js
<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="../js/main.js" type="module"></script>
<script src="../js/signin.js" type="module"></script>
<title>Sign in</title>
</head>
<body>
<main>
<form class="form-container">
<input class="email" type="text" placeholder ="Email Address">
<input class="password" type="password" placeholder ="Password">
Sign In
Register
</form>
</main>
</body>
signin.js imported function
//import function
import { validate } from "../js/main.js";
let registration = validate();
let signInbtn = document.querySelector(".sign-in");
signInbtn.addEventListener("click", check);
function check(){
let storedEmail = localStorage.getItem('email');
let storedPw = localStorage.getItem("password");
let email = document.querySelector(".email");
let password = document.querySelector(".password");
if(email.value == storedEmail && password.value == storedPw){
alert("You are logged in")
}
else{
alert("Email or Password is incorrect please check and try again.")
}
}
}
HTML 2 - main.js
<!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="../css/main.css" />
<script src="../js/main.js" type="module"></script>
<title>Register</title>
</head>
<body>
<main>
<div class="heading">
<h1>User Registration</h1>
</div>
<form action="../index.html" class="form-container">
<ul>
<li><label for="name">Name</label>
<input class="name" type="text" name="name" required />
</li>
<li><label for="surname">Surname</label>
<input class="surname" type="text" name="surname" required />
</li>
<li><label for="phone">Phone</label>
<input class="phone" type="text" name="phone" />
</li>
<li><label for="email">Email</label>
<input class="email" type="text" name="email" required /></li>
<li><label for="password">Password</label>
<input class="password" type="text" name="password" required /></li>
<button class="reg">Register</button>
</ul>
</form>
</main>
</body>
</html>
main.js
let registration = document.querySelector(".reg");
registration.addEventListener("click", validate);
export function validate() {
//get html elements
const formEl = {
id: createId(),
name: document.querySelector(".name").value,
surname: document.querySelector(".surname").value,
phone: document.querySelector(".phone").value,
email: document.querySelector(".email").value,
password: document.querySelector(".password").value,
};
let name = formEl.name;
let surname = formEl.surname;
let email = formEl.email;
let password = formEl.password;
if (!name) {
alert("Please fill in name");
}
if (!surname) {
alert("Please fill in Surname");
}
if (!email) {
alert("Please fill in email");
}
if (!password) {
alert("Please create a password");
}
usersArray.push(formEl);
store();
return formEl;
}
This error I get in the HTML 1 page
for some reason, it is preventing the sign-in function from executing. I am doing it this way for practice purposes, I know local storage is not the best method for this, but I am getting used to how local storage works.
I have a first page, which, onload, shows the default get params.
Page1.html
<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 defer src="assets/main.js"></script>
<title>Document</title>
</head>
<body">
<div>
<h1>Nous avons reçu : </h1>
<h2 style="display: inline-block">LOGIN : </h2>
<p style="display: inline-block" id="login"></p>
</div>
<div >
<h2 style="display: inline-block">PASSWORD : </h2>
<p style="display: inline-block" id="password"></p>
</div>
</body>
<script>
</script>
</html>
Page1_main.js
// Version 1
const url = new URL(window.location.href);
const params = url.searchParams;
params.set('LOGIN', 'Licois');
params.append('PASSWORD', 'Johanne')
url.search = params.toString();
window.history.replaceState({}, '', location.pathname + '?' + params);
if (params.has('LOGIN')) {
alert("Licois !");
} else {
alert("Licois est introuvable !")
}
if (params.has('PASSWORD')) {
alert("Johanne !");
} else {
alert("Johanne a disparu !")
}
document.getElementById("login").innerHTML = params.get("LOGIN");
document.getElementById("password").textContent = params.get("PASSWORD");
Result : page1 result
Ok, this is what I wanted.
But then, I have to have another page (with html only), which will send new get parametes to the first page, and shown them there in the HTML and URL. But in this case I cannot show "Joanne" and "Licois" anymore, or show the new params as "param3= " and "param4= ".
Page2_html
<!DOCTYPE html>
<html lang="fr">
<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>Exercice 2</title>
</head>
<body>
<form action="Page1.html" method="GET">
<label for="login">Login</label>
<input type="text" name="login" id="login" >
<div><br></div>
<label for="password">Password</label>
<input type="text" type="password" for="password" name="password" id="password">
<div><br></div>
<button type="submit" id="envoyer">Envoyer</button>
</form>
</body>
</html>
Page2_form
I succeed at sending the new params to the first page ("action='Page1.html'").
But I can't manage to show them in the HTML and URL.
No, nevermind, I got it.
Changed Page2.html to
<body>
<form action="Page1.html" method="GET">
<label for="login">Login</label>
<input type="text" name="NEW_LOGIN" id="NEW_LOGIN" >
<div><br></div>
<label for="password">Password</label>
<input type="text" type="password" for="password" name="NEW_PASSWORD" id="NEW_PASSWORD">
<div><br></div>
<button type="submit" id="envoyer">Envoyer</button>
</form>
</body>
</html>
And added this to Page1_main.js
if (params.has('NEW_LOGIN')) {
document.getElementById("login").innerHTML = params.get("NEW_LOGIN");
} else if ((params.has('LOGIN'))) {
document.getElementById("login").innerHTML = params.get("LOGIN");
}
if (params.has('NEW_PASSWORD')) {
document.getElementById("password").innerHTML = params.get("NEW_PASSWORD");
} else if ((params.has('PASSWORD'))) {
document.getElementById("password").innerHTML = params.get("PASSWORD");
}
EZ
I am trying to execute a event to verify if 2 input values are equals, but the javascript function dont works
I want to compare the valus of 2 text input box in realtime, like webforms, when the user type into the text box, the web says if the values match or not
This is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="resultado">Resultado</h2>
<div >
<label id="passwordlabel" for="password1">Contraseña</label>
<input name="password" type="text" id="password" placeholder="Contraseña" required>
<div class="invalid-feedback">
Contraseña no válida.
</div>
</div>
<div >
<label for="password2">Confirme Contraseña</label>
<input name="password2" type="password" id="password2" onclick="pass()" placeholder="Repita contraseña" required>
<div class="invalid-feedback">
Las contraseñas deben ser iguales.
</div>
</div>
<script src="js/password-validation.js"></script>
</body>
</html>
And this is the JS file
function pass() {
'use strict'
result=document.getElementById("resultado");
result.innerHTML = "el java script sirve";
var inputPassword = document.getElementById('password').value;
var inputPassword2 = document.getElementById('password2').value;
if ( inputPassword != inputPassword2) {
result.innerHTML = "values don't match";
}
else{
result.innerHTML = "values match";
}
})
Thank you
1- At the end of your function you have an unnecessary parentheses )
2- If you use use strict you need to declare your variables: var result = ...
3- Probably is conceptually wrong to check the two fields with an onclick on textbox, but this is not a formal error.
function pass() {
'use strict'
var result = document.getElementById("resultado");
result.innerHTML = "el java script sirve";
var inputPassword = document.getElementById('password').value;
var inputPassword2 = document.getElementById('password2').value;
if (inputPassword != inputPassword2) {
result.innerHTML = "values don't match";
} else {
result.innerHTML = "values match";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2 id="resultado">Resultado</h2>
<div >
<label id="passwordlabel" for="password1">Contraseña</label>
<input name="password" type="text" id="password" placeholder="Contraseña" required>
<div class="invalid-feedback">
Contraseña no válida.
</div>
</div>
<div >
<label for="password2">Confirme Contraseña</label>
<input name="password2" type="password" id="password2" onclick="pass()" placeholder="Repita contraseña" required>
<div class="invalid-feedback">
Las contraseñas deben ser iguales.
</div>
</div>
<script src="js/password-validation.js"></script>
</body>
</html>
I started learning javascript about 2 weeks ago so I'm really new. I've been messing arround with forms and I can't figure out some stuff.
I made a form in HTML and want to validate it in Javascript.
What I've done so far:
if the the fields are empty and the user presses submit a red border will appear arround the field. The border dissapperas if the users writes something in the field.
What I want to do:
if there are no validation errors and the form is submitted I would like for a confirmation message to appear above the form. The message should be hidden initially and it should say something like: "Thank you for contacting us,(and the first name the user entered in the form)"
I also want to print every information from the input fields in the console after submit.
How can I do this using only vanilla Javascript?
function formValidation() {
if (document.myForm.fname.value == "") {
document.getElementById("first-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("first-name").style.border = "";
};
if (document.myForm.lname.value == "") {
document.getElementById("last-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("last-name").style.border = "";
};
var checkMale = document.getElementById("gender-m").checked;
var checkFemale = document.getElementById("gender-f").checked;
if (checkMale == false && checkFemale == false) {
alert("Please select gender");
return false;
};
if (document.myForm.texta.value == "") {
document.getElementById("area").style.border = "2px solid red";
return false;
} else {
document.getElementById("area").style.border = "";
};
return true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>My Form</title>
</head>
<body>
<form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
<div id="msg">Thank you for contacting us, </div>
<input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
<input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
<label for="gender">Gender:</label> <br>
<input type="radio" name="gender" id="gender-m"> Male <br>
<input type="radio" name="gender" id="gender-f"> Female <br>
<textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
</html>
You can do it like this :
function formValidation() {
if (document.myForm.fname.value == "") {
document.getElementById("first-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("first-name").style.border = "";
};
if (document.myForm.lname.value == "") {
document.getElementById("last-name").style.border = "2px solid red";
return false;
} else {
document.getElementById("last-name").style.border = "";
};
var checkMale = document.getElementById("gender-m").checked;
var checkFemale = document.getElementById("gender-f").checked;
if (checkMale == false && checkFemale == false) {
alert("Please select gender");
return false;
};
if (document.myForm.texta.value == "") {
document.getElementById("area").style.border = "2px solid red";
return false;
} else {
document.getElementById("area").style.border = "";
};
var success = true;
if(success){
var data = document.getElementById("first-name").value+','+document.getElementById("last-name").value;
console.log(data);
var html = '';
html +='Thank you for contacting us,'+document.getElementById("first-name").value;
document.getElementById("msg").innerHTML = html;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>My Form</title>
</head>
<body>
<form id="my-form" name="myForm" action="#" onsubmit="event.preventDefault(); formValidation();">
<div id="msg"></div>
<input type="text" name="fname" id="first-name" placeholder="First Name"> <br>
<input type="text" name="lname" id="last-name" placeholder="Last Name"> <br>
<label for="gender">Gender:</label> <br>
<input type="radio" name="gender" id="gender-m"> Male <br>
<input type="radio" name="gender" id="gender-f"> Female <br>
<textarea name="texta" id="area" cols="30" rows="10"></textarea> <br>
<button type="submit">Submit</button>
</form>
<script src="index.js"></script>
</body>
</html>
When everything in the formValidation() function is validated then the code will set a flag success = true. If the value of success is true we can set a form submission successful message.
I coded an HTML form where I tried to validate it using javascript, However, the validation doesn't work. It should work on click of submit button. Everything looks fine! could not find the error! Please Help.
Below is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interst= document.myform.interst.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name = "myform" method="post"onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>
<?php
if (!isset($amount7032)) { $amount7032 = ''; }
if (!isset($interest7032)) { $interest7032 = ''; }
if (!isset($years7032)) { $years7032 = ''; }
?>
You have written wrong form element name at below line
var interst= document.myform.interst.value;
it should be
var interest= document.myform.interest.value;
Basically because javascript was not able to find the form element and it was failing due to that.
I tried below code and its working:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Term Deposit Interest Calculator</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script>
function validateform(){
var amount=document.myform.amount.value;
var years=document.myform.years.value;
var interest= document.myform.interest.value;
if (amount==null || amount==""){
alert("Amount can't be blank");
return false;
}else if (years==null || years==""){
alert("Years can't be blank");
return false;
}else if (interest==null || interest==""){
alert("Interest can't be blank");
return false;
}
}
</script>
</head>
<body>
<div class="card">
<h3>Term Deposit Interest Calculator</h3><br>
<form name="myform" method="post" onsubmit="return validateform()">
<input type="text" name="amount" placeholder="Deposit Amount"><span id="num1"></span>
<input type="text" name="years" placeholder="Number Of Years"><span id="num2"></span>
<input type="text" name="interest" placeholder="Yearly Interst Rate"><span id="num3"></span>
<input type="submit" name="submit" class="my submit" value="Total Amount">
</form>
<div class="result">
</div>
</div>
</body>
</html>