問題的代碼來檢查空輸入字段

Question

我發現這個教程但有似乎是Java腳本代碼中的錯誤，可以在下面找到創建一個電子郵件的形式發送電子郵件：

$('#sendfeedback').on("click", function() { 
var url = 'api/send.php'; 
var error = 0; 
var $contactpage = $(this).closest('.ui-page'); 
var $contactform = $(this).closest('.contact-form'); 
$('.required', $contactform).each(function (i) { 
    if ($(this).val() === '') { 
     error++; 
    } 
}); // each 
if (error > 0) { 
     alert('Please fill in all the mandatory fields. Mandatory fields are marked with an asterisk *.'); } 
else {//some code} 

的點擊工作正常，但即使填充字段錯誤顯示我怎麼能阻止這種情況發生？請注意，當我刪除它的這部分代碼的作品。以下是HTML代碼：

<div class="contact-thankyou" style="display: none;"> 
       Thank you. Your message has been sent. We will get back to you as soon as we can. 
      </div> 
      <div class="contact-form"> 
       <p class="mandatory">All fields are Manadatory</p> 
       <div data-role="fieldcontain"> 
        <label for="senderName">Your Name:</label> 
        <input type="text" name="senderName" id="senderName" class="required"> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="senderEmail">Your Email Address:</label> 
        <input type="email" name="senderEmail" id="senderEmail" class="required"> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="subjectCategories">Subject</label> 
         <select name="subjectCategories" id="subjectCategories" data-native-menu="false" class="required"> 
          <option value="" data-placeholder="true">Select...</option> 
          <option value="Registration">Register as an Artist</option> 
          <option value="Feature">Want your music featured?</option> 
          <option value="Advertising">Advertise your company</option> 
          <option value="App Issues">App Issues</option> 
          <option value="General Feedback">General Feedback</option> 
         </select> 
       </div> 
       <div data-role="fieldcontain"> 
        <label for="message">Your Message:</label> 
        <textarea name="message" id="message" placeholder="Please type your message" class="required" cols="80" rows="10" maxlength="10000"></textarea> 
        </div> 
       <div class="send"><a href="javascript:;" data-role="button" data-iconpos="right" id="sendfeedback">Send Feedback</a></div> 
      </div> 

Answer 1

在您的代碼中，您希望驗證類別爲required的四個字段。在#subjectCategories選擇菜單中，類required正在被添加兩次，一個用於<select>彈出式菜單，另一個被添加到<span>下的<a>，其調用選擇菜單#subjectCategories。 span沒有任何價值，它導致了錯誤。

我做了一個簡單的修復，在觸發驗證之後添加下面的代碼，從span中刪除多餘的required類。

$('#sendfeedback').on("click", function() { 
$($.mobile.activePage).find('span').removeClass('required'); 
//.... 
//the rest of your code 
//... 
});