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.
Related
So I am fairly new to web development and I am making a contact form for my personal website. I made a contact form before and it worked perfectly but I didnt like the way it looked so I made a nicer looking one and now it doesnt work when I click submit the first time but it still clears the form. It only sends an email if the form is empty and the email it sends is empty.
I'm confident my javascript is correct but im not sure why my form is acting this way.
HTML
<form>
<div class="row">
<div class="input-group">
<input type="text" id="name" required>
<label for="name"><i class="fa-solid fa-user"></i> Your Name</label>
</div>
<div class="input-group">
<input type="text" id="phone" required>
<label for="phone"><i class="fas fa-phone-square-alt"></i> Phone No.</label>
</div>
</div>
<div class="input-group">
<input type="email" id="email" required>
<label for="email"><i class="fas fa-envelope"></i> Email Address</label>
</div>
<div class="input-group">
<textarea id="message" rows="8" required></textarea>
<label for="message"><i class="fas fa-comments"></i> Your Message</label>
</div>
<button class="btn btn-primary" type="submit" onclick="sendMail()">Submit <i class="fas fa-paper-plane"></i></button>
</form>
</div>
JS
var params = {
name : document.getElementById("name").value,
phone : document.getElementById("phone").value ,
email : document.getElementById("email").value,
message : document.getElementById("message").value,
}
emailjs.send("service_xnukp8n", "template_mv0tglo", params).then(function (res){
alert("Your form was sent successfully! " + res.status);
})
.catch((err) => console.log(err));
}
Any explanation or tips are appreciated!
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>
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
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>
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();
}