Develop Reference

Client Side Form Validation not happening + can't edit form elements

I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}

I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:
$(document).ready(function() {
$("#reg-form").submit(function(e) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
console.log(true);
return true
} else {
e.preventDefault();
$error.text("Passwords don't match");
}
})
})
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
</div>

Prevent form from submitting until validation

I am making form and I have some problems validating it.
HTML:
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
Javascript:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
return false;
});
</script>
Even with this javascript code added the form still submits to signup.php.
And should I add extre checks in php aswell.

//add return function on it
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email">
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass">
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass">
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name">
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name">
</div>
</div>
</div>
<div class="col-md-12">
<input type="button" onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>
<script>
public function validation(){
if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
return false; }
else {
document.getElementById("regForm").submit();
}
}
</script>
or use this
//add required on input it will automatically return message
<form id="regForm" class="form-group" method="POST" action="signup.php">
<div class="col-md-12">
<h2>Job Pocket</h2>
</div>
<div class="col-md-12">
<input placeholder="email" class="form-control"type="text" name="email" id="email" required>
</div>
<div class="col-md-12">
<input placeholder="password" class="form-control" type="password" name="password" id="pass" required>
</div>
<div class="col-md-12">
<input placeholder="confirm password" class="form-control" type="password" name="confirmpass" id="confirmpass" required>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<input placeholder="first name" class="form-control" type="text" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
</div>
<hr>
</form>

Replace your code with this
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")

You should only add "required" in the html tag in tags. It'll automatically add display text that the field is required.
Like this:
<input placeholder="last name" class="form-control" type="text" name="last_name" id="last_name" required>

You forgot to add .value to check the values of inputs. Also, you have to use preventDefault in submit function to prevent form submission:
<script type="text/javascript">
$("#regForm").submit(function(event){
if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
event.preventDefault();
});
</script>
Since you're using jquery, you can also use its selector:
<script type="text/javascript">
$("#regForm").submit(function(event){
if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
event.preventDefault();
});
</script>

what about using event.preventDefault() like this:
<script type="text/javascript">
$("#regForm").submit(function(event){
event.preventDefault();
if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
return false;
});
</script>

add a class to parent element based on child class - inside of a submit event

Trying to target only parent divs that have child with class="has-error"
I'm using the following, but scope inside of conditional is referring to #pdf-form. Please advise how to fix.
JS:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error")) {
$(this).parent().addClass('has-error');
}
event.preventDefault();
});
HTML:
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

It's still unclear exactly what you are looking for. I suspect your initial setup is not quite correct, but this should give you an idea of how to access the parent elements that contain error controls.
It won't work here in the Stack Overflow snippet environment, because they disable submit events, but you can see it working here. I added an additional class to illustrate what is getting selected when you click submit.
$( "#pdf-form" ).submit(function( event ) {
var $errorElements = $(".form-control.has-error");
$errorElements.parent().addClass('added-error');
// If there are error elements, don't submit the form
$errorElements.length > 0 ? event.preventDefault() : "";
});
.has-error { background:red; }
.added-error { border:2px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://example.com" accept-charset="utf-8" id="pdf-form" enctype="multipart/form-data" method="post" novalidate="novalidate">
<div style="display:none">
<input type="hidden" name="params_id" value="363">
<input type="hidden" name="csrf_token" value="668186205c07bd680af53ba2f5f05ca78143a43d">
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="text" name="email" value="" id="freeform_email" maxlength="150" class="form-control has-error" required="" aria-required="true" aria-describedby="freeform_email-error" aria-invalid="true">
<div id="freeform_email-error" class="has-error">Please Enter a Valid Email Address</div>
</div>
<div class="form-group">
<label for="first_name" class="control-label">Name</label>
<div class="row">
<div class="col-sm-6">
<input type="text" name="first_name" value="" id="freeform_first_name" maxlength="150" class="form-control" placeholder="Your first name">
</div>
<div class="clearfix visible-xs" style="height: 10px;"></div>
<div class="col-sm-6">
<input type="text" name="last_name" value="" id="last_name" maxlength="150" class="form-control" placeholder="Your last name">
</div>
</div>
</div>
<div class="form-group hidden">
<label class="control-label">report</label>
<input type="file" name="report[0]" value="" id="freeform_report0">
</div>
<input type="hidden" name="pdf_press_entries" value="77|8">
<input type="hidden" name="pdf_press_template" value="site/email_pdf_report">
<input type="hidden" name="pdf_press_upload_fieldname" value="report">
<input type="hidden" name="pdf_press_filename_fieldname" value="report_filename">
<p><input type="submit" name="submit" value="Submit" class="btn btn-primary"></p>
</form>

To cancel the submit it appears, based on your example, that you need to detect if any form-control elements have the has-error class. Then, to set the has-error on the class on the parents of those form-control elements you need to use the .each() approach instead of the if you have tried.
Something like this:
$( "#pdf-form" ).submit(function( event ) {
if ($(".form-control").hasClass("has-error").length > 0){
event.preventDefault();
}
$(".form-control").hasClass("has-error").each(function() {
$(this).parent().addClass('has-error');
}
});

JavaScript password and password confirmation match

I am not able to match the passwords, before Submit is clicked.
The submit goes even if the passwords are different.
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword(){
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>
It seems like I miss something, but I am not able to find it whole day already - any thoughts will be appreciated!

The validate should return the validation status and the form's onsubmit event handler should be able to react. Here's the sample:
var pass1 = document.getElementById('userPassword');
var pass2 = document.getElementById('userRepeatPassword');
function validatePassword() {
var status = false;
if (pass2.value == pass1.value) {
status = true;
pass2.setCustomValidity('');
} else {
pass2.setCustomValidity('Both passwords do not match');
}
return status;
}
pass1.addEventListener('change', validatePassword);
pass2.addEventListener('keyup', validatePassword);
<form method="POST" action="login.php" onsubmit="return validatePassword();">
<div class="form-group">
<label for="inputFirstName">First name:</label>
<input type="text" class="form-control" name="firstName" id="inputFirstName" required>
</div>
<div class="form-group">
<label for="inputLastName">Last name:</label>
<input type="text" class="form-control" name="lastName" id="inputLastName" required>
</div>
<div class="form-group">
<label for="inputEmail">Email address:</label>
<input type="email" class="form-control" name="email" id="inputEmail" required>
</div>
<div class="form-group">
<label for="inputPassword">Password:</label>
<input type="password" class="form-control" name="userPassword" id="userPassword" required>
</div>
<div class="form-group">
<label for="inputRepeatPassword">Password repeat:</label>
<input type="password" class="form-control" name="userRepeatPassword" id="userRepeatPassword" required>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
</div>
</form>

You have code to display if the passwords are the same or not. However, there is not any code to control how to handle submit with invalid passwords.
Here are two options:
1) <form onSubmit> as described in Pankaj's answer.
2) You could also have your validate function disable your submit button.
(Add an id to your submit <button type="submit" id=submitBtn class="btn btn-primary btn-block" style="background-color: #c2c2c2; color: black; font-weight: bold;">Submit</button>
function validatePassword(){
var submit = document.getElementById('submitBtn');
if (pass2.value == pass1.value) {
pass2.setCustomValidity('');
submit.disabled = false;
} else {
pass2.setCustomValidity('Both passwords do not match');
submit.disabled = true;
}
}

The had to be put in the bottom before the in order to work.

How to submit a form using jQuery?

I want to submit a form using jQuery, so I have 4 fields that needed to be checked, but when I submit, it displays the first alert submit but i doesn't check if the fields are valid or not. What's the error in my code? Much appreciated.
$(document).ready(function(){
$('input[name=subdomain]').keyup(subdomain_check);
$('input[name=password]').keyup(password_strenght);
$('input[name=c_password]').keyup(password_check);
$('input[name=email]').keyup(email_check);
$('#install').on('submit', function(){
alert("submit");
if ($('input[name=subdomain]').valid() == true && $('input[name=password]').valid() == true && $('input[name=c_password]').valid() == true && $('input[name=email]').valid() == true){
alert("TRUE");
return true;
} else {
alert("FALSE");
return false;
}
});
});
Here's The HTML form :
<form class="form-horizontal" method="post" id="install" action="etape2.html" role="form">
<input type="hidden" id="install-element-0" value="install" name="form">
<input type="hidden" id="install-element-1" value="insert" name="action">
<div class="col-md-6">
<input type="text" id="install-element-2" required="" name="title" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-3" required="" name="first_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-4" required="" name="last_name" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="text" id="install-element-5" required="" name="email" class="form-control input-md col-md-6">
</div>
<div class="col-md-6">
<input type="password" id="install-element-6" required="" class="form-control input-md col-md-6" name="password">
</div>
<div class="col-md-6">
<input type="password" id="install-element-7" required="" class="form-control input-md col-md-6" name="c_password">
</div>
<div class="col-md-6"><input type="text" required="" placeholder="" id="subdomain" name="subdomain" class="form-control input-md col-md-6">
<div class="form-actions col-md-9 col-md-offset-3 text-right">
<input type="submit" id="install-element-9" class="btn btn-primary" name=""value="Valider">
</div>
</div>
</form>
Is there a way to check by the functions return and not by validate ?

Add:
$('#install').on('submit', function(e){
e.preventDefault();
[..]
}
to your code