We Keep Coding

Error message will not display after changing the type for a button in form

So I am trying to add validation to a form. Initially, for the button, I had the type as submit, but when I would click on the button the error message for an empty name input would display briefly. I did some research and saw that in order to get the error message to display longer, I needed to change the type to button, which I did. Now, no error messages are showing. I checked the console and there are no errors displaying. Can someone tell me why this is happening and how to fix it?
function printError(elemId, message) {
document.getElementById(elemId).innerHTML = message;
}
function validateForm() {
var name = document.regForm.FullName.value;
var nameError = true;
if (name == "") {
printError("nameError", "Please enter your name")
}
};
.error {
color: red;
font-size: 90%;
}
<div class="container">
<form name="regForm" class="form" onsubmit="return validateForm()">
<fieldset>
<div class="row">
<label>Full Name</label></br>
<input name="FullName" type="text" placeholder="John Doe" id="FullName" />
<div class="error" id="nameError"></div>
</div>
<div class="row">
<label>Email</label></br>
<input name="email" type="email" placeholder="johndoe#email.com" id="Email" />
<div class="error" id="emailError"></div>
</div>
<div class="row">
<label>Phone Number</label></br>
<input name="phone" type="tel" placeholder="(123) 456-7890" id="PhoneNumber" />
</div>
<div class="row">
<label>Password</label></br>
<input name="Password" id="Password" type="Password" placeholder="Password" onchange='passConfirm();' />
</div>
<div class="row">
<label>Confirm Password</label></br>
<input name="ConfirmPassword" id="ConfirmPassword" type="Password" placeholder="Confirm Password" onchange='passConfirm();' />
</div>
<span id="Message"></span>
<button type="button" value="submit">Sign Me Up!</button>
</fieldset>
</form>
</div>

When the button type is submit the form gets submitted automatically and the function called validation is executed. But when you change the type to button the function will not be called. You have to add click event listener to the sign me up button to call the validate function.
jsFiddle

Form do not submit even when function is true

I made the following code, but it prevents form submission in both cases.
$(document).ready(function() {
$('#password_result_success').hide();
$('#password_result_error').hide();
$('#current_password_blank').hide();
$('#confirm_new_password').blur(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$('#current_password_blank').show();
// Prevent form submission
//event.preventDefault();
$('form#form_change_password').submit(function(e) {
e.preventDefault();
});
} else {
$('#current_password_blank').hide();
}
if ($('#new_password').val() != $('#confirm_new_password').val()) {
//alert("Password and Confirm Password don't match");
//$('#password_result').html('<i class="fa fa-exclamation-circle"></i>');
$('#password_result_success').hide();
$('#password_result_error').show();
// Prevent form submission
$('form#form_change_password').submit(function(e) {
e.preventDefault();
});
} else {
$('#password_result_error').hide();
$('#password_result_success').show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
<h1>change password</h1>
<form action="post.php" id="form_change_password">
<div class="form-group">
<input type="password" class="form-control" id="current_password" placeholder="current password">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
<div class="form-group">
<label for="new_password">new password</label>
<input type="password" class="form-control" id="new_password" placeholder="New Password">
</div>
<div class="form-group">
<label for="confirm_new_password">confirm new password</label>
<input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
</div>
<div id="password_result_success" class="alert-success"><i class="fa fa-check"></i> password match</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> password do not match</div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-default">Change Password</button>
</div>
</form>
</div>
The complete validation I will make in PHP, but I would like to check via jQuery first, before making an AJAX call to PHP validation. The problem is that my script prevents the form submission even when it returns true.

You are setting your submit handler inside your blur handler, this means that any time that code is triggered a new handler will be set. It's not conditional execution, it will fire even when calling submit outside that block. You can inspect the bound listeners in your browser to check that once you hit that code, the listener remains after the execution.
You can rely on the visibility of your validation containers to determine if you should prevent submission or not. You could also use other techniques, like adding a has-error class to your form or data-* attributes, but the idea remains the same.
$(document).ready(function() {
// Cache selectors to make them a bit shorter and more performant
$pwd_success = $('#password_result_success').hide();
$pwd_error = $('#password_result_error').hide();
$pwd_blank = $('#current_password_blank').hide();
$('#confirm_new_password').blur(function(event) {
data = $('#current_password').val();
var len = data.length;
if (len < 1) {
//alert("Password cannot be blank");
$pwd_blank.show();
} else {
$pwd_blank.hide();
}
if ($('#new_password').val() != $('#confirm_new_password').val()) {
$pwd_success.hide();
$pwd_error.show();
} else {
$pwd_error.hide();
$pwd_success.show();
}
});
// Attach listener globally (and only once)
$('form#form_change_password').submit(function(e) {
if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
// Prevent submission if there's an error
e.preventDefault();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
<h1>change password</h1>
<form action="post.php" id="form_change_password">
<div class="form-group">
<input type="password" class="form-control" id="current_password" placeholder="current password">
</div>
<div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
<div class="form-group">
<label for="new_password">new password</label>
<input type="password" class="form-control" id="new_password" placeholder="New Password">
</div>
<div class="form-group">
<label for="confirm_new_password">confirm new password</label>
<input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
</div>
<div id="password_result_success" class="alert-success"><i class="fa fa-check"></i> password match</div>
<div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i> password do not match</div>
<div class="text-center">
<button type="submit" id="change_password" class="btn btn-default">Change Password</button>
</div>
</form>
</div>

JavaScript: show password on hold

I have 2 inputs for passwords. Each input field has 'show' button, which shows password on holding that button.
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
Here is what I have
$(".form-control").on("keyup",function(){
if ($(this).val())
$(".show").show();
else
$(".show").hide();
});
$(".show").mousedown(function(){
$(".form-control").attr('type','text');
}).mouseup(function(){
$(".form-control").attr('type','password');
}).mouseout(function(){
$(".form-control").attr('type','password');
});
Problem
When I click to 'show' button, both input fields are shown. How to make sure that only corresponding password is shown?

When you use $(".form-control"), jquery select all .form-control element. But you need to select target element using this variable in event function and use .prev() to select previous element.
$(".show").mousedown(function(){
$(this).prev().attr('type','text');
}).mouseup(function(){
$(this).prev().attr('type','password');
}).mouseout(function(){
$(this).prev().attr('type','password');
});

Just target the previous input instead of all inputs with the given class
$(".form-control").on("keyup", function() {
if ($(this).val())
$(this).next(".show").show();
else
$(this).next(".show").hide();
}).trigger('keyup');
$(".show").mousedown(function() {
$(this).prev(".form-control").prop('type', 'text');
}).mouseup(function() {
$(this).prev(".form-control").prop('type', 'password');
}).mouseout(function() {
$(this).prev(".form-control").prop('type', 'password');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="resetting_form" method="post" action="">
<div class="form-group has-feedback">
<input type="password" id="password_first" required="required" placeholder="New Password" class="form-control">
<span class="show">show</span>
</div>
<div class="form-group has-feedback">
<input type="password" id="password_second" required="required" placeholder="Repeat Password" class="form-control">
<span class="show">show</span>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>

In react We simply do with
We probably need to use the onMouseDown and onMouseUp, onMouseOut events
onMouseDown={handleShowPassword}
onMouseUp={handleShowPassword}
onMouseOut={handleShowPasswordHideOnMouseOut}

Password confirmation validation not showing as intended

This is an extension of the the question I had asked earlier today (it's still unsolved, any help is very much appreciated). I have seen a lot of questions regarding this on stack overflow, and my code is based on something I found on a tutorial website.
I have 2 password forms which I wish to validate. I just want to submit it if they match. Here's my code-
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> <em class="glyphicon glyphicon-circle-arrow-right"> </em> </button>
</span>
</div>
</li>
My javascript-
$(document).ready(function () {
$('#pw-btn').click( function() {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2)
{
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
}
else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
}
);
});
I am expecting an HTML5 validation form which tells me the passwords dont match, something like this. Nothing happens however.
Is there a mistake in my approach to custom validation? Thank you in advance all, very grateful for the help and advise.
ANSWER
I used the following code to get this working. It was a modification of the submitted answers. Thanks for all the help guys!
HTML:
<form action="#" id="f" method="post">
<li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control new-pw" placeholder="Enter a new password" id="new-pw" required pattern="(?=.*\d)(.{6,})" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control cnfrm-pw" required placeholder="Confirm new password" />
<span class="input-group-btn">
<button class="btn btn-primary" type="submit" id="pw-btn"> </button>
</span>
</div>
</li>
</form>
JS
$(document).ready(function () { //This confirms if the 2 passwords match
$('#f').on('keyup', '.cnfrm-pw', function (e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("The passwords don't match"); //The document.getElementById("cnfrm-pw") selects the id, not the value
}
else {
document.getElementById("cnfrm-pw").setCustomValidity("");
//empty string means no validation error
}
e.preventDefault(); //would still work if this wasn't present
}
);
});

.setCustomValidity tooltip will trigger only when the form is submitting.
Javascript
$(document).ready(function() {
$('#f').submit(function(e) {
var pwd1 = document.getElementById("new-pw").value;
var pwd2 = document.getElementById("cnfrm-pw").value;
if (pwd1 != pwd2) {
document.getElementById("cnfrm-pw").setCustomValidity("Passwords Don't Match");
} else {
document.getElementById("cnfrm-pw").setCustomValidity('');
//empty string means no validation error
}
e.preventDefault();
}
);
});
HTML
<form action="#" id="f"><li>
<div class="input-group col-xs-5 pw">
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" />
</div>
</li>
<li>
<div class="input-group col-xs-5">
<input type="password" name="cnfrm-pw" id="cnfrm-pw" class="form-control" placeholder="Confirm new password" />
<span class="input-group-btn">
<input type="submit" />
</span>
</div>
</li>
</form>
Have a look:
http://codepen.io/anon/pen/WwQBZy

I believe you're missing required attribute:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" required />
Notice the required at the end.
Also, if you want to set a minimum:
<input type="password" name="pw" class="form-control" placeholder="Enter a new password" id="new-pw" pattern=".{5,}" title="Minmimum 5 letters or numbers." required />
As for the submitting the form, when the validation passes, you could submit the form using submit() function available in the Web API. You can read about it here.

Why is my form validation not working (onsubmit not triggering)?

I am writing a simple registration screen that allows a user to input their email address and password. As standard, I have the user inputting their email address and password twice to confirm. However, the onsubmit attribute on my form does not seem to be executing.
Here is the code:
Fields
<form name="form" id="form" action="" onsubmit="return validateForm()" class="form col-md-12 center-block" method="POST">
<div class="form-group">
<input type="text" class="form-control input-lg" name="name" id="name" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="email" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<input type="text" class="form-control input-lg" name="cemail" id="cemail" placeholder="Confirm Email Address">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="password" id="password" placeholder="Password">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="cpassword" id="cpassword" placeholder="Confirm Password">
</div>
<div class="form-group">
<button class="btn btn-primary btn-lg btn-block" form="form" type="submit" name="register" id="register">Register</button>
<span class="pull-right">Login</span><br>
</div>
</form>
JavaScript
<script>
function validateForm() {
if (isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
} else {
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
function isSame(elementA, elementB) {
if (elementA.value.trim() == elementB.value.trim()) return true;
else return false;
}
//ignore this
function submitForm() {
document.getElementById("form").submit();
}
</script>
I have tried to debug as much as possible, but it doesn't seem like my submit button is triggering the form's onsubmit. I have viewed the request log, and it is posting the data just fine, however.
Thank you in advance!

The indentation of your code is incorrect: you are missing a } at the end of your validateForm function

There's a syntax error; there's no closing bracket for the first function.
Also, your isSame function doesn't need an if statement.
Hopefully this helps:
JS:
function validateForm() {
if(isSame(document.getElementById("email"), document.getElementById("cemail"))
&& isSame(document.getElementById("password"), document.getElementById("cpassword"))) {
return true;
}else{
alert("Confirmation fields do not match, please retype and try again.");
return false;
}
}
function isSame(elementA, elementB) {
return elementA.value.trim() == elementB.value.trim();
}