How do I check for availability of record for a user and if available, re-enter for security?
Question
We have a need to use Ajax to make a call to a php file to check for availability of record from the database.
If record exists, ask a user to reconfirm the token number by entering again into another box.
If they match, the user continues on with filling rest of form.
If they don't match, an error is raised.
I have two separate files that accomplish the dual goal of checking availability from the db and comparing that record by asking user to re-enter that same number.
However, I would like to combine the two files into one.
Could someone please guide me?
This first file uses ajax to make a call to a php file to check for availability of records.
It is called index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Check Availability of Token</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="jquery.js" type="text/javascript" language="javascript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#token").blur(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn(1000);
//check the token exists or not from ajax
$.post("checkToken.php",{ user_token:$(this).val() } ,function(data)
{
if(data=='no') //if token not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Token exists').addClass('messageboxerror').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Token does not exist').addClass('messageboxok').fadeTo(900,1);
});
}
});
});
});
</script>
</head>
<body>
<br>
<br>
<div align="center">
<div class="top" > Check Availability of token - <strong>Token "roshan", "mike" ,"jason" exists</strong><br>
Please move the focus out of the box to check the availability of token.
</div>
<div >
Token : <input name="token" type="text" id="token" value="" maxlength="15" />
<span id="msgbox" style="display:none"></span>
</div>
</div>
</body>
</html>
The second file is called tokencompare.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Compare Validate token</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#confirm_token").parent().hide();
$("#token").keydown(function() {
var self = this, $self = $(this);
setTimeout(function(){
if ( $.trim(self.value) != "" && !$self.is(".error") ) {
$("#confirm_token").parent().show();
return;
}
$("#confirm_token").val('').parent().hide();
},0);
});
// validate signup form on keyup and submit
$("#tokenval").validate({
rules: {
token: {
required: true,
minlength: 5
},
confirm_token: {
required: true,
minlength: 5,
equalTo: "#token"
}
},
messages: {},
submitHandler: function(form) {
alert("submitted");
}
});
});//]]>
</script>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<form class="cmxform" id="tokenval" method="get" action="">
<fieldset>
<legend>Validating a complete form</legend>
<p>
<label for="token">token</label>
<input id="token" name="token" type="text" />
</p>
<p>
<label for="confirm_token">Confirm token</label>
<input id="confirm_token" name="confirm_token" type="text" />
</p>
<p>
<input class="submit" type="submit" value="Submit" />
</p>
</fieldset>
</form>
</body>
</html>
Thanks for your help
1 answers
solution1
0 2014-02-28 20:10:21
Ok, let's see if this FIDDLE does what you want.
The "real" token is xxxxx.
The format for any token is five characters. The code strips leading and trailing zeros.
So you can start with xxxxx and watch what happens.
Then xxx.
Then rrr
Then rrrrr.
JS
var validtoken = "xxxxx";
$('#checkme').click(function(){
$('#messagediv').html('');
var firsttoken = $('#token1').val();
firsttoken = firsttoken.trim();
if( firsttoken.length !== 5)
{
$('#messagediv').html('The token has an incorrect format<br /> Please reenter');
$('#token1').val('');
} else {
if (firsttoken == validtoken)
{
$('#messagediv').html('Your token exists<br /> click PROCEED for the next step');
$('.proceed').css('display', 'block');
} else {
$('.errordiv').css('display', 'block');
}
}
A});
$('#proceed').click(function(){
$('#token1').val('');
$('.proceed').css('display', 'none');
$('#messagediv').html('');
alert('And the next step is....');
});
$('#confirm').click(function(){
var confirmtoken1 = $('#token1').val();
var confirmtoken2 = $('#token2').val();
if(confirmtoken1 == confirmtoken2)
{ $('#token1').val('');
$('#token2').val('');
$('.proceed').css('display', 'none');
$('#messagediv').html('');
alert('Confirmed. And the next step is....');
} else {
$('#token1').val('');
$('#token2').val('');
$('.proceed').css('display', 'none');
$('.errordiv').css('display', 'none');
$('#messagediv').html('tokens do not match. Reenter');
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.