We Keep Coding

Disable submit button when password not match and enable when matched in bootstrap modal

I have a bootstrap modal form for sign up. I want my submit button to be disabled before my password and re-type password are matched. Matched meaning it has to be some input and not empty.
The button should be enabled when matched and disabled again when both fields unmatched again.
I have tried almost all solutions on google and am still stuck for two days.
Here is my form HTML:
<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>
<div class="form-group">
<button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
</div>
Here is my script:
if (document.getElementById('signupModalPassword').value ==
document.getElementById('signupModalPwCheck').value) {
document.getElementById('signupbtn').disabled = false;
} else {
document.getElementById('signupbtn').disabled = true;
}
if(document.getElementById('signupModalPassword').value == 0) {
document.getElementById('signupbtn').disabled = true;
} else {
document.getElementById("signupbtn").disabled = false;
}
Please forgive my messy code as I'm very new to coding.
I'll be so grateful if you could help.

example of code:
// validate on first render
check();
function check() {
const signupModalPassword = document.getElementById('signupModalPassword');
const signupModalPwCheck = document.getElementById('signupModalPwCheck');
if (signupModalPassword.value && signupModalPwCheck.value
&& signupModalPassword.value === signupModalPwCheck.value) {
document.getElementById('signupbtn').disabled = false;
}
else {
document.getElementById('signupbtn').disabled = true;
}
}
<label for="signupModalPassword">Password</label>
<input type="password" class="form-control" name="password" id="signupModalPassword" required="required" onkeyup='check();'>
<p></p>
<label for="signupModalPwCheck">Re-type Password</label>
<input type="password" class="form-control" id="signupModalPwCheck" name="password2" required="required" onkeyup='check();'>
<span id='message'></span>
<p></p>
<div class="form-group">
<button type="submit" id="signupbtn" class="btn btn-lg btn-block login-btn" style="background-color: #fdbf50 !important; color: white !important;">Join Now!</button>
</div>

Change enter to tab on inputs

this is my whole code for a user login in cakephp:
<div class="form-group col-lg-2 col-md-4" id="login-box" style="text-align:center; margin: 100px auto 0 auto;">
<div style="font-size:3em;text-align: center;">
<i class="fas fa-table"></i>
</div>
<div style="text-align: center;font-size: 50px;font-family: 'Tahoma';">
Fatables
</div>
<br>
<div class="header" style="text-align:center"><?php /*echo __('Authenticate');*/?></div>
<br>
<form action="<?php echo $this->Html->url( array('controller'=>'users','action'=>'loginmodal')); ?>" method="post">
<div class="body">
<div class="form-group">
<input type="text" name="username" id="username" class="form-control" placeholder="Username" autofocus/>
</div>
<div class="form-group">
<input type="password" name="password" id="password" class="form-control" placeholder="Password"/>
</div>
</div>
<div class="footer">
<button type="submit" class="btn btn-primary"><?php echo __('Sign In');?></button>
</div>
</form>
<br/>
<p >© Fatables <?php echo date('Y');?></p>
</div>
<script type=“text/javascript”>
$("#username").on("keypress", function(e) {
/* ENTER PRESSED*/
if (e.keyCode == 13) {
/* FOCUS ELEMENT */
var inputs = $(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + 1].focus(); // handles submit buttons
inputs[idx + 1].select();
}
return false;
}
});
</script>
As you can see I'm trying to change ENTER to TAB when pressed on my first input. Thing is we use a barcode scanner and in most cases form data will be filled by scanning so I want for determined inputs to change focus to the next one when enter pressed.
For some reason the above (and many more ways to do it) doesn't work, I don't know already if there's some problem with my syntax, or the selector or the function itself.
I'll appreciate some help over here.

JavaScript validation: return false not working at time of re Enter Password

My javascript validation code are working..
Javascript: My javascript all field return false are working when re-Enter password javascript return false not working
Re Enter password javascript code not working...
its alert showing ...after alert show form goes submit
return false not working...
[Here is js Fiddle][1]
[1]: https://jsfiddle.net/Ln1cmaps/
**HTML**
<div class="container">
<div class="row main">
<div class="main-login main-center">
<h2>Admin Ragistration</h2>
<form class="" method="post" action="" name="signup" onsubmit="return validate()">
<div class="form-group">
<label for="name" class="cols-sm-2 control-label">Your Name</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<label for="username" class="cols-sm-2 control-label">Username</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Username"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter your Password"/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirmpassword" id="confirm" placeholder="Confirm your Password"/>
</div>
</div>
</div>
<div class="form-group ">
<input type="submit" name="submit" value="Register" class="btn btn-primary btn-lg btn-block login-button" />
</div>
</form>
</div>
</div>
</div>
**Javascript validation Code**
function validate() {
var name = document.signup.name.value.length;
var email = document.signup.email.value.length;
var username = document.signup.username.value.length;
var password = document.signup.password.value;
var rpass = document.signup.confirmpassword.value;
var re =(/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]{8,16}$/);
if(name=="") {
alert("Please Enter Your Name");
document.signup.name.focus();
return false;
}
if(name<3) {
alert("Please Enter Your Correct Name");
document.signup.name.focus();
return false;
}
if(email=="") {
alert("Please Enter email");
document.signup.email.focus();
return false;
}
if(email<3) {
alert("Please Enter Your Correct email");
document.signup.email.focus();
return false;
}
if(username=="") {
alert("Please Enter Username");
document.signup.username.focus();
return false;
}
if(username<5) {
alert("Please Enter Username at least 5 digit");
document.signup.username.focus();
return false;
}
if(password=="") {
alert("Please Enter Your password");
document.signup.password.focus();
return false;
}
if(!re.test(password)) {
alert("Error: Password Must Contain Atleast One Number,One Special Character & One Upper Case");
document.signup.password.focus();
return false;
}
if(rpass =="") {
alert("Please Enter Your Password Again");
document.signup.rpass.focus();
return false;
}
if(rpass != password) {
alert("Password does'nt Matched");
document.signup.rpass.focus();
return false;
}
else {
return true;
}
}

document.signup.rpass.focus();
This is wrong, rpass field is not present. You should write
document.signup.confirmpassword.focus();
https://jsfiddle.net/vineeshmp/Ln1cmaps/1/

Give event.preventDefault(); at starting of your javascript function.

I think you need to change
else {
return true;
}
to a simple
return true;
Your else currently only applies to that last if. You don't need to use an else if you return false on all cases you need to consider.
In other words: if you first check all possibilities for a not valid case, then you can safely return true at the end.

replace your var re with below code : No need to include parentheses
Your code
var re = (/^(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{8,16}$/);
Updated code
var re = /^(?=.[A-Z])(?=.[a-z])(?=.[0-9])(?=.[!##$%^&])[a-zA-Z0-9!##$%^&]{8,16}$/;

Focus event not working in HTML form

My HTML code is
<body>
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>
<script>
function search() {
var Tab = document.getElementById("Tab").value;
alert(Tab);
var Eamillogin = document.getElementById("UEmailLogin").value;
if (Eamillogin == "") {
alert("please enter email");
Eamillogin.focus();
}
}
</script>
</body>
When I click on submit button, JavaScript alert shows "please enter email". It works fine. But Eamillogin.focus(); not working. After showing alert, the form automatically direct to test1.php page.Pointer not focus on Email. How to correct it?

Eamillogin variable contains the value of the #UEmailLogin element.
To set the focus on the element, use element.focus();
Here's updated code
var Eamillogin = document.getElementById("UEmailLogin"); // Removed .value from here
if (Eamillogin.value === "") { // Added .value here
alert("please enter email");
Eamillogin.focus(); // Focus element
}
function search() {
var Tab = document.getElementById("Tab").value;
var Eamillogin = document.getElementById("UEmailLogin");
if (Eamillogin.value === "") {
alert("please enter email");
Eamillogin.focus();
}
}
<form name="contactus" id='contactus' action="test1.php" method="post" enctype="multipart/form-data">
<input type="hidden" value="2" name="Tab" id="Tab">
<div class="row underlinDv">
<div class="col-sm-4">
Your Email :
</div>
<div class="col-sm-8">
<input maxlength="100" type="email" class="form-control" placeholder="Enter Email" name="UEmailLogin" id="UEmailLogin" minlength="3">
</div>
</div>
<!--18-->
<div class="row underlinDv">
<div class="col-sm-8 col-md-offset-4">
<input type="submit" id="demo2GetTags" class="btn btn-primary btn-md" value="Submit" onclick='search()' />
</div>
</div>
</form>

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.