jQuery的表單驗證errormessage的問題

Question

我只是做了我的形式使用PHP將它發送到我的郵箱，但我不能得到它只發送當每個字段填寫。是時候

一切有好氣色留空。

我只是想讓它給出一個反饋信息，當這些字段空着。

也不介意標籤的怪異用法，如果我這樣做正確的方式的CSS將無法正常工作。

HTML

   <form id="contactform" action="php/send.php" method="post"> 
        <div class="box"> 
        <label> 
         <span>Full name *</span> 
         <input type="text" class="input_text" name="name" id="name"/> 
        </label> 
        <label> 
         <span>Email *</span> 
         <input type="text" class="input_text" name="email" id="email"/> 
        </label> 
        <label> 
         <span>Subject *</span> 
         <input type="text" class="input_text" name="subject" id="subject"/> 
        </label> 
        <label> 
         <span>Message *</span> 
         <textarea class="message" name="feedback" id="feedback"></textarea> 
        </label> 
        <label> 
        <input type="submit" class="button" value="Submit Form" /> 
        </label> 
       </div> 
      </form> 

JS

$(document).ready(function(){ 



//------------------- VALIDATIE CONTACT FORM ------------------------ 
//------ VARIABELEN DECLAREREN------ 
var naam = false; 
var valnaam = ""; 
var email = false; 
var valemail = ""; 
var message = false; 
var valmessage = ""; 

//---- NAAM ---- 
$("#name").bind("focus",function(){ 
    if (naam == false) 
    { 
     $(this).css("borderColor","red"); 

    } 
    else 
    { 
     $(this).css("borderColor","green"); 
    } 



}); 
$("#name").bind("keyup", function(){ 
    valnaam = $(this).val(); 
    if (valnaam <= 1) { 
     $(this).css("borderColor","red"); 
     naam = false; 

    } 
    else 
    { 
     $(this).css("borderColor","green"); 
     naam = true; 
    } 
}); 

//------ EMAIL ------- 
$("#email").bind("focus",function(){ 
    if (email == false) 
    { 
     $(this).css("borderColor","red"); 

    } 
    else 
    { 
     $("#email").css("borderColor","green"); 
    } 
}); 

$("#email").bind("keyup", function(){ 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var address = $("#email").val(); 
    if(reg.test(address) == false) 
    { 
     $("#email").css("borderColor","red"); 
     email = false; 

    } 
    else 
    { 
     $("#email").css("borderColor","green"); 
     email = true; 
    } 
}); 

    //---- Onderwerp ---- 
$("#subject").bind("focus",function(){ 
    if (naam == false) 
    { 
     $(this).css("borderColor","red"); 

    } 
    else 
    { 
     $(this).css("borderColor","green"); 
    } 



}); 
$("#subject").bind("keyup", function(){ 
    valnaam = $(this).val(); 
    if (valnaam <= 1) { 
     $(this).css("borderColor","red"); 

     naam = false; 
    } 
    else 
    { 
     $(this).css("borderColor","green"); 
     naam = true; 
    } 
}); 

//------ BERICHT ------ 

$("#feedback").bind("focus",function(){ 
    if (message == false) 
    { 
     $(this).css("borderColor","red"); 

    } 
    else 
    { 
     $(this).css("borderColor","green"); 
    } 

}); 
$("#feedback").bind("keyup", function(){ 
    valmessage = $(this).val(); 
    if (valmessage <= 1) { 
     $(this).css("borderColor","red"); 
     message = false; 

    } 
    else 
    { 
     $(this).css("borderColor","green"); 
     message = true; 
    } 
}); 
}); 

Answer 1

好吧，我評論了你是否可以只使用jquer.validate，但我想我不妨給的情況下，例如，您可以：

$("#contactform").validate({ 
    rules: { 
    name: "required", 
    email: "required", 
    subject: "required", 
    feedback: "required" 
    } 
}); 

默認CSS類error和valid，使Ĵ ust爲這兩個班級設置適當的樣式，並且你們都已設定好。

模式演示可以發現here。

Answer 2

嗨我會建議通過驗證函數綁定驗證表單的'onsubmit'事件。例如：

$('#formId').submit(function(submitEvent) { 
//validation code 
if(validationCriteriaNotMet){ 
    submitEvent.preventDefault();// prevent form submission. 
//other activity like attaching changing css properties of elements or adding proper 
} 

}); 

Morever可以使用Jquery Validation Plugins驗證的形式，以避免全部由自己寫所有的驗證鍋爐板代碼。