password validation not working for me - javascript

i need to make an html page when you put a password to. whenever the user insert the correct password he will be sent out to a website. if the user won't insert the correct password he will get a an error.(i need to do it with only javaScript.no jquery and stuff like that) this is what i did -
<form>
Write the password here:
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" id="press" onclick="pass()" />
</form>
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"]
function pass()
document.getElementById("putPass").value. //it says it has a syntax error and i dont know why...
if (this == password[])
{
document.write("good job!");
}
else
{
alert("try again!");
}
</script>
thank you.

You can try to do that using this code.
http://jsfiddle.net/VAK3N/
<form>
<input type="text" id="putPass" name="go2" />
<br />
<input type="button" value="click here" id="press" />
</form>
<script type="text/javascript">
var password = ["1234", "abcd", "0000", "1111", "4321"];
document.getElementById('press').onclick = function () {
var p = document.getElementById("putPass").value;
if (password.indexOf(p) > -1) {
alert("good job!");
} else {
alert("try again!");
}
}
</script>

Try this
<script type="text/javascript">
var password = ["1234","abcd","0000","1111","4321"];
function pass(){
var userPass = document.getElementById("putPass").value;
if (in_array(userPass, password)){
document.write("good job!");
}
else {
alert("try again!");
}
}
function in_array(needle, haystack){
for(var key in haystack)
{
if(needle === haystack[key])
{
return true;
}
}
return false;
}
</script>

var pass = document.getElementById("putPass").value;
var correct = false;
for (var i=0;i<password[].length;i++){
if (password[i] == pass){
correct = true;
break;
}
}
if (correct){
document.write("good job!");
} else {
alert("try again!");
}
Not sure if that exact code will work, but I think that you need to check each password individually in a for loop, you can't compare strings with entire arrays.

I didn't see first that you dont want to use jQuery. So then here is the working code for you.
JS:
var password = ["1234","abcd","0000","1111","4321"]
function pass(){
var input = document.getElementById('putPass').value;
var accepted= false;
for(var pass in password){
if(password[pass] == input ){
accepted= true;
}
}
if(accepted){
alert('good job!');
}else{
alert('try again!');
}
}
HTML:
<form>
<input type="text" id="putPass" name="go2" /> <br />
<input type="button" value="click here" onClick="pass();" id="passSender"/>
</form>

Related

Javascript multiple fields validating

First, I have to validate that id and password textboxes are not empty(That one's working). Then I have to validate on the same form that id on textbox needs to be a number and also a number between 3000 and 3999 (That one doesn't work). Any ideas on what's wrong with my code?
function validatefunctions() {
if (document.getElementById('idtb').value === '') {
alert('You need to enter a Customer ID');
return false;
}
if (document.getElementById('pwtb').value === '') {
alert('Please enter your password');
return false;
}
var custID;
custID = document.getElementsByName("idtb").valueOf();
if (custID !== isNan) {
alert("Customer ID needs to be numeric");
return false;
}
if (custID < 3000) {
alert("ID must be above 3000");
return false;
}
if (custID > 3999) {
alert("ID must be below 3999");
return false;
}
}
function validatefunctions() {
if (document.getElementById('idtb').value === '') {
alert('You need to enter a Customer ID');
return false;
}
if (document.getElementById('pwtb').value === '') {
alert('Please enter your password');
return false;
}
var custID = document.getElementById('idtb').value;
if (Number.isNaN(parseInt(custID))) {
alert("Customer ID needs to be numeric");
return false;
}
if (parseInt(custID) < 3000) {
alert("ID must be above 3000");
return false;
}
if (parseInt(custID) > 3999) {
alert("ID must be below 3999");
return false;
}
}
<!DOCTYPE html>
<html>
<body>
<form action="#" onsubmit="return validatefunctions()" method="post">
Customer ID: <input type="text" name="idtb" id="idtb"><br /><br />
Password: <input type="text" name="pwtb" id="pwtb"><br /><br />
<input type="submit" value="Submit">
</form>
</body>
</html>
textbox needs to be a number and also a number between 3000 and 3999 (That one doesn't work)
Why don't use input type number specifying the min and max attribute:
<form>
<input type="number" name="quantity" min="3000" max="3999" value="3000">
<input type="submit">
</form>

Using HTML WebStorage to have multiple username and passwords

I am using WebStorage to make a simple login system with username/password. (I don't know if this is the best way.)
It is working, but the problem is, it only works with one username and password. How do I make it so that it can store multiple usernames/passwords? Or perhaps I should be using a different system to do this?
Code:
<html>
<head>
</head>
<body>
<input type="text" placeholder="input username here" id="textbox">
<input type="text" placeholder="input password here" id="textbox2">
<input type="button" value="sign up" onclick="signup()">
<br>
<input type="text" placeholder="input username here" id="textbox3">
<input type="text" placeholder="input password here" id="textbox4">
<input type="button" value="login" onclick="login()">
<p id="result"></p>
<br>
<br>
<div id="settings">
<h1>Settings</h1>
<br>
<input type="text" placeholder="background color" id="bgc">
<br>
<input type="button" onclick="changeSettings()" value="Change settings">
</div>
<script>
function changeSettings() {
if(loggedIn == true) {
if(typeof(Storage)!= "undefined") {
var backg = document.getElementById("bgc").value;
if(backg!="") {
localStorage.setItem("backgroundColor", backg);
document.body.style.background = localStorage.getItem("backgroundColor");
} else {
alert("Enter a color.")
}
} else {
alert("No support.")
}
} else {
alert("You must be logged in to do that.")
}
}
function loadSettings() {
if(typeof(Storage)!="undefined") {
document.body.style.background = localStorage.getItem("backgroundColor");
} else {
alert("No support.")
}
}
function signup() {
if(typeof(Storage)!= "undefined") {
var username = document.getElementById("textbox").value;
var password = document.getElementById("textbox2").value;
if(username!="" && password!="") {
localStorage.setItem("username", username);
localStorage.setItem("password", password);
} else {
alert("Please enter a valid username and password.")
}
} else {
alert("No support.")
}
}
function login() {
if(typeof(Storage)!= "undefined") {
var username = localStorage.getItem("username");
var password = localStorage.getItem("password");
var usernameInput = document.getElementById("textbox3").value;
var passwordInput = document.getElementById("textbox4").value;
if(usernameInput!="" && passwordInput!="") {
if(usernameInput == username && passwordInput == password) {
document.getElementById("result").innerHTML = "Logged in!";
loggedIn = true;
loadSettings();
} else {
document.getElementById("result").innerHTML = "Wrong password/username!";
}
} else {
alert("Please enter a valid username and password.")
}
} else {
alert("No support.")
}
}
</script>
</body>
</html>
ps: sorry if it's messy :p
You should probably be using SQL if you want to store user inputs such as Usernames and Passwords.
Hashing & Password Storage
Good video to watch if your trying to learn Databases!
:)
Not a good way to store the plain username/password in localStorage. anyone can change those value. Since you check the login using
localStorage.setItem("username", username);
localStorage.setItem("password", password);
var username = localStorage.getItem("username");
var password = localStorage.getItem("password");
usernameInput == username && passwordInput == password
This login condition can make true using different ways.
Found this article from the Google, Hope you'll get some idea to do in
secure way :)

Why can't I display alert if text box has a value?

I'm trying to get a function to run an if statement only if something has no value.
<script src="https://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
<script type="text/javascript">
function checkNSC() {
var confirmNSC = $("#SelectNsc");
if (confirmNSC.length == 0) {
alert("Please ensure all required fields are filled out")
}
else {
alert("NSC has value")
}
}
</script>
HTML:
<input type="text" id="SelectNsc" />
<button onclick="checkNSC();" id="myButton">My Button</button>
</div>
I'm trying to say if the value is 0 then to display an alert saying (Please ensure all fields are filled out". Otherwise say "NSC has a value"
Thanks,
Should be,
var confirmNSC = $("#SelectNsc").val();
Because $("#SelectNsc") return a jquery object, so that $("#SelectNsc").length will always return a value greater than 0.
<script src = "https://jqueryvalidation.org/files/lib/jquery-1.11.1.js" > < /script>
<script type = "text/javascript" >
$(document).ready(function() {
$("#myButton").click(function() {
var confirmNSC = $("#SelectNsc").val().trim();
if (confirmNSC.length == 0) {
alert("Please ensure all required fields are filled out")
} else {
alert("NSC has value")
}
});
})
</script>
Fiddle
Try this, It's working fine
<script src="https://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
<script type="text/javascript">
function checkNSC() {
var confirmNSC = $("#SelectNsc");
if (confirmNSC.val() =='') {
alert("Please ensure all required fields are filled out")
}
else {
alert("NSC has value")
}
}
</script>
<input type="text" id="SelectNsc" />
<button onclick="checkNSC();" id="myButton">My Button</button>
</div>
use this code :
<body>
<script src="https://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
<script type="text/javascript">
function checkNSC() {
var confirmNSC = document.getElementById("SelectNsc").value;
if (confirmNSC.length == 0) {
alert("Please ensure all required fields are filled out")
}
else {
alert("NSC has value")
}
}
</script>
<input type="text" id="SelectNsc" />
<button onclick="checkNSC();" id="myButton">My Button</button>
</body>
OR , use this code :
<body>
<script src="https://jqueryvalidation.org/files/lib/jquery-1.11.1.js"></script>
<script type="text/javascript">
function checkNSC() {
var confirmNSC = $("#SelectNsc").val();
if (confirmNSC.length == 0) {
alert("Please ensure all required fields are filled out")
}
else {
alert("NSC has value")
}
}
</script>
<input type="text" id="SelectNsc" />
<button onclick="checkNSC();" id="myButton">My Button</button>
</body>

javascript, if input from user is correct goto x subpage

So i want to add to my page a script that would transfer a user after x input to subpage assigned to this input.
Try below code:
<form>
Password: <input type="text" name="password" id='txtPassword'>
<button id='btnSubmit'>Submit</button></form>
<script>
var submit = document.getElementById('btnSubmit')
submit.onclick = function () {
var password = document.getElementById('txtPassword').value;
if (condition1)
{
goes to a subpage1
}
else if (condition2)
{
goes to a subpage1
}
else
{
alert with some message
}
}
</script>
Add a button :
<form>
Password: <input type="text" name="password">
<button onclick="checkPass();">Submit</button>
</form>
Now in JS
<script>
function checkPass(){
var password = document.getElementsByName("password")[0].value;
if ( password != "") //or any condition
{
window.location.href = 'page_1_url' ; //goes to a subpage1
}
else if (condition2) //...
{
window.location.href = 'page_2_url' ; //goes to a subpage1
}
else
{
alert('....') ; //alert with some message
}
}

JSP Java Script validation not working

I wrote a java script code in a JSP page,But when i try to submit the Page, my javascript validation code is not getting fired,Could any one help me what went wrong?
Here My Code:
<html>
<center><h3>Employee Absent Report</h3></center>
<head>
<script language="javascript" type="text/javascript">
function onFormSubmit(){
var countErrors = 0;
var strDt=document.getElementById("startdate").value;
var endDt=document.getElementById("todate").value;
var flag=false;
var eFlag = false;
if (IsEmpty(strDt)==false && IsEmpty(endDt)==true ) {
document.getElementById("divExpiryDate").innerHTML = "* Please Enter Expiry Date";
return false;
}
if (IsEmpty(strDt)==true && IsEmpty(endDt)==false ) {
document.getElementById("divStartDate").innerHTML = "* Please Enter Start Date";
return false;
}
return true;
}
</script>
</head>
<body>
<form name="form" action="FormServlet" method="get" onsubmit="return onFormSubmit(); ">
<center>
<div id="formErrors" class="error"></div>
FromDate:
<input type="text" name="startdate" id="startdate"/>
<div id="divStartDate"></div>
<br>
ToDate:
<input type="text" name="todate" id="todate"/>
<div id="divExpiryDate"> </div>
<br>
<input type="submit" value="submit"/>
</center>
</form>
</body>
</html>
is there a method "IsEmpty" in javascript? I think that's the problem. If you have that defined in some other place, try running your code in Firefox and watch Error Console for errors.
Looks like a logical error to me. Try replacing this:
if (IsEmpty(strDt)==false && IsEmpty(endDt)==true ) {
document.getElementById("divExpiryDate").innerHTML = "* Please Enter Expiry Date";
return false;
}
if (IsEmpty(strDt)==true && IsEmpty(endDt)==false ) {
document.getElementById("divStartDate").innerHTML = "* Please Enter Start Date";
return false;
}
with:
if (endDt.length==0) {
document.getElementById("divExpiryDate").innerHTML = "* Please Enter Expiry Date";
return false;
}
if (strDt.length==0) {
document.getElementById("divStartDate").innerHTML = "* Please Enter Start Date";
return false;
}
Do the validation this way
if (endDt === "") {
document.getElementById("divExpiryDate").innerHTML = "* Please Enter Expiry Date";
return false;
}
if (strDt === "" ) {
document.getElementById("divStartDate").innerHTML = "* Please Enter Start Date";
return false;
}
Hope this helps!
this is the working modified code
<script>
function onFormSubmit(event){
var countErrors = 0;
event.preventDefault();
var strDt=document.getElementById("startdate").value;
var endDt=document.getElementById("todate").value;
var flag=false;
var eFlag = false;
if ( IsEmpty(endDt)==true ) {
document.getElementById("divExpiryDate").innerHTML = "* Please Enter Expiry Date";
eFlag = true ;
}
if (IsEmpty(strDt)==true ) {
document.getElementById("divStartDate").innerHTML = "* Please Enter Start Date";
eFlag = true;
}
if(eFlag)
{
return false;
}
return true;
}
function IsEmpty(input)
{
if(input.replace(/^\s+|\s+$/g,"") === "") {
return true;
}
return false;
}

Categories