問題在jquery驗證彈出消息

Question

我想創建一個彈出窗口，告訴用戶何時不輸入姓名，姓名，電話號碼或電子郵件。

HTML：

<div class="form-group"> 
    <label class="label-block" for="cname" data-new-placeholder="What is your name?">Ime</label> 
    <input name="firstName" minlength="3" type="text" required class="texbox"> 
</div> 
<div class="form-group"> 
    <label class="label-block" for="cemail">Email</label> 
    <input name="ctct" type="email" required="required" required class="texbox"> 
</div> 
</div> 
<div class=" col-md-6"> 
    <div class="form-group"> 
     <label class="label-block">Prezime</label> 
     <input name="lastName" type="text" required class="texbox"> 
    </div> 
    <div class="form-group"> 
     <label class="label-block">Telefon</label> 
     <input name="number" type="digits" required class="texbox"> 
    </div> 
</div> 

JS：

<script src="scripts/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script> 
<script> 
    $(document).ready(function() { 
     $("#configuration-form").validate({ 
      messages: { 
       name: { 
        required: "Error!" 
       } 
      } 
     }); 
    }); 
</script> 
<script> 
    $("#commentForm").validate(); 
</script> 

這是我在HTML和CSS代碼...我設法讓當電子郵件是不正常我的文本框變爲紅色。如何創建該彈出文本。

Answer 1

HTML： - 用於電子郵件

驗證。

<input type="text" id="email"> 
<input type="submit" onclick="validateEmail()" > 

JavaScript代碼： -

function validateEmail() { 
    var emailText = document.getElementById('email').value; 
    var pattern = /^[a-zA-Z0-9\-_]+(\.[a-zA-Z0-9\-_]+)*@[a-z0-9]+(\-[a-z0-9]+)*(\.[a-z0-9]+(\-[a-z0-9]+)*)*\.[a-z]{2,4}$/; 
    if (pattern.test(emailText)) { 
     return true; 
    } else { 
     alert('Bad email address: ' + emailText); 
     document.getElementById("email").style.backgroundColor = "Red"; 
     return false; 
    } 
} 

的電子郵件驗證工作Demo。

我希望它能幫助你。

Answer 2

看起來你正在使用Twitter的引導，和他們有酥料餅的功能或警告信息，您可以使用：Bootstrap - popovers