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";
}
}
Related
I have this following code:
<form action="main.js">
<input type="text" required="required" pattern="[a-zA-Z]+" />
<input type="submit" value="Submit" />
</form>
When i click the submit button, the information that was in the input should be sent to my file "main.js". But there is nothing in "main.js". I want that "main.js" file would contain that passed information as a string, is there a way or method to do this?
Seems like you've understood form action incorrectly.
Action defines which code will handle your form values, and not which page will the results be pasted into.
you'll want main.js to receive the form results and handle them in a way to be pasted into a results.txt file for example. But allowing a user of your website to create or edit files on your server is insecure.
The only option i think of, unless you have access to server side coding, like php or asp, is sending the submitted form information to your email using mailto:
<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone#example.com:</h2>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
can you run asp or php?
Following could be the part of your javascript file.. If you are not going to include any JS file then you can use it directly.
function checkAge() {
var x = document.forms["Form1"]["Age"].value;
if (x == null || x == "") {
alert("Age is empty");
return false;
}
else
alert(x);
}
Then your form should looks like
<form name="Form1" action="abc.jsp" onsubmit="return checkAge()" method="post">
Age: <input type="text" name="Age">
<input type="submit" value="Submit">
</form>
Cross check with your form and see what went wrong..
I want to send a popup to a user if the user is not logged into my forum.
So far it works as far as appending the HTMl form to the new window created in Javascript; however, when I press the actual submit forms via the new window I get the basic 404 even though I use absolute URLs.
Here's the basic Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var myWindow = window.open("", "MsgWindow", "width=500, height=500");
myWindow.document.write('<h1>Already have an account? Login here!</h1><br> <form method="post" action="sportsboard.netai.net/page.php?page=login&&do=login&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <input type="submit" name="login" value="Login ≫"> </form> <hr><br> <h1> or Signup and get started talking!</h1> <form method="post" action="sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"> <label for="username">Username:</label><input type="text" id="username" name="username" size="35"><br> <label for="password">Password:</label> <input type="password" name="password" id="password" size="35"><br> <label for="email">E-mail: </label> <input type="email" name="email" id="email" size="35"><br> <input type="submit" name="register" value="Register ≫"> </form>');
});</script>
...and here's a basic link to a test page http://www.sportsboard.netai.net/Scripts/login.php?test=yes
If you press the submit buttons on there you'll be redirected to my testing free host's 404 page not found.
How do I make the form submit as if it were on a regular page?
My guess would be you are using absolute urls incorrectly. Since, you didn't prefix your form post action with http://www. it is attempting to post it to the local relative path. Try this:
action="http://www.sportsboard.netai.net/page.php?page=register&&do=register&&formdisplay=false"
The answer is as sctskw said! The action tried to search for the URL locally, so I added the http://www. to correctly direct the URL.
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??
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.
I'm develoing Windows 8 metro style application with Html 5 and Javascript
My question is simple, how can write simple form with validation ?
<form id="loginForm">
E-Mail:
<input id="login-email" type="email" name="Username" oninvalid="this.setCustomValidity('Enter email pls')"
maxlength="40" required pattern="^.{2,}#.{2,}$"/>
Password:
<input id="login-password" type="password" name="Password" maxlength="25" required pattern=".{6,10}"/>
<button name="login" type="submit" class="go-login" id="btnlogin" value="LOGIN">LOGIN</button></form>
This is my html 5 form. But the problem is metro style event listener...
document.getElementById("btnlogin").addEventListener('click', loginClick);
When I click the submit button, the EventListener's "loginClick" function launches without checking html 5 form input elements valid or not.
Ran into the same issue while working with HTML5/JS Windows Store Application (WSA). The expectation is that the user is notified on the client and that the code in the 'Submit' does not run. This is what we see on a web-based HTML5 application running in the browser. However, the WSA app runs the submit code when the button is clicked regardless of the validation status. In my application, I included a check of the loginForm.checkValidity() property. This is true when all validation is correct.
if (loginForm.checkValidity())
{
//...submit logic...
}
I agree, this check is an extra step given our expectations from the web world. This is still version 1 of the WSA platform and I expect this functionality will evolve into the product in a future update/release.
According to w3schools, you have to call onsubmit="return function()" in the form tag.
This way it should not proceed to submit without going through the validation.
grabbed from W3schools:
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
and the belonging javascript:
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("#");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}