I use Bootstrap validation with tooltips. I want to validate form (username, password) but the button (btn-login) isn't isset (returns NULL). It never goes to loop in PHP code (above). This is my code - HTML and JS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Register form</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/css/formValidation.min.css"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
</head>
<body>
<div id="message"></div>
<form id="tooltipContainerForm" class="form-horizontal" method="post">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="username" placeholder="User name" />
</div>
<div class="col-xs-3">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default" name="btn-login" id="btn-login">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#tooltipContainerForm')
.formValidation({
framework: 'bootstrap',
err: {
container: 'tooltip'
},
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The first name is required and can not be empty'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The last name is required and can not be empty'
}
}
},
}
})
.on('success.form.fv', function(e) {
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
var myData = $("#tooltipContainerForm").serialize();
alert(myData);
$.ajax({
url: "loginHandler.php",
type: 'POST',
data: myData,
success: function(result) {
if(result=="ok"){
$("#message").fadeIn(1000, function(){
$("#message").html('<div class="alert alert-success alert-dismissible fade in" role="alert" >'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true">×</span></button><strong>Success login!</strong> You have been successfully logged in. Redirecting in 2 seconds..</div>');
});
setTimeout(' window.location.href = "home.php"; ',2000);
}
else {
$("#message").fadeIn(1000, function(){
$("#message").html('<div class="alert alert-danger alert-dismissible fade in" role="alert" >'+
'<button type="button" class="close" data-dismiss="alert" aria-label="Close">'+
'<span aria-hidden="true">×</span></button><strong>Something wrong!</strong> '+result+'</div>');
});
}
}
});
})
.on('err.field.fv', function(e, data) {
var $icon = data.element.data('fv.icon'),
title = $icon.data('bs.tooltip').getTitle();
$icon.tooltip('destroy').tooltip({
html: true,
placement: 'right',
title: title,
container: 'body'
});
});
});
</script>
</body>
</html>
This is my loginHadler.php. Into if it never goes.
<?php
require("functions.php");
session_start();
var_dump($_POST['btn-login']);
if(isset($_POST['btn-login'])){
$db = getDb();
//validate($_POST['user'], $db);
$passwordHash = sha1($_POST['password']);
$query = getSelectQuery("users","username",$_POST['username']);
$result = mysqli_query($db, $query);
if ($result) {
$row = $result->fetch_array(MYSQLI_ASSOC);
if($row['password']==$passwordHash){
echo "ok";
$_SESSION['username'] = $row['username'];
} else {
echo "Username or password does not match.";
}
} else {
echo mysqli_error($db);
}
}
