I have a simple form where one needs to enter a 4-digit PIN code. However, I would also like to autofill that PIN code when the user comes back to the website again, using JS cookies.
JS:
JavaScript
x
39
39
1
function loginCheck() {2
var pinCode = document.getElementById("pinCode").value;3
if (pinCode.match(/^[0-9]+$/) != null) {4
if (pinCode.length == 4) {5
function setCookie(cname, cvalue) {6
document.cookie = cname + "=" + cvalue + ";"7
}8
function getCookie(cname) {9
var name = cname + "=";10
var ca = document.cookie.split(';');11
for(var i = 0; i < ca.length; i++) {12
var c = ca[i];13
while (c.charAt(0) == ' ') {14
c = c.substring(1);15
}16
if (c.indexOf(name) == 0) {17
return c.substring(name.length, c.length);18
}19
}20
return "";21
}22
function checkCookie() {23
var pinCode = document.getElementById("pinCode").value;24
var userPIN = getCookie("userPIN");25
if (userPIN != "") {26
pinCode.value = userPIN;27
} else {28
setCookie("username", userPIN);29
}30
}31
checkCookie();32
} else {33
document.getElementById("rightorwrong").innerHTML = "Not 4 digits!";34
}35
} else {36
document.getElementById("rightorwrong").innerHTML = "Not a number!";37
}38
}39
HTML:
JavaScript
1
13
13
1
<div id = "validation">2
<form id = "validationForm" target = "frame">3
<fieldset>4
<label for = "pass">Password:</label><br />5
<input type = "text" id = "pass" name = "pass" /><br />6
<label for = "pinCode">4-digit PIN:</label><br />7
<input type = "text" id = "pinCode" name = "pinCode" /><br />8
<input type = "submit" value="Log In" onclick = "loginCheck()" />9
</fieldset>10
</form>11
</div>12
<p id = "rightorwrong"></p>13
I’m aware of a few things that are wrong about this code.
- in the
checkCookie()function, if the user has a cookie stored, then I’m not entirely sure how to retrieve the PIN they first inputted. - Defining functions inside functions, and calling them by simply doing
checkCookie();and nothing else, is generally bad practice. - When I run
checkCookie();it only does the first part of theifstatement and not the second part. I’m not sure why and I couldn’t figure this out. - The code in general may have some errors. I modified a cookies script from here but it doesn’t seem to work.
I’m new to the idea of cookies, and am still trying to learn them. A step-by-step explanation would be more helpful.
Help would be greatly appreciated, TIA.
Advertisement
Answer
For cookies I use my “simpleCookie” object with the set / getVal methods to read or save a cookie.
ex:
JavaScript
1
6
1
simpleCookie.setVal( 'my cookie', 'ab/kjf;c', 3 )2
3
let valueX = simpleCookie.getVal('my cookie')) // return 'ab/kjf;c'4
5
simpleCookie.setVal( 'my cookie', '', -1) remove the cookie6
this object is achieved via an IIEF function, and I strongly advise you to use the mozilla documentation
Since automatic form validation exists, I no longer use a text box to indicate an input error, but I have diverted its “normal” use a bit because I find it very restrictive, as you will see in my code.
When at the base of your question, you just have to find a match between the name entered and a possible cookie with the same name, then save this cookie if the form is valid.
Oh, and I also put some css to simplify writing html (no more need for <br>)
JavaScript
1
32
32
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>login form</title>6
<style>7
fieldset { margin: 1em; width: 15em; }8
fieldset * { display: block; float: left; clear: both; margin-top: 0.2em; }9
fieldset label { margin-top: 0.7em; }10
fieldset button { margin-top: 2em; }11
fieldset button:last-of-type { clear: none; float: right; }12
</style>13
</head>14
<body>15
<form id="login-form" action="">16
<fieldset>17
<label>Name:</label> 18
<input type="text" name="name" autocomplete="off" pattern="[A-Za-z0-9]{1,20}"> 19
<label>Password:</label> 20
<input type="password" name="pass" pattern="[A-Za-z0-9]{1,20}"> 21
<label>4-digit PIN:</label> 22
<input type="text" name="pinCode" autocomplete="off" pattern="[0-9]{4}"> 23
<button type="reset">clear</button>24
<button type="submit">Log In</button>25
</fieldset>26
</form>27
28
<script src="simpleCoolie.js"></script> <!-- the cookie object (IIFE) -->29
<script src="login_form.js"></script>30
</body>31
</html>32
simpleCoolie.js :
JavaScript
1
23
23
1
// the cookie object (IIFE)2
const simpleCookie = (function()3
{4
const OneDay_ms = 24 *60 *60 *1000 // one Day in milliseconds 5
return { 6
setVal:(cName, cValue='', exDays=10)=> // 10 days is default cookie recovery, 7
{ // negative value remove the cookie8
cName = encodeURIComponent(cName.trim())9
cValue = encodeURIComponent(cValue.trim())10
if (cName)11
{12
let dte = new Date()13
dte.setTime(dte.getTime() + (exDays *OneDay_ms)) 14
document.cookie = `${cName}=${cValue};expires=${dte.toUTCString()};SameSite=Strict;path=/`15
} }16
, getVal:cName=>17
{18
cName = encodeURIComponent(cName.trim())19
let xCookie = document.cookie.split('; ').find(x=>x.startsWith(`${cName}=`))20
return xCookie ? decodeURIComponent(xCookie.split('=')[1]) : ''21
} }22
})()23
login_form.js :
JavaScript
1
77
77
1
const formLogin = document.getElementById('login-form')2
, msgErrorDuration = 50003
, checkInputs =4
[formLogin.querySelectorAll('input[pattern]')]5
.map(el=>6
{7
let pattern = el.pattern8
el.removeAttribute('pattern')9
return { name:el.name, pattern } 10
});11
12
// generic set checking for report validyty13
const getCheckingValidity=(formElement, patternValue)=>14
{15
formElement.pattern = patternValue16
formElement.required = true17
return formElement.reportValidity() 18
}19
// generic checking remove after delay 20
const unCheckElement=(formElement,isOK)=>21
{22
formElement.removeAttribute('pattern')23
formElement.required = false24
25
if(!isOK)26
{27
formElement.setCustomValidity('')28
if(document.activeElement === formElement ) // bugg fix: Firefox doesnt remove error message after delay 29
{ // (other browser do)30
formElement.blur(); // double flip focus31
formElement.focus(); // --> will remove message bubble32
}33
}34
}35
36
// client-side form validation mecanism to get error message for each input37
formLogin.name.oninvalid=_=>38
{39
formLogin.name.setCustomValidity('Please enter a name')40
setTimeout(unCheckElement, msgErrorDuration, formLogin.name, false)41
}42
formLogin.pass.oninvalid=_=>43
{44
formLogin.pass.setCustomValidity("can't do anything without password !")45
setTimeout(unCheckElement, msgErrorDuration, formLogin.pass, false)46
}47
formLogin.pinCode.oninvalid=_=>48
{49
if (formLogin.pinCode.value==='')50
{ formLogin.pinCode.setCustomValidity("PIN code can't be empty !") }51
else52
{ formLogin.pinCode.setCustomValidity('PIN code must be 4 digits') }53
setTimeout(unCheckElement, msgErrorDuration, formLogin.pinCode, false)54
}55
56
formLogin.onsubmit=e=>57
{58
let validForm = true 59
60
for (let Elm of checkInputs) 61
{62
validForm = validForm && getCheckingValidity(formLogin[Elm.name], Elm.pattern )63
if (validForm)64
{ unCheckElement(formLogin[Elm.name], true) }65
else break 66
} 67
if (validForm)68
{ simpleCookie.setVal( formLogin.name.value, formLogin.pinCode.value ) }69
else70
{ e.preventDefault() } // disable form submiting71
}72
73
formLogin.name.oninput=()=> // check for cookie pin code on name74
{75
formLogin.pinCode.value = simpleCookie.getVal(formLogin.name.value)76
}77
In 2009, session/localStorage arrived, which can replace cookies, especially for this kind of use.
To not have to redo all the previous logic, I created here a module called pseudoCookie which actually uses localStorage
here is the complete code to test with it:
JavaScript
1
20
20
1
// the pseudo cookie object (IIFE)2
const pseudoCookie = (function() // use localStorage 3
{4
return {5
setVal:(cName, cValue='', exDays=10)=> // negative value remove the value in localstorage6
{ // the values are kept until your browser or your system crashes7
cName = encodeURIComponent(cName.trim())8
cValue = encodeURIComponent(cValue.trim())9
if (cName) {10
if (exDays < 0) localStorage.removeItem(cName)11
else localStorage.setItem(cName, cValue)12
} }13
, getVal:cName=>14
{15
cName = encodeURIComponent(cName.trim())16
let xCookie = localStorage.getItem(cName)17
return xCookie ? decodeURIComponent(xCookie) : ''18
} }19
})()20
and the part to change in JS:
JavaScript
1
22
22
1
formLogin.onsubmit=e=>2
{3
let validForm = true 4
5
for (let Elm of checkInputs) 6
{7
validForm = validForm && getCheckingValidity(formLogin[Elm.name], Elm.pattern )8
if (validForm)9
{ unCheckElement(formLogin[Elm.name], true) }10
else break 11
} 12
if (validForm)13
{ pseudoCookie.setVal( formLogin.name.value, formLogin.pinCode.value ) }14
else15
{ e.preventDefault() } // disable form submiting16
}17
18
formLogin.name.oninput=()=> // check for cookie pin code on name19
{20
formLogin.pinCode.value = pseudoCookie.getVal(formLogin.name.value)21
}22