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

this code use register users mysql db. , i'm using twitter bootstrap tooltips, obtain following:

1. initially, when user hover on textboxes, string wrote in title attribute displayd.
2. if write 2 letters (fe, firstname), , presses submit button, form won't submitted, , new tooltip message should flash , show: "please use @ least 3 letters!".
3. the same algorithm every input in form.

4. if user fills in correctly textboxes, form submitted register.php, process 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 mandatory! please use @ least 3 letters!"/>     <input type="text" class="form-control" id="lastname" placeholder="last name" style="width:48%;float:right;" title="the last name mandatory! please use @ 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 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 mandatory! please use @ least 6 chars!"/>     <input type="password" class="form-control" id="password_again" placeholder="retype password" style="width:48%;float:right;" title="this field must same 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 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 @ least 3 letters!"                 });             }         }         e.preventdefault();     }); }); </script> 

problems:

1. when user doesn't put expected data (fe, @ least 3 letters), tooltip isn't changing accordingly (fe, please use @ least 3 letters!).
2. when user put expected data, unknown reason, form isn't submitted!

any suggestion? thank you!

add text tooltip dynamically - var:

var msg = ''; msg = 'please use @ least 3 letters'; 

and clear message before that;

    var msg = '';     if (firstname.length < 3) {       msg = please use @ least 3 letters;       $('#firstname').tooltip('show',function(){           title: msg        });     } 

remove e.preventdefault(); - put in part when error occur, prevents 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 @ least 3 letters!';                 $('#firstname').tooltip('show',function(){                     title: msg                 });             }           e.preventdefault();         }      }); });