Javascript訂閱表單驗證錯誤

Question

我正在構建一個使用Javascript進行驗證的基本訂閱表單，但它無法正常工作。

我的表單代碼：

<form id="pageSubscribeForm"> 
    <div class="pageSubscribeCell"> 
     <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="Tell Us Your Name" /> 
    </div> 
    <div class="pageSubscribeCell"> 
     <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="Add Your Email Address" /> 
    </div>   
    <div class="pageSubscribeCell hidden"> 
     <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="" /> 
    </div> 
    <div class="pageSubscribeCell"> 
     <div class="pageSubscribeButton"> 
      <div id="pageSubscribeSubmit" class="pageSubscribeAction"></div> 
     </div> 
    </div> 
</form> 

和驗證碼：

$("#pageSubscribeSubmit").click(function() { 
var name = $("#pageSubscribeName").val(); 
var nameok = 0; 
var email = $("#pageSubscribeEmail").val(); 
var emailok = 0; 
var spam = $("#pageSubscribeSpam").val(); 
var spamok = 0; 
var dataString = 'name='+ name + '&email=' + email + '&spam=' + spam; 

if(name!='Tell Us Your Name'){ 
    nameok = 1 
}else{ 
    $("#pageSubscribeName").removeClass("subscribeSuccess").addClass("subscribeError"); 
} 

if(email!='Add Your Your Email Address'){ 
    emailok = 1 
}else{ 
    $("#pageSubscribeEmail").removeClass("subscribeSuccess").addClass("subscribeError"); 
} 

if(spam ==''){ 
    spamok = 1 
}else{ 
    $("#pageSubscribeSpam").removeClass("subscribeSuccess").addClass("subscribeError"); 
} 

if(nameok == 1 && emailok == 1 && spamok == 1){ 
    $('#pageSubscribeSubmit').hide(); 
} 

當我點擊submit鏈接我得到加入到我的姓名細胞錯誤類，但電子郵件的細胞上保持不變並且垃圾郵件單元保持隱藏狀態。任何想法爲什麼或如何解決？

Answer 1

你因爲你的測試檢查錯誤文本電子郵件領域沒有得到錯誤類（2個「您」）：

if(email!='Add Your Your Email Address'){ 

你還問爲什麼「......垃圾郵件細胞保持隱藏......」。您發佈的代碼中沒有任何內容會從#pageSubscribeSpam的div中刪除.hidden類。假設您的.hidden類完成它的建議，那麼#pageSubscribeSpam輸入在加載頁面時隱藏。用戶無法輸入值，因此單擊該按鈕時，其值仍爲「'。所以spamok = 1，總是 - 它永遠不會得到添加的.subscribeError類。

Answer 2

修復您的代碼，刪除第二個測試

如果「你」（電子郵件！=「添加您的您電子郵件地址」）{

爲了避免這樣的問題，我強烈建議的東西這樣其中工程

$(function() { 
 
    $("#pageSubscribeSubmit").on("click", function() { 
 
    var name = $.trim($("#pageSubscribeName").val()); 
 
    var email = $.trim($("#pageSubscribeEmail").val()); 
 
    var spam = $("#pageSubscribeSpam").val(); 
 
    var dataString = 'name=' + name + '&email=' + email + '&spam=' + spam; 
 

 
    $("#pageSubscribeName").toggleClass("pageSubscribeError", name == ""); 
 
    $("#pageSubscribeEmail").toggleClass("pageSubscribeError", email == ""); 
 

 
    var spamok = spam == $("#pageSubscribeSpam").get(0).defaultValue; // nothing changed 
 
    $("#pageSubscribeSpam").toggle(!spamok); 
 

 
    if (spamok && $(".pageSubscribeError").length == 0) { // no errors 
 
     $('#pageSubscribeSubmit').hide(); 
 
     $.ajax({ 
 
     type: "POST", 
 
     url: "php/subscribe.php", 
 
     data: dataString, 
 
     success: function() { 
 
      $('#pageSubscribeSubmit').slideUp(); 
 
     } 
 
     }); 
 
    } 
 
    }); 
 
});

.pageSubscribeError { border:1px solid red } 
 
#pageSubscribeSpam { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="pageSubscribeForm"> 
 
    <div class="pageSubscribeCell"> 
 
    <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="" placeholder="Tell Us Your Name" /> 
 
    </div> 
 
    <div class="pageSubscribeCell"> 
 
    <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="" placeholder="Add Your E-Mail Address" /> 
 
    </div> 
 
    <div class="pageSubscribeCell hidden"> 
 
    <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="khujh" /> 
 
    </div> 
 
    <div class="pageSubscribeCell"> 
 
    <div class="pageSubscribeButton"> 
 
     <div id="pageSubscribeSubmit" class="pageSubscribeAction">Submit</div> 
 
    </div> 
 
    </div> 
 
</form>