bootstrap-3 tooltip doesn't flash accordingly to the js - if - condition - twitter-bootstrap-3

Question

This is the code I use for register users into mysql db. And I'm using Twitter Bootstrap tooltips, for obtain the following:
initially, when the user hover over the textboxes, the string wrote in the title attribute will be displayd.
if he will write only 2 letters (fe, for the firstname), and presses the submit button, the form won't be submitted, and the new tooltip message should flash and show: "Please use at least 3 letters!".
the same algorithm for every input in form.
if the user fills in correctly all the textboxes, then the form will be submitted to register.php, which will process the data.
<form id="form">
<div class="form-group">
<input type="text" class="form-control" id="firstname" placeholder="First Name" style="width:48%;float:left;" title="The First Name is mandatory! Please use at least 3 letters!"/>
<input type="text" class="form-control" id="lastname" placeholder="Last Name" style="width:48%;float:right;" title="The Last Name is mandatory! Please use at least 3 letters!"/>
<div style="clear:both;"></div>
</div>
<div class="form-group">
<input type="number" class="form-control" id="cnp" placeholder="CNP" title="The CNP is mandatory! Please use exact 13 numbers!"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Password" style="width:48%;float:left;" title="The Password is mandatory! Please use at least 6 chars!"/>
<input type="password" class="form-control" id="password_again" placeholder="Retype the Password" style="width:48%;float:right;" title="This field must be the same as Password field"/>
<div style="clear:both;"></div>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-mail" title="The Email is mandatory!"/>
</div>
<div class="form-group text-center">
<button class="btn btn-default">Register</button>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#firstname').tooltip();
$('#lastname').tooltip();
$('#cnp').tooltip();
$('#password').tooltip();
$('#password_again').tooltip();
$('#email').tooltip();
$('#form').on('submit', function(e){
var firstname = $('#firstname').val().trim();
var lastname = $('#lastname').val().trim();
var cnp = $('#cnp').val().trim();
var password = $('#password').val().trim();
var password_again = $('#pssword_again').val().trim();
var email = $('#email').val().trim();
if (firstname != '' && firstname.length > 3 && lastname != '' && lastname > 3 && cnp != '' && cnp.length == 13 && password != '' && password.length >= 6 && password_again == password && email != ''){
$.ajax({
type: "POST",
url: "php/register.php",
data: {firstname: firstname, lastname: lastname, cnp: cnp, password: password, email: email},
success: function(response){
$('#content').html(response);
}
});
} else {
if (firstname.length < 3) {
$('#firstname').tooltip('show',function(){
title: "Please use at least 3 letters!"
});
}
}
e.preventDefault();
});
});
</script>
Problems:
When the user doesn't put the expected data (fe, at least 3 letters), the tooltip isn't changing accordingly (fe, Please use at least 3 letters!).
When the user does put the expected data, then for an unknown reason, the form isn't submitted!
Any suggestion? Thank you!

Answer 1

Add text to tooltip dynamically - with var:
var msg = '';
msg = 'Please use at least 3 letters';
and clear the message before that;
var msg = '';
if (firstname.length < 3) {
msg = Please use at least 3 letters;
$('#firstname').tooltip('show',function(){
title: msg
});
}
remove e.preventDefault(); - put it in the part when error occur, as it prevents the default event, ie: submit.
Edit:
$(document).ready(function(){
$('#firstname').tooltip();
$('#lastname').tooltip();
$('#cnp').tooltip();
$('#password').tooltip();
$('#password_again').tooltip();
$('#email').tooltip();
var msg = '';
$('#form').on('submit', function(e){
var firstname = $('#firstname').val();
var lastname = $('#lastname').val();
var cnp = $('#cnp').val();
var password = $('#password').val();
var password_again = $('#pssword_again').val();
var email = $('#email').val();
if (firstname != '' && firstname.length > 3 && lastname != '' && lastname > 3 && cnp != '' && cnp.length == 13 && password != '' && password.length >= 6 && password_again == password && email != ''){
$.ajax({
type: "POST",
url: "php/register.php",
data: {firstname: firstname, lastname: lastname, cnp: cnp, password: password, email: email},
success: function(response){
$('#content').html(response);
return true;
}
});
} else {
if (firstname.length < 3) {
msg = 'Please use at least 3 letters!';
$('#firstname').tooltip('show',function(){
title: msg
});
}
e.preventDefault();
}
});
});