This is my code I've been working on for a couple of hours, I can't get it to compare the two passwords, it will submit the form even if the passwords don't match. It does not return any alert message either way. I've tried doing (pass1.value == pass2.value) too, it didn't work.
strong text alert ("Welcome");
function enableButton(){
if (document.getElementById("checkb").checked)
{
document.getElementById("btn").disabled = false;
}
else {
document.getElementById("btn").disabled = true;
}
}
function checkPassword() {
var pass1= document.getElementById("pw").value ;
var pass2= document.getElementById("pw2").value ;
if ( pass1 == pass2 )
{
alert ("Passwords match") ;
return true;
}
else {
alert ("Passwords do not match");
return false;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> Sign up </title>
<link rel = "stylesheet" href = "registration.css">
<script src = "registration.js"></script>
<noscript> Sorry, your browser does not support Javascript! </noscript>
</head>
<body>
<header style = " background-color : #f0e68c" >
<div class = "logo">
<img src = "logo.png" style = "width : 130px ; height : 130px">
</div>
<ul class = "menu">
Home </li>
<li class = "menu1"> About us </li>
<li class = "menu1"> Blog </li>
<li class = "menu1"> Book an Appointment </li>
<li class = "menu1"> Contact us </li>
</ul>
<br>
</header>
<div class = "heading">
<h1> Sign Up </h1>
<div>
<div class = "form" align = "center">
<form>
<fieldset>
<div class = "left">
<label for = "fname"> First Name </label><br>
<input type = "text" id = "fname" name = "fname" required>
</div>
<div class = "left">
<label for = "lname"> Last Name </label><br>
<input type = "text" id = "lname" name = "lname" required>
</div>
<div class = "clear"> </div>
<div class = "left">
<label for = "email"> E-mail </label><br>
<input type = "email" id = "email" name = "email" required>
</div>
<div class = "clear"> </div>
<div class = "left">
<label for = "pw"> Password </label><br>
<input type = "password" id = "pw" min = "6" max = "25" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,25}" title="Password should contain Uppercase letters, lowercase letters, numbers, minimum 6 and maximum 25 characters " required>
</div>
<div class = "left">
<label for = "confpw"> Confirm password </label><br>
<input type = "password" id = "pw2" required>
</div>
<div class = "clear"> </div>
<input type = "checkbox" id = "checkb" name = "checkb" onclick = "enableButton()" required> I agree to the rules and privacy policy<br><br>
<input type = "checkbox"> I want to recieve updates by mail <br>
<input type = "checkbox"> Subscribe for monthly newsletter <br><br>
<div class = "clear"> </div>
<input type = "submit" id = "btn" value = "sign up">
</fieldset>
</form>
</div>
</html>
You are never calling checkPassword so the code never gets run, if you want to run that code when someone submits your form, you can use the following code.
document.querySelector('form').addEventListener('submit', function (e) {
//Prevent default behaviour
e.preventDefault();
//Check passwords
if (checkPassword()) {
this.submit();
}
});
You are calling the checkPassword function when the sign up button is clicked by user.
So you can't compare pass1 and pass2 when user information is submitted to the server.
In this case, you can solve to catch using JavaScript the event that handle by the sign up button, like this.
document.querySelector('form').addEventListener('submit', function (e) {
//Prevent default behaviour
e.preventDefault();
//Check passwords
if (checkPassword()) {
this.submit();
}
});
And you was wrong in HTML code.
<input type = "submit" id = "btn" value = "sign up">
If I fix your mistake, as allows.
<input type = "submit" id = "btn" value = "sign up">
// or
<button typpe="submit" id="btn"> sign up </button>
Good luck! see you again.
Related
I want to make a program that If I don't enter my ID or password, an alert pops up, and if my password is less than 6 characters, an alert pops up.
When I ran this code, the 'Fill in the blank' and 'Enter the password with at least 6 characters' alerts always appeared even if I type letters in the ID and password boxes. If the condition is false, the alerts should not be displayed, but why does it appear? I don't know what the problem is.
<form action="success.html">
<div class = "my-3">
<input type = "text" class = "form-control" id="id" placeholder="Fill in the blank">
</div>
<div class="my-3">
<input type = "password" class = "form-control" id="pw" placeholder="Enter the password with at least 6 characters">
</div>
<button type = "submit" class = "btn btn-primary">전송</button>
<button type = "button" class = "btn btn-danger" id="close">닫기</button>
</form>
<script>
var Text1 = $('#id').val();
var Password1 = $('#pw').val();
var passwordLength = $('#pw').val().length;
$('form').on('submit', function() {
if ( Text1 == '' || Password1 == '') {
alert('Fill in the blank')
}
if (passwordLength < 6){
alert('Enter the password with at least 6 characters')
}
}
)
</script>
always declare variables inside the function, and don't forget to add a return statement inside the IF statement to stop the function if certain validation is met. Hope this is what you expect.
$('form').on('submit', function() {
//Declare variables inside function
var Text1 = $('#id').val();
var Password1 = $('#pw').val();
var passwordLength = $('#pw').val().length;
if (Text1 == '' || Password1 == '') {
alert('Fill in the blank');
return false;//use return statement
}
if (passwordLength < 6){
alert("Enter the password with at least 6 characters");
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="success.html">
<div class = "my-3">
<input type = "text" class = "form-control" id="id" placeholder="Fill in the blank">
</div>
<div class="my-3">
<input type = "password" class = "form-control" id="pw" placeholder="Enter the password with at least 6 characters">
</div>
<button type = "submit" class = "btn btn-primary">전송</button>
<button type = "button" class = "btn btn-danger" id="close">닫기</button>
</form>
I am trying to push data from a form into an array. I have refresh disabled to allow console.log to show data sets. not sure what I am doing wrong here in my javascript file.
EDIT: ADDING MY VALIDATION CODE FOR CLARIFICATION
class Validate{
constructor(){
console.log("Validate started")
this.formData = [];
document.querySelector("#addbtn").addEventListener("click", e=>this.onClick(e));
}
onClick(e){
const data = document.querySelectorAll("input");
if(this.validateForm(data)){
e.preventDefault();
data.forEach(e=>{
this.formData.push(e.value);
})
} else{
console.log("form not valid");
}
}
validateForm(formData){
let validate = true;
formData.forEach(e=>{
if(!e.checkValidity())
{
validate = false;
}
})
return validate
}
}
(()=>{
const validation = new Validate
})();
class Hero{
constructor(name,email,fanyears,reason){
this.name = name;
this.email = email;
this.fanyears = fanyears;
this.reason = reason;
this.totalfanyears = Utility.calculateyears(this.fanyears);
// this.total = total;
}
}
class Main{
constructor(){
this.listOfHeroes = [];
document.querySelector("#addbtn").addEventListener("click",(e)=>this.add(e));
document.querySelector("#displaybtn").addEventListener("click",(e)=>this.display(e));
}
add(e){
// get data from form
// create a hero from data
// put that hero in the hero array
let name = document.querySelector("#name").value;
let email = document.querySelector("#email").value;
let fanyears = Number(document.querySelector("#fanyears").value);
let reason = document.querySelector("#reason").value;
let hero = new Hero(name,email,fanyears,reason,totalfanyears);
this.listOfHeroes.push(hero);
}
display(e){
for(let i=0; i<this.listOfHeroes.length;i++){
//inner html would go here to put onto web page
console.log(this.listOfHeroes)
}
}
}
(()=>{
const main = new Main();
})();
I will also add my HTML form container code here below :
<div class="flexbox-container">
<div class = "main">
<form id = "heroForm">
<h3> Super Hero Form </h3>
<label for="name">
Name:
<input name="name"id="name" placeholder="Hero name" type ="text" required>
</label>
<label for="email">
Email:
<input name="email" id="email" placeholder="Email Address" type ="email" required>
</label>
<label for="fanyears">
what year did you become a fan?
<input name="fanyears"id="fanyears" placeholder="Amount" type ="number" min=1938 max=2022 step=1 required>
</label>
<label for="reason">
Your reason?
<input name="reason" id="reason" placeholder="Enter info" type ="text" required>
</label>
<button type="submit" id="addbtn">Add hero</button>
<button type="button" id="displaybtn">Display All</button>
</form>
<p id ="message" style = opacity:0>Hero added</p>
</div>
<article class="main">
<h3> Display Results </h3>
<p>
</p>
</article>
</div>
Very confused on how to resolve this or where I am messing up. I have validation that works just fine without this and able to register proper values. regardless of the accuracy of validation not able to retain data and push into the array.
When i do it through my validation fields queryselectorall it works fine pushing into the array.
I am in the middle of making a one use login using javascript to create if else statements to see if the input from my html form matches the correct username and login. i haven't been able to find out what the problem is but something is keeping it from loading the link i have it set to open when you use the correct login or even the wrong password text.
KEYNOTE : most of my code is from w3schools
</div> <!-- /container -->
<div align="center" class = "container">
<form class = "form-signin" role = "form" id ="LoginF"
action ="" method="post"
<h4> </h4>
<input type = "text" class = "form-control"
name = "username" id ="username" placeholder = "username = Johnny Appleseed"
required autofocus color="#00DD19"><br>
<input type = "password" class = "form-control"
name = "password" id="password" placeholder = "password = Yum #pple$" required>
<br><button class = "btn btn-lg btn-primary btn-block" type = "submit"
name = "login" id = "login" onclick="myFunction()">Login</button>
<script>
function myFunction() {
String username =
document.getElementById("username");
String password =
document.getElementById("password");
String Cusername = "TeacherLogin";
String Cpassword = "Hapke";
String Wrong = "Wrong user name or password";
if (username = Cusername){
if (password = Cpassword){
window.open("https://mail.google.com/mail/");
}else {System.out.print(Wrong);}
}else{System.out.print(Wrong);}
}
</script>
Your mixing JavaScript and Java together, which are completely different. Found out that you're using Java to declare your variables, redirect and print to console. Instead, change all this String variable_name = "string here"; occurrent in your code to var variable_name = "string here";, and replace System.out.print(Wrong); with console.log(Wrong);.
Note: You don't specify the data type in JavaScript. JavaScript determines the data type of a variable by examining the type of value you assign.
Update the portion of your code with this code below:
<form class="form-signin" role="form" id="LoginF" action="" method="post" onsubmit="return processForm(event);">
<input type="text" class="form-control" name="username" id="username" placeholder="Username = Johnny Appleseed" required autofocus color="#00DD19"><br>
<input type="password" class="form-control" name="password" id="password" placeholder="Password = Yum #pple$" required>
<br><button class="btn btn-lg btn-primary btn-block" type="submit" name="login" id="login" onclick=>Login</button>
</form><br><br><br><br>
<script>
function processForm(e){
e.preventDefault(); //stop the form from submitting to server
var username =
document.getElementById("username").value;
var password =
document.getElementById("password").value;
var Cusername = "TeacherLogin";
var Cpassword = "Hapke";
var Wrong = "Wrong user name or password";
if (username == Cusername && password == Cpassword) {
window.location.href = "https://mail.google.com/mail/";
} else {
console.log(Wrong);
}
}
</script>
Link to JSFiddle test.
just to get an idea...
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps
const
UserName = document.getElementById("user-name"),
UserPassword = document.getElementById("user-password"),
GoodUserName = 'TeacherLogin',
GoodPassword = 'Hapke'
;
document.getElementById("bt-login").onclick = function()
{
if (UserName.value===GoodUserName && UserPassword.value===GoodPassword ) {
window.location.href("https://mail.google.com/mail/");
}
else {
alert('Java language is not JavaScript language');
}
}
<input id="user-name" type="text" placeholder="username = Johnny Appleseed" />
<input id="user-password" type="password" placeholder="password = Yum #pple$" />
<button id="bt-login" >Login</button>
PS:
KEYNOTE : most of my code is from w3schools.
sound very wrong
When I click the submit button in my signup form the JavaScript function is not invoked but when I try a online editor its working fine but not in my Pycharm IDE with firefox browser. When I submit the form it submits when I have an input field unfilled which can be found by my JavaScript function 'emp_details' but its not happening.
My signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee Details</title>
<script type="text/javascript">
function emp_details(){
var id = document.forms["form2"]['id'].value;
var fname = document.forms["form2"]["fname"].value;
var lname = document.forms["form2"]["lname"].value;
var Password = document.forms["form2"]['password'].value;
var designation = document.forms["form2"]['designation'].value;
var experience = document.forms["form2"]['experience'].value;
window.alert("fname");
var alphaExp = /^[a-zA-Z]+$/;
var pass = /^[a-zA-Z0-9#$#]{8,15}$/;
if(!id ||!fname || !lname ||!Password ||!designation ||!experience)
{
alert("Please enter all the fields");
return false;
}
else
{
if(!isNaN(id))
{
if(fname.match(alphaExp))
{
if(lname.match(alphaExp))
{
if(Password.match(pass))
{
/*var values = Sijax.getFormValues("#form2");
alert(values);
Sijax.request('submit',[values]);*/
return true;
}
else
{alert("Enter a valid password ");
return false;
}
}
else
{
alert("Enter a valid last name");
return false;
}
}
else
{
alert("Enter a valid first name");
return false;
}
}
else
{
alert("ID must be in Numbers");
return false;
}
}
}
</script>
<style>
label {
display: inline-block;
width: 140px;
text-align: right;
}
label,input,select{
margin-left:40px;
}
</style>
</head>
<body style="font-family: Liberation Sans">
<div style="padding-left:5%;padding-top:0.2%;height:1%;width:100%;background-color:#11557c">
<h2>Welcome to my site</h2><br>
</div>
<div style="margin-left:15%" >
<form name="form2" id="form2" method="post" action = "http://127.0.0.1:2908/signup" >
<br><br><br>
<label id = "id">ID</label> <input type="text" name = "id" placeholder = "ID" style = "padding-left: 0.2%;"><br><br>
<label id = "fname">First Name</label> <input type="text" name = "fname" placeholder = "First Name" style = "padding-left: 0.2%;"><br><br>
<label id = "lname">Last Name</label> <input type="text" name = "lname" placeholder = "Last Name" style = "padding-left: 0.2%;"><br><br>
<label id = "password">Password</label>
<input type="password" name = "password" placeholder = "Password" style = "padding-left: 0.2%;"><br><br>
<label id = "department">Department</label>
<select name="department">
<option value="Ecategory"> Category </option>
<option value="Developer Team"> Developer Team</option>
<option value="Testing Team"> Testing Team</option>
<option value="Network Team"> Network Team</option>
<option value="Server Maintance Team"> Server Maintance Team</option>
</select><br><br>
<label id = "designation">Designation</label>
<input type="text" name = "designation" placeholder = "Designation" style = "padding-left: 0.2%;"><br><br>
<label id = "experience">Experience</label>
<input type="text" name = "experience" placeholder = "Experience" style = "padding-left: 0.2%;"><br><br>
<label id = "emp_type">Admin</label>
<input type="radio" id = "r1" value="Yes" name="emp_type" ><span>Yes</span>
<input type="radio" id = " r2" value="No" name="emp_type"checked="checked"><span>No</span>
<br><br><br>
<input type="submit" value="Submit" onsubmit="return emp_details()" style="font-size:15pt;color:white;background-color: #3f51b5;border:2px solid ;padding:7px;padding-left:100px;padding-right:100px">
</form></div>
</body>
</html>
The onsubmit attribute should be on the form tag, not on your submit button. Quoted from MDN:
The submit event is fired when a form is submitted.
Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)
<form name="form2" id="form2" method="post" action="http://127.0.0.1:2908/signup"
onsubmit="return emp_details()">
<!--- .... --->
<input type="submit" value="Submit">
</form>
I created a jQuery external file confirmPassword.js which contain keyboard event but when I'm trying to import in my html file my external js file won't work. But when I create jQuery script under html file it work. I'm just trying to save some line of codes.
<!doctype html>
<html>
<head>
</head>
<body>
<div id = "container">
<h1>Register</h1>
<hr>
<form method = "post" action = "../process/registerProcess.php" >
<fieldset>
<div class = "form-field">
<label for = "username">Username:</label>
<input type = "text" name = "username" required>
</div>
<div class="form-field">
<label for = "userPassword">Password:</label>
<input type="password" id="userPassword">
</div>
<div class="form-field">
<label for = "userConfirmPassword">Confirm Password:</label>
<input type="password" id="userConfirmPassword" onChange="checkPasswordMatch();">
</div>
<div class="registrationFormAlert" id="divCheckPasswordMatch"> </div>
<div class = "form-field">
<input type = "submit" name = "registerSubmit" value = "Register">
</div>
<div class = "form-field">
<input type = "reset" name = "registerReset" value = "Reset">
</div>
</fieldset>
</form>
</div>
<script type = "text/javascript" src = "jQuery Compressed/jquery.js"></script> //jQuery Compressed
<script type = "text/javascript" src = "register/confirmPassword.js"></script>
</body>
</html>
confirmPassword.js
function checkPasswordMatch()
{
var password = $("#userPassword").val(); //Grab the value of userPassword.
var confirmPassword = $("#userConfirmPassword").val();
if (password != confirmPassword)
{
$("#divCheckPasswordMatch").html("Passwords do not match!");
}
else
{
$("#divCheckPasswordMatch").html("Passwords match.");
}
}
$(document).ready(function ()
{
$("#userConfirmPassword").keyup(checkPasswordMatch);
});
If I understood you correctly, you are saying your confirmPassword.js file doesn't work without jQuery, right?
You are using jQuery in your confirmPassword.js file, so you have to have jQuery imported.
EDIT: Found the problem after private chat. The paths to JS files were incorrect.