We Keep Coding

The JavaScript function does not apply to the form and the confirmation button

The JavaScript function does not apply to the form and the Submit button in HTML
The 'js' file is inside another folder
I also did the link to the 'js' file correctly
function check_pass() {
if (document.getElementById('password').value == document.getElementById('passwordconfirm').value) {
document.getElementById('submit').disabled = false;
} else {
document.getElementById('submit').disabled = true;
}
}
<form name="cForm" id="cForm" method="post" action="php/save.php">
<fieldset>
<div class="form-field">
<input name="username" type="text" id="username" class="full-width" placeholder="نام کاربری" value="">
</div>
<div class="form-field">
<input name="email" type="email" id="email" class="full-width" placeholder="ایمیل" value="">
</div>
<div class="form-field">
<input name="password" type="password" id="password" class="full-width" placeholder="پسوورد" value="" onkeyup="check_pass();">
</div>
<div class="form-field">
<input name="passwordconfirm" type="password" id="passwordconfirm" class="full-width" placeholder="تکرار پسوورد" value="" onkeyup="check_pass();">
</div>
<button type="submit" id="submit" class="submit button-primary full-width-on-mobile" disabled>ثبت</button>
</fieldset>
</form>

Trigger Space button using Keypress on Javascript

I created a script for the registration form. In the username field, do not allow uppercase & spaces.
When I run the code below, there are 2 alerts ("Space case true" & "upper case true" ) when I press space on the keyboard. It should display only the alert "Space case true" if I press the space key. And "upper case true" if entered in an uppercase field. All errors in the column will be cleared.
is there something wrong with my code?
document.getElementById("usr").addEventListener("keypress", keyPress);
function keyPress(e) {
if (e.keyCode === 32) {
alert('Space case true');
return document.getElementById("usr").value = "";
}
}
function inputUsername(e) {
var character = document.getElementById("usr").value;
if (character === "") {
document.getElementById("usr").value;
} else if (character === character.toUpperCase() || character !== character.toLowerCase()) {
alert('upper case true');
document.getElementById("usr").value = "";
}
}
<form action="..." method="post">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" value="John">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" value="Doe">
<span class="help-block"><?php echo $last_name_err; ?></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" value="jdoe#doe.com">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Username</label>
<input type="text" id="usr" name="username" class="form-control" value="" oninput="inputUsername()">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" value="">
<span class="help-block"></span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-default" value="Clear">
</div>
<p>Already have an account? Login here.</p>
</form>

jQuery: Adding html elements dynamically using jquery

I want to add some html elements dynamically using jQuery inside a form tag but it is not working .
$(document).ready(function() {
var requirements = 0;
var container = $(document.createElement('div').addClass('form-group'));
$('#add-req').click(function() {
if (requirements <= 15) {
requirements = requirements + 1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post">
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>
when I click add requirement button it should create another div tag and input element inside form element.

Just replace the code $(document.createElement('div').addClass('form-group')); to $(document.createElement('div')).addClass('form-group');

Try the following
We can directly Insert a html element to the targer Element as follow
$(document).ready(function(){
var requirements=0;
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$('#requirement-div').after('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

you mixing between JS and JQuery, where document.createElemet('div') is a JS function while addClass is a JQuery function.
$(document).ready(function(){
var requirements = 0;
var container=$('<div>').addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
container.append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$(this).before(container);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register-form pt-md-4" id="requirement-div">
<form action="#" method="post" >
<div class="styled-input form-group">
<input type="text" class="form-control" placeholder="Your Name" name="Course name" required="">
</div>
<div class="styled-input">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<input type="button" value="add Requirements" id="add-req">
<input type="submit" value="Submit">
</div>
</form>
</div>

Replace the Below Code
<script>
$(document).ready(function(){
var requirements=0;
var container=$(document.createElement('div')).addClass('form-group');
$('#add-req').click(function(){
if(requirements<=15){
requirements=requirements+1;
$(container).append('<input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required="">');
$('#requirement-div').after(container);
}
});
});
</script>

I wrote a script here (Adding html elements dynamically using jquery) that you can test
<form action="#" method="post">
<div class="form-group">
<input type="text" class="form-control test" placeholder="Your Name" name="Course name" required="">
</div>
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Requirement" title="Please enter requirement" required="">
</div>
<div class="styled-input">
<input type="button" class="btn btn-primary" value="Add Requirements" id="add-req">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</form>
JQuery Code
$(function() {
var requirements=0;
$('#add-req').click(function(e){
e.preventDefault();
$('.test').val('Okay');
if(requirements <= 15) {
$('.styled-input').prepend('<div class="form-group"><input type="text" name="name" class="form-control" placeholder="Requirement" title="Enter next requirement" required=""></div>');
requirements++;
} else {
alert('Max requirement has been reached');
}
});
});

Error Message Flashes for a Second Only

I am trying to make a sign up form with javascript validation but the error message only flashes for a second.
I tried searching other similar questions but I couldn't find the answer...
This is my form code
<form method="post" name="signupForm">
<div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
<span id="error"></span>
<div class="form-group" id="inputFirst">
<label for="firstname">First Name:</label>
<input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
</div>
<div class="form-group" id="inputLast">
<label for="lastname">Last Name:</label>
<input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
</div>
<div class="form-group" id="inputEmail">
<label for="signup_email">Email Address:</label>
<input class="form-control" type="email" id="signup_email" name="email" placeholder="example#gmail.com" value="">
</div>
<div class="form-group" id="inputPassword">
<label for="user_password">Password:</label>
<input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
</div>
<button type="submit" onclick="validateForm()" class="btn button">Sign Up</button>
</div>
</form>
And this is my Validation Function
function validateForm() {
var first= document.forms["signupForm"]["firstname"].value;
var last = document.forms["signupForm"]["lastname"].value;
var email= document.forms["signupForm"]["email"].value;
var pass = document.forms["signupForm"]["password"].value;
var msg = "";
var valid= true;
checkname = /[A-z]/;
checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if(!/\w/.test(pass))
{
msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
valid= false;
}
if(!checkemail.test(email))
{
msg="Email address Invalid";
valid= false;
}
if(!checkname.test(first))
{
msg="First and Last Name can only contain alphabets";
valid= false;
}
if(first==="" && last==="" && email==="" && pass==="")
{
msg="Please fill every field given below";
valid= false;
}
document.getElementById("error").innerHTML = msg;
return valid;
}

You should use return validateForm(), this way when the validateForm will return false - it will stop the form from submitting.
function validateForm() {
var first= document.forms["signupForm"]["firstname"].value;
var last = document.forms["signupForm"]["lastname"].value;
var email= document.forms["signupForm"]["email"].value;
var pass = document.forms["signupForm"]["password"].value;
var msg = "";
var valid= true;
debugger;
checkname = /[A-z]/;
checkemail= /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
if(!/\w/.test(pass))
{
msg="Password can only contain [a-z, A-Z, 0-9, _ (underscore)]";
valid= false;
}
if(!checkemail.test(email))
{
msg="Email address Invalid";
valid= false;
}
if(!checkname.test(first))
{
msg="First and Last Name can only contain alphabets";
valid= false;
}
if(first==="" && last==="" && email==="" && pass==="")
{
msg="Please fill every field given below";
valid= false;
}
document.getElementById("error").innerHTML = msg;
return valid;
}
<form method="post" name="signupForm">
<div id="signup-form" class="col-md-12 col-sm-12 col-xs-12">
<span id="error"></span>
<div class="form-group" id="inputFirst">
<label for="firstname">First Name:</label>
<input class="form-control" type="text" name="first_name" id="firstname" placeholder="John" value="">
</div>
<div class="form-group" id="inputLast">
<label for="lastname">Last Name:</label>
<input class="form-control" type="text" name="last_name" id="lastname" placeholder="Doe" value="">
</div>
<div class="form-group" id="inputEmail">
<label for="signup_email">Email Address:</label>
<input class="form-control" type="email" id="signup_email" name="email" placeholder="example#gmail.com" value="">
</div>
<div class="form-group" id="inputPassword">
<label for="user_password">Password:</label>
<input class="form-control" type="password" id="user_password" name="password" placeholder="Create a Password">
</div>
<button type="submit" onclick="return validateForm()" class="btn button">Sign Up</button>
</div>
</form>

Your form is probably still be submitting as you are not stopping the form submission. Your event handler is "onClick" on the submit button. This not necessarily stop the form.
You only see the error message for a split second because the page does a full page reload.
Your validation function should be bound to the "onSubmit" event instead.
<form onsubmit="return validateForm();">

Checking passwords using Javascript in HTML

This is some code for a 'Signup' html page; i'm having trouble getting it to check if the two passwords match though. If they don't match, I need a pop up box to display "try again"; if they do math, the page can continue as normal (The sumbit button goes to the home page of my website).
Thanks!!! I've written a javascript function near the bottom....
<form class="form-horizontal" role="form" method="post" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" onclick="checkPassword()">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<! Will be used to display an alert to the user>
<script>
function checkPassword{
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
var n = var1.localeCompare(var2)
if(n == 0){
return true;
alert("Passwords do not match, please try again!");
}
return false;
}
</script>
</div>
</div>
</form>

Changed your code slightly:
<form class="form-horizontal" role="form" method="post" onsubmit="return checkPassword();" action="index.php">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Create a password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password1" name="password" placeholder="Your Password Here" value="">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Confirm password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password2" name="password" placeholder="Confirm Password" value="">
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input id="submit" name="signup" type="submit" value="Sign Up" class="btn btn-primary" >
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
</div>
</div>
</form>
<script>
function checkPassword(){
var1 = document.getElementById("password1");
var2 = document.getElementById("password2");
if(var1.value != var2.value){
alert("Passwords do not match, please try again!");
return false;
}
else{
return true;
}
}
</script>
Please note your form tag has onsubmit event, which calls your javascript function(not submit button) this way you stop form from being submited if passwords don't match. Also in your javascript function notice how I display alert before returning false and modified code to compare element values not elements. This code is tested and works.

delete onclick="checkPassword()" from submit tag
and in form tag add
onsubmit="return checkPassword()"

var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Also n===0 means, it matches and alert after return statement won't work.

You are comparing the elements, not the values. Get the values from the elements:
var1 = document.getElementById("password1").value;
var2 = document.getElementById("password2").value;
Return false if you want to stop the submission, and show the message before calling return. The localeCompare method returns a non-zero value if the strings are different:
if(n != 0){
alert("Passwords do not match, please try again!");
return false;
}
return true;
Instead of using the click event on the button, use the submit event on the form:
<form class="form-horizontal" role="form" method="post" action="index.php" onsubmit="return checkPassword();">

First switch lines with return and alert.
var pw1 = document.getElementById("password1").value;
var pw2 = document.getElementById("password2").value;
if( pw1 !== pw2 )
{
alert("Passwords do not match, please try again!");
return true;
}
I took the value out of the input elements and compare them with !==. That means, the type of both variables must be equal and the text must also be not equal.