I'm developing a website that requires my validation of the sign in page.
For that I created text fields on the sign in form.
and validated them with my database using scriptlets.
<!--<form method="post" action="#">
<h1>SIGN IN</h1>
Email id:<input class="s_text" type="text" placeholder="Email id" name="si_1">
Password:<input class="s_text" type="password" placeholder="Password" name="si_2">
<input type="submit" value="Sign In" name="si_3" id="sub_si">
</form>-->
In scriptlet, I checked for the entered username and password in the database.
I want to add javascript event to the 'if else' condition in the scriptlet i.e. if the username from the database is empty, it show perform certain events and if not(else), it should perform some other events.
Any way to do so??
Related
I have a React app integrated with a node.js server that has an 'invite user' flow -- a current user of the app can invite whichever email address they like, and my system will send that email address an Invite Email that will link them to a screen that has the following form in it:
<form onSubmit={this.handleSubmit}>
<p>
<label htmlFor="">email</label><br/>
<input type="email" className="inpt" ref={this.input_email} value={this.state.emailText} readOnly={true}/>
</p>
<p>
<label htmlFor="">name</label><br/>
<input type="text" className="inpt" ref={this.input_name}/>
</p>
<p>
<label htmlFor="">password</label><br/>
<input type="password" className="inpt" ref={this.input_password}/>
</p>
<p>
<label htmlFor="">confirm password</label><br/>
<input type="password" className="inpt" ref={this.input_confirm_password}/>
</p>
<div className="btns">
<button className="btn blue" onClick={this.acceptInvite}>create</button>
</div>
</form>
Functionally, this form works fine -- the user fills in the form and submits it and the account is created.
The problem is that LastPass is trying to save the name rather than the email, which makes me think something in my form is not following correct standards or can in some way be improved. My login process after creating an account is email-based, not username-based. Is there something I can put in my form, in my email input, that hints to LastPass, "save this as the username"?
In my angular application I have a registration form which has the following fields in the same order
1) email id
2) otp
when the otp is entered the below fields becomes visible
3) full name
4) password
The last element is the submit button.
When we click on submit button the browser prompts the user to save the username and password.
I want the Autofill to save email as the username but its taking the fullname as the username. I tried adding a hidden field with Email filled but it worked on Firefox and dint work on Chrome
Is there any other way to achieve this by not editing the order of the form elements?
Adding html for the inputs
<input type="email" [(ngModel)]="email" name="userName" required />
<input type="text" [(ngModel)]="fullName" name="fullName" id="fullName" #fullName="ngModel" dirname="fullName" />
<input [(ngModel)]="password" id="pwd" type="password" name="password" #password="ngModel" required />
Please guide
Thanks!
Just for learning purposes, I want to make an insecure HTML5 "login page" which handles everything on the client side.
<div class="login">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" onclick="check(this.form)" value="Login">
</div>
<script>
function check(form) {
if(login.username.value == "guest" && login.password.value == "pwrd") {
window.open('home.html')
}
else {
alert("Error Password or Username")
}
}
</script>
You cannot use JavaScript to make a login page...The user can modify your script and bypass the login script.
Also, there is no such thing as a simple login system. You have to use databases and verify EVERY page to make sure the user is allowed and is logged in.
Validation should be done on the client side only, validation like required, alphanumeric, only numbers etc. Checking the username and password should be done on the server side, using ajax and simple PHP query to check username and password from the table.
If you are looking for front end html only then html5 provides nice validation already like for required and email and numbers only.
eg: <input type="email" name="usermail" placeholder="yourname#email.com" required>
<input type="password" name="password" placeholder="password" required>
Here is a nice tutorial for creating a login form.
http://www.hongkiat.com/blog/html5-loginpage/
You need to use php :
1.html Form :
<form action="your_page.php" method="POST">
<input type="text" placeholder="username" name="username"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" name="submit" value="Connect" />
</form>
2.php Work now :
<?php
if(isset($_POST['submit'])){ //when user click connect
if(!empty($_POST['username']) && !empty($_POST['password'])){
if ($_POST['username']=="guest" && $_POST['password']=="pwrd"){
header("Location:home.php");
}else{
echo"check the password and username";
}
}else{
echo"fill all the inputs";
}
}
I am working with a Newsletter subscription popup, it has Email address and Submit button. The intention is
1. When new customer enter his/her email id and click SUBMIT button, two actions need to happen.
The email has be sent to current database and
Redirect customer to thank you page.
I have the thank you page webpage. I have the database information. But this in a ecommerce website, I have limited access. I already have similar subscription in one of the webpage, I am trying to replicate that as popup. I am attaching the codes that I have.
My HTML body tag:
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<onclick="javascript:location.href='https://www.thankyou.html'">
<input type="submit" value="SUBMIT" width="260px">
</form>
Code from my existing webpage for database:
When I click SUBMIT, it redirects me to https://www.mywebsite.com/v/Config_FullStoreURLMailingList_subscribe.asp
Instead it should be redirecting customer to "Thankyou.html"
Thanks
I think you must have confused with onclick event. Try using it like this,
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<input type="submit" onclick="javascript:location.href='https://www.mysite.com/thankyou.html'" value="SUBMIT" width="260px">
</form>
I'm quite new to the javascript scene not to mention working with it on a rails application. So i decided to do a client side validation of my signup form everything works ok but my script for checking if password matches confirm password. Everytime it tells me password does not match i was really hoping someone could help me with this. Thanks in advance :) P.S this is mostly html and javascript
<head>
<form id="sign_up" method="post" action="/auth/identity/register">
<div class="field">
<input id="name" class="username" type="text" placeholder="Full name" name="name" required></input>
</div>
<div class="field">
<input id="email" class="username" type="email" placeholder="Email address" name="email" required></input>
</div>
<div class="field">
<input id="password" class="username" type="password" placeholder="Password" name="password" required></input>
</div>
<div class="field">
<input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required></input>
</div>
<div class="field">
<input class="btn btn-primary" type="submit" value="Sign up" name="commit"></input>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("password_confirmation").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password_confirmation").value;
var pass1=document.getElementById("password").value;
if(pass1!=pass2){
document.getElementById("password_confirmation").setCustomValidity("Passwords Don't Match");
}
else
document.getElementById("password_confirmation").setCustomValidity('');
//empty string means no validation error
}
</script>
</div>
</head>
As the commenters have said, your code works when you move it into the <body> of the document. Perhaps there's more than one element with ID password or password_confirmation within the document?
If not I would start by logging the entered password and password_confirmation values, i.e.:
console.log("Password box value: "+pass1);
console.log("Password confirmation box value: "+pass2);
Put these lines below the line var pass1=document.getElementById("password").value;
Then you can visually inspect the entered values in your browser console (F12 key) to make sure they're the same. Check the values just after you click the submit button. Bear in mind you're binding the onchange event to the inputs so you'll see logging when you move from the password input to the password confirmation input (you can ignore this as you won't yet have entered the confirmation password).
Finally, it's worth bearing in mind that Firefox behaves slightly differently to Chrome in terms of user feedback; Firefox puts a red glow around the offending text input as you type, which disappears when the password entered in the password confirmation input is the same. Chrome does not do this and only gives indication that the passwords didn't match after you click the submit button.