Is there a way i can make 5 numpads with 13 characters to enter in each and wen all entered right will do an action
There are various ways you can go about doing this. If it is indeed passwords, I would suggest that you go about doing your final checks server side. If you do every check client side, then the idea of an actual password functionality becomes obsolete, because anyone would practically be able to modify the checks by opening the dev. tools in their browser.
For my example, I'll use jQuery as my client side scripting language with the use of AJAX to send the values to a page that will do the validations server side.
I'll be using PHP for the server side validation in this example.
HTML:
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">1st Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passOne" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">2nd Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passTwo" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">3rd Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passThree" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">4th Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passFour" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">5th Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passFive" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="btn-primary" id="submitBtn">Submit</button>
</div>
</div>
JavaScript / jQuery:
function checkFields() {
var approval = false;
var requiredLength = 13;
$('.passwordField').each(function() {
var passLength = $(this).val().length;
if(passLength < requiredLength) {
$(this).closest('.row').find('.errField').text("Please enter 13 characters");
} else {
$(this).closest('.row').find('.errField').text("");
approval = true;
}
});
return approval;
}
$('.passwordField').on("change", function() {
var requiredLength = 13;
var passLength = $(this).val().length;
if(passLength < requiredLength) {
$(this).closest('.row').find('.errField').text("Please enter 13 characters");
} else {
$(this).closest('.row').find('.errField').text("");
}
});
$('#submitBtn').on("click", function() {
if(checkFields()) {
var passOne = $('#passOne').val();
var passTwo = $('#passTwo').val();
var passThree = $('#passThree').val();
var passFour = $('#passFour').val();
var passFive = $('#passFive').val();
$.ajax({
url: 'secret-check.php',
method: 'POST',
data: {
passOne : passOne,
passTwo : passTwo,
passThree : passThree,
passFour : passFour,
passFive : passFive
},
success:function(html) {
if(html.includes('lengthError')) {
alert("Please enter 13 characters for each password respectively");
} else if(html.includes('passError')) {
alert("sorry, one or more passwords were incorrect");
} else {
/*
Open sesame?
I would suggest you do secret stuff server side,
else everyone can just edit the code and/or see the "secret",
using the dev tools. (ctrl+shift+i in Chrome).
*/
}
}
});
}
});
JavaScript / jQuery code, breakdown:
One of the first things you'll notice is that I am doing some checks client side via JavaScript / jQuery. Those checks consists of whether the password fields contain at least 13 characters in length.
You will see that I do this in 2 different functions. The reason for this is that I'd like to make a check on the current field in use, but also for all of the fields if the user attempts to submit the data.
The way to fetch data with jQuery is to use the selector and then specificy what it is you want. In your case, you're interested in the value.
Example:
$('#passOne').val(); will retrieve the value of the input field with the id equal to passOne.
# = id selector indicator. Same as known from CSS selectors.
. = class selector.
... and so on. More about selectors here.
You will also note that I am using the .each() function to loop through a specific class element. This function comes in handy if you're working with a logic revolving around using multiple elements of one class for one purpose or another. More about the .each() function here.
The way that I am using these functions is by something called event delegation. It allows me to bind an event (i.e. a change event or click event etc.) to an element, specified by the selector (we went over selectors earlier). More about event delegation here.
Next thing you will notice is the AJAX function. AJAX functions become particularly straight forward with jQuery. They're relatively easy to understand, and you can use AJAX for various purposes. In this case, we're using it to parse data to a server side script.
You will note the following structure.
The url parameter is the name of the page we're parsing the data to. It's similar to the action property in a <form> element.
The method parameter defines which method we're sending our data with. If you've worked with <form> elements before, then this parameter will be familiar to you. In our case, we specified the method as a POST method. Another common method would be a GET method. You can read more about methods here.
The data parameter is pretty straight forward. It's exactly what it sounds like. It's the data we parse along. The structure is: variable_declaration equal to (assigned by : in this case) some_value.
The success parameter is an optional parameter. It allows you to perform an action upon success of the AJAX function. In our case we simply use it to relay some information to the user about our server side checks.
The html.includes() function in the success function of the AJAX function basically checks if the html (i.e. our PHP page in this case) contains certain html. We base a logic around that condition to give our user some information.
More about jQuery AJAX functions here.
PHP:
<?php
$passOne = $_POST['passOne'];
$passTwo = $_POST['passTwo'];
$passThree = $_POST['passThree'];
$passFour = $_POST['passFour'];
$passFive = $_POST['passFive'];
$passOneCheck = "abcdefghijklm10";
$passTwoCheck = "abcdefghijklm11";
$passThreeCheck = "abcdefghijklm12";
$passFourCheck = "abcdefghijklm13";
$passFiveCheck = "abcdefghijklm14";
$requiredLength = 13;
if(strlen($passOne) < $requiredLength or strlen($passTwo) < $requiredLength or strlen($passThree) < $requiredLength or strlen($passFour) < $requiredLength or strlen($passFive) < $requiredLength) {
echo "lengthError";
} else if($passOne == $passOneCheck && $passTwo == $passTwoCheck && $passThree == $passThreeCheck && $passFour == $passFourCheck && $passFive == $passFiveCheck) {
//Do your secrets!
//Redirect to another page?
//header("Location: https://www.redirect-example.com/");
} else {
echo "passError";
}
?>
Codepen simulating the event using client side validation ONLY here.
Snippet simulating the event using client side validation ONLY:
function checkFields() {
var approval = false;
var requiredLength = 13;
$('.passwordField').each(function() {
var passLength = $(this).val().length;
if(passLength < requiredLength) {
$(this).closest('.row').find('.errField').text("Please enter 13 characters");
} else {
$(this).closest('.row').find('.errField').text("");
approval = true;
}
});
return approval;
}
$('.passwordField').on("change", function() {
var requiredLength = 13;
var passLength = $(this).val().length;
if(passLength < requiredLength) {
$(this).closest('.row').find('.errField').text("Please enter 13 characters");
} else {
$(this).closest('.row').find('.errField').text("");
}
});
$('#cheatBtn').on("click", function() {
var cheatArr = [
"abcdefghijklm10",
"abcdefghijklm11",
"abcdefghijklm12",
"abcdefghijklm13",
"abcdefghijklm14"
];
var i = 0;
$('.passwordField').each(function() {
$(this).val(cheatArr[i]);
i++;
});
checkFields();
});
$('#submitBtn').on("click", function() {
if(checkFields()) {
var passOne = $('#passOne').val();
var passTwo = $('#passTwo').val();
var passThree = $('#passThree').val();
var passFour = $('#passFour').val();
var passFive = $('#passFive').val();
/*
This is just for Codepen simulation.
These checks should be performed server side to be kept secret.
*/
var passOneCheck = "abcdefghijklm10"
var passTwoCheck = "abcdefghijklm11"
var passThreeCheck = "abcdefghijklm12"
var passFourCheck = "abcdefghijklm13"
var passFiveCheck = "abcdefghijklm14"
if(passOne == passOneCheck && passTwo == passTwoCheck && passThree == passThreeCheck && passFour == passFourCheck && passFive == passFiveCheck) {
alert("You have unlocked the secrets!");
} else {
alert("One or more passwords were wrong");
}
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<h2>Attention!</h2>
<p>
This example does not use any server side checks.
This is only to mimic how the environment could work.
This example also comes with a "cheat" button
that will fill out the password fields with the proper passwords to simulate a success function.
</p>
</div>
</div>
<br />
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">1st Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passOne" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">2nd Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passTwo" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">3rd Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passThree" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">4th Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passFour" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text rounded-0">5th Password:</span>
</div>
<input type="password" class="form-control rounded-0 passwordField" id="passFive" placeholder="Enter 13 character password" />
</div>
<span class="errField text-danger text-center"></span>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button class="btn-primary" id="cheatBtn">I'm a cheater!</button>
</div>
<div class="col-md-4">
<button class="btn-primary" id="submitBtn">Submit</button>
</div>
</div>