twitter-bootstrap-3 - bootstrap-3 工具提示不会根据 js - if - 条件闪烁

Question

这是我用于将用户注册到 mysql db 的代码。我正在使用 Twitter Bootstrap 工具提示，以获得以下信息：

1. 最初，当用户将鼠标悬停在文本框上时，将显示写入title属性中的字符串。
2. 如果他只写 2 个字母（fe，名字），然后按下提交按钮，表单将不会提交，新的工具提示消息应该闪烁并显示：“请使用至少 3 个字母！”。
3. 表单中的每个输入都使用相同的算法。

4. 如果用户正确填写了所有的文本框，那么表单将被提交到register.php，它将处理数据。

   <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>
   

问题：

1. 当用户没有输入预期的数据（fe，至少 3 个字母）时，工具提示不会相应更改（fe，请至少使用 3 个字母！）。
2. 当用户确实输入了预期的数据时，由于未知原因，表单没有提交！

有什么建议吗？谢谢！

Answer 1

动态添加文本到工具提示 - 使用 var：

var msg = '';
msg = 'Please use at least 3 letters';

并在此之前清除消息；

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

删除 e.preventDefault(); - 将它放在发生错误的部分，因为它可以防止默认事件，即：提交。

编辑：

$(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();
        }

    });
});