I'm working on a password matching validator and am stuck. It seems like the code is structured correctly but it reads the passwords as matching no matter what. Also would like to know what I'm doing wrong in regards to getting the event to keep validating without reloading the page, I was hoping event++ would get the job done.
Here is the Javascript
<script>
const pass1 = document.getElementById("password1");
const pass2 = document.getElementById("password2");
const p = document.getElementById("confirm")
function passCheck () {
if (pass1 !== pass2) {
return p.innerHTML= "Passwords do not match";
}
else {
return p.innerHTML="Passwords match";
}
}
pass2.addEventListener("keyup", function() {
event++;
passCheck(pass1, pass2);})
</script>
Here is the HTML
<body>
<div class="rSide">
<div class="formBox">
<form action="#" method="post">
<div class="formLabel">
<label for="FName">First name</label>
<input type="text" id="FName" name="FName" placeholder="Your First Name" required>
</div>
<div class="formLabel">
<label for="LName">Last Name</label>
<input type="text" id="LName" name="LName" placeholder="Your Last Name" required>
</div>
<div class="formLabel">
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required>
</div>
<div class="formLabel">
<label for="phone">Phone Number</label>
<input type="number" id="phone" name="phone" placeholder="Your Phone Number" required>
</div>
<div class="formLabel">
<label for="password1">Password</label>
<input type="text" id="password1" name="password1" required>
</div>
<div class="formLabel">
<label for="password2">Confirm Password</label>
<input type="text" id="password2" name="password2" required>
<p id="confirm"></p>
</div>
<button type="submit" class="account">Create Account</button><br>
</form>
</div>
<p>Already have an account? <a>Log in</a></p>
</div>
</div>
</body>
You're getting the elements:
const pass1 = document.getElementById("password1");
What you want are the values:
const pass1 = document.getElementById("password1").value;
Alternatively, if you need to reference the elements otherwise (such as when calling pass2.addEventListener), you can reference the values just during the comparison:
if (pass1.value !== pass2.value) {
However you want to structure the code is up to you. The main point to remember is when you're referencing the entire HTML element and when you just want the .value from that element (specifically for <input> elements).
As an aside, you're pass arguments to a function that doesn't expect any:
passCheck(pass1, pass2);
Either add the parameters to the function itself, or continue using the globally scoped variables within the function and don't pass anything to it:
passCheck();
Related
I want to make some validations when the form submitted. However when the form submitted validation function seems like invoking correctly. The alert part doesn't come up but when i try to alert like this
function validation(){
alert("somethinglol");
var username = $("#register.username").val().toString();
alert(username);
};
somethinglol appears but the second alert doesn't.
This is my get function:
app.get('/', (req, res) => {
res.render('index.ejs');
})
This is the index.ejs
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>
This is the script part of index.js which contains the validation() function.
<script>
function validation(){
alert($("#register.username").val().toString());
var username = $("#register.username").val().toString();
username = "somethinglol";
alert(username);
};
</script>
I have changed the script as external but it didn't work. I have changed the jquery cdn. I used $("#registerSubmit").click(...) instead of onSubmit but it didn't work again. I also tried something using async and await but if it's the problem I am not sure that I did it correctly.
with jquery you can use $( "#form1" ).submit(function( event ) { to perform an action before the submit
moreover to select id with dot (.) in jquery you have to use \\ before dot
$("#register\\.username")
$( "#form1" ).submit(function( event ) {
alert($("#register\\.username").val().toString());
var username = $("#register\\.username").val().toString();
username = "somethinglol";
alert(username);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1" action="/" method="post" onSubmit="validation();">
<div class="form-group">
<label for="register.username">Username</label>
<input type="text" name="username" id="register.username" class="form-control" placeholder="Username" aria-describedby="helpId">
<small id="helpRegisterUsername" class="text-muted">You should enter a username.</small>
</div>
<div class="form-group">
<label for="register.password">Password</label>
<input type="password" name="password" id="register.password" class="form-control" placeholder="Password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Enter a password.</small>
</div>
<div class="form-group">
<label for="register.confirm.password">Confirm password</label>
<input type="password" name="confirmedPassword" id="register.confirm.password" class="form-control" placeholder="Confirm password" aria-describedby="helpId">
<small id="helpId" class="text-muted">Confirm password</small>
</div>
<input type="submit" id="registerSubmit" value="Submit"></input>
</form>
I have a webpage that has multiple forms everywhere, in some pages, there are 4 or 5 forms at once. At this time I get the form input field's contents targeting its specific name (using jQuery):
html
<input id="lastname" name="lastname" type="text" class="form-control" placeholder="Last name*">
js
var lastname = $("[name='lastname']").val();
Nonetheless, this is not scalable, I need to add more variables every time I add more HTML Forms with their unique names (All of the forms are conformed with the same 4 fields). I want to implement a vanilla javascript function that can handle all forms when submit button is pressed this is how I have it now:
//At this momment I get the values using jQuery, targeting the specific input name:
$('.btn').click(function(){
$('.btn').attr("disabled", true);
var name = $("[name='name']").val();
var lastname = $("[name='lastname']").val();
var phone = $("[name='phone']").val();
// make a var for every input field known
//stuff to send it via ajax to an external api:
/*
{ ... }
*/
}
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name-2">Name*</label>
<input type="text" placeholder="name here" id="name-2" name="name-2" required>
<label for="lastname-2">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-2" name="lastname-2" required>
<label for="phone-2">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-2" name="phone-2" required>
<button class="btn" onclick="process()">Submit</button>
</form>
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name-3" name="name-3" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname-3" name="lastname-3" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone-3" name="phone-3" required>
<button class="btn" onclick="process()">Submit</button>
</form>
I want to have only 1 javascript function that receives the entire form (when the button is clicked) and internally traverses the form element to get the values of the field and this way, it can be reusable to all forms
The javascript function should receive the element first, then traverse to parent element:
HTML
<form>
<label for="name">Name*</label>
<input type="text" placeholder="name here" id="name" name="name" required>
<label for="lastname">Last Name*</label>
<input type="text" placeholder="last name here" id="lastname" name="lastname" required>
<label for="phone">Phone Number*</label>
<input type="text" placeholder="phone # here" id="phone" name="phone-2" required>
<button class="btn" onclick="process(this)">Submit</button>
</form>
Using onclick="process(this)" in the button, this way it will call the javascript function associated with and sending the element where the click was made.
js
process(element){
var form = element.closest('form')
// now you can extract the input field of this specific form.
}
Now you can get the input fields as needed using:
Get all the elements of a particular form
I am creating a multiple section form that needs to validate each section before proceeding to show the next. When I hit continue I want to run a validation that triggers a response on the section above but not the whole form. In addition I want this in one form so that it can be uploaded into IBM forms. I know jQuery is powerful but I don't understand if you can have it all contained in the html.
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for(i=0; i<len; i++) {
if (form[i].id.indexOf("C") != -1 || // if statement over this one validating visible form elements before continuing
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
</head>
<body>
<div class="container">
<form action="javascript:void(0)" onSubmit="showValues (this)" method="post" enctype="text/plain">
<div id="page1" class="page" style="visibility:visible;">
<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname" placeholder="Your first name.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="Your Number.." required>
<center><p><input class="button" type="button" id="C1" value="Continue" onClick="showLayer('page2')"></p></center>
</div>
<!-- First Page Break -->
<div id="page2" class="page">
<label for="title">Title</label>
<input type="text" id="title" name="title" placeholder="Your Title.." required>
<label for="companyname">Company Name</label>
<input type="text" id="companyname" name="companyname" placeholder="Your Company Name.." required>
<input class="button" type="submit" value="Submit">
I have created a form that is submitting the form in its entirety and preventing the page from reloading locally.
As soon as it is posted to the website and we try and plug in the handler (SalesForce). The form still submits but the page reloads and we cant have that. As there is data that reveals once the "submit" button is clicked. The button is controlling multiple JS and functions.
Can anyone look at the code and see where the problem lies?
<div>
<div class="columns medium-6">
<script type="text/javascript">
function randomnumber() {
document.forms[0].Code.value=(Math.round(Math.random()*999999+1)); }
onload=randomnumber
</script>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" name="first_name" id="firstname" aria-describedby="firstname" placeholder="First Name">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="last_name" id="lastname" aria-describedby="lastname" placeholder="Last Name">
<label for="email">Email address</label>
<input type="text" class="form-control" name="email" id="email" aria-describedby="email" placeholder="Email">
<label for="phone">Phone</label>
<input type="text" class="form-control" name="phone" id="phone" aria-describedby="phone" placeholder="Phone">
<!--<input type="hidden" name="Owner" value="00G1a000001I7EA"> -->
<input type="hidden" name="form_type" value="CSF">
<input type="hidden" name="visitor_type" value="NEW-CUST">
<input type="hidden" name="party_size" value="1">
<input type="hidden" name="source" value="Love Happens Here">
<input type="hidden" name="webtoleadstoreid" value="a0C1a00000BJhea">
<input type="hidden" name="company" value="New Guest">
<input type="hidden" name="reason_visit" value="other">
<button type="submit" id="randomNumber" onclick="javascript:toggle(); return false;" class="btn btn-primary" value="Generate Code">Submit</button>
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("randomNumber");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "Submit";
}
}
function showdiv() {
var error = false;
//validate your form.
if(error == true){ return true;}
else
{
//show div
return false;
}
}
</script>
<div id="toggleText" style="display: none">
<label for="code">Code</label>
<input type="text" name="Code" readonly id="Code" aria-describedby="code" placeholder="code">
<p> Check your email for the coupon code and details. Thanks again for your participation in our Share & Win contest, winners will be announced on <strong>February 14th.</strong></p>
</div>
</div>
</form>
</div>
</div>
Like I said, you can use Ajax to achieve what you want.
Here are a few links that will help you in that direction
Ajax
Ajax
If they don't really help you, try googling Ajax, you will definitely find a site that will explain everything to you.
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.