I have a form that allows new users to be added to a database, but must this form must be 'authorised' with a valid code before being submitted. I have some PHP that works for this but the output is a crude tick or cross, indicating whether the code is valid or not. I want to instead make use of the Bootstrap Validator plugin to indicate whether the code is valid or not, however I'm not sure how to go about this. I am using the validator plugin on the form already, but it is currently only testing whether or not the field has been filled in, rather than using the PHP to test whether or not the code in the field is valid. If anyone could have a look it would be greatly appreciated.
Form.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add New</title>
<!-- Scripts -->
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/validator.js"></script>
<script src="js/validator.min.js"></script>
<!-- CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="section text-left">
<div class="container">
<div class="row">
<div class="container-fluid">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-6 col-xs-12">
<!-- Padding -->
<div class="col-xs-12" style="height:30px;">
</div>
<!-- Form begins -->
<form action="insert_preflight.php" method="post" data-toggle="validator" data-disable="false">
<div class="form-group">
<label class="control-label " for="first_name">First Name</label>
<input class="form-control" id="first_name" maxlength="40" name="first_name" type="text" required>
</div>
<div class="form-group">
<label class="control-label " for="last_name">Last Name</label>
<input class="form-control" id="last_name" maxlength="40" name="last_name" type="text" required>
</div>
<div class="form-group">
<label class="control-label " for="dob">Date of Birth</label>
<input class="form-control" id="dob" name="dob" maxlength="10" type="date">
</div>
<div class="form-group">
<label class="control-label " for="email">Email</label>
<input class="form-control" type="email" id="email" name="email" type="email">
</div>
<hr>
<div class="form-group has-feedback" id="auth_code_form">
<label for="auth_code" class="control-label ">Authorisation Code</label>
<input class="form-control" id="auth_code" name="auth_code" type="password" required>
<!-- <span id="auth_code_result"></span> -->
<span id="auth_code_result" class="glyphicon form-control-feedback"></span>
</div>
<hr>
<div class="form-group">
<div>
<button class="btn btn-info " name="submit" type="submit">Add</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var x_timer;
$("#auth_code").keyup(function(e) {
clearTimeout(x_timer);
var auth_code = $(this).val();
x_timer = setTimeout(function() {
check_auth_code_ajax(auth_code);
}, 1000);
});
function check_auth_code_ajax(auth_code) {
$("#auth_code_result").html('<img src="ajax-loader.gif" />');
$.post('check.php', {
'auth_code': auth_code
}, function(data) {
$("#auth_code_result").html(data);
});
}
});
</script>
</body>
</html>
Check.php:
<?php
// Connection
include 'pdo_config.php';
try {
$conn = new PDO($dsn, $user, $pass, $opt);
$auth_code = $_POST["auth_code"];
$stmt = $conn->prepare("SELECT * FROM tbl_instructors WHERE auth_code = :auth_code");
$stmt->bindParam(':auth_code', $auth_code);
$stmt->execute();
$exists = $stmt->fetchColumn();
if(($exists > 0)){
die('<img src="exists.png" />');
}else{
die('<img src="no_exists.png" />');
}
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$conn = null;
