驗證窗體沒有刷新「單選按鈕不起作用」

Question

我需要幫助我發現這個tutorial驗證窗體沒有刷新，但問題是我認爲這只是文本字段:)但我使用4個不同的單選按鈕我真的需要這個腳本來處理這些單選按鈕！

這裏是JavaScript文件:)！

runOnLoad(function(){ 
    $("input#name").select().focus();   
}); 

$(function() {   
    $('.error').hide();   
    $(".button").click(function() { 

     // validate and process form here 
     $('.error').hide(); 
     var name = $("input#name").val(); 

     if (name == "") { 
      $("label#name_error").show(); 
      $("input#name").focus(); 
      return false; 
     } 

     var email = $("input#email").val(); 
     if (email == "") { 
      $("label#email_error").show(); 
      $("input#email").focus(); 
      return false; 
     } 

     var mobile = $("input#mobile").val(); 
     if (mobile == "") { 
      $("label#mobile_error").show(); 
      $("input#mobile").focus(); 
      return false; 
     } 

     var college = $("input#college").val(); 
     if (college == "") { 
      $("label#college_error").show(); 
      $("input#college").focus(); 
      return false; 
     } 

     var university = $("input#university").val(); 
     if (university == "") { 
      $("label#university_error").show(); 
      $("input#university").focus(); 
      return false; 
     } 

     var level = $("input#level").val(); 
     if (level == "") { 
      $("label#level_error").show(); 
      $("input#level").focus(); 
      return false; 
     } 

     var first_preference = $("input#first_preference").val(); 
      if (first_preference == "") { 
      $("label#first_preference_error").show(); 
      $("input#first_preference").focus(); 
      return false; 
     } 

     var second_preference = $("input#second_preference").val(); 
     if (second_preference == "") { 
      $("label#second_preference_error").show(); 
      $("input#second_preference").focus(); 
      return false; 
     } 

     var third_preference = $("input#third_preference").val(); 
     if (third_preference == "") { 
      $("label#third_preference_error").show(); 
      $("input#third_preference").focus(); 
      return false; 
     } 

     var heard = $("input#heard").val(); 
     if (heard == "") { 
      $("label#heard_error").show(); 
      $("input#heard").focus(); 
      return false; 
     }  

     var applying = $("input#applying").val(); 
     if (applying == "") { 
      $("label#applying_error").show(); 
      $("input#applying").focus(); 
      return false; 
     }  

     var strength = $("input#strength").val(); 
     if (strength == "") { 
      $("label#strength_error").show(); 
      $("input#strength").focus(); 
      return false; 
     } 

     var weakness = $("input#weakness").val(); 
     if (weakness == "") { 
      $("label#weakness_error").show(); 
      $("input#weakness").focus(); 
      return false; 
     }  

     var previousEx = $("input#previousEx").val(); 
     if (previousEx == "") { 
      $("label#previousEx_error").show(); 
      $("input#previousEx").focus(); 
      return false; 
     } 



     var dataString = 'name='+ name + '&email=' + email + '&mobile=' + mobile + '&college=' + college + '&university=' + university + '&level=' + level + '&first_preference=' + first_preference + '&second_preference=' + second_preference + '&third_preference=' + third_preference + '&heard=' + heard + '&applying=' + applying + '&strength=' + strength + '&weakness=' + weakness + '&previousEx=' + previousEx; 

     $.ajax({ 
       type: "POST", 
       url: "php/database_sorting.php", 
       data: dataString, 
       success: function() { 
       $('#contact_form').html("<div id='message'></div>"); 
       $('#message').html("<h2>Contact Form Submitted!</h2>") 
       .append("<p>We will be in touch soon.</p>") 
       .hide() 
       .fadeIn(1500, function() { 
        $('#message').append("<img id='checkmark' src='images/done.png' />"); 
       }); 
       } 
     }); 
     return false; 
    }); 
}); 

DEMO:

Answer 1

假設你已經通過名稱分組無線電按鈕，檢查其中的一個選擇：

//update the name to correspond to your radios group's name 
if (!$('input[type="radio"][name="radiosGroup"]:checked').length) { 
    alert('no radios selected!'); 
    //you can adapt the error message to your liking, 
    //e.g. replacing the alert with $('#radio_error').show() 
    return false; 
} 

Fiddle

---

另一種方式來「跳過「單選按鈕上的JS驗證是讓其中一個p當您生成頁面時重新檢查：

<input type="radio" name="radiosGroup" checked="checked" value="1" /> 

這樣一個收音機將永遠被選中。

---

使用HTML5，你可以使用input元素（除了按鍵輸入）required屬性跳過JS驗證了現代瀏覽器。 Fiddle

---

最後，如果你所有的input/textarea/checkbox/radio s爲一個形式裏面，你可以使用jQuery的.serialize()生成查詢字符串，而不是手動構建它。如果它們不在表單內，可以將它們包裹在一個表單中。

$('#myForm').serialize(); 

Fiddle

---

而作爲已經在就此問題發表意見，JS驗證只是爲了提供更好的用戶界面（例如顯示無需刷新頁面錯誤），你需要服務器端驗證，如果你'將您的網站公開爲JS可以輕鬆繞過。

---

還有一個側面說明，假設你input s爲一個形式裏面，最好附上您的驗證窗體的.submit()處理器比上點擊一個按鈕，以確保您的驗證將被解僱每當表單獨立於瀏覽器或用戶單擊提交按鈕或在文本輸入元素中按Enter鍵來提交。