jQueryを使用してHTMLフォームのラジオボタンを検証する方法は？

Question

私はフォームフィールドの検証をしようとしています。私はhereからテキストフィールドのバリデーションを行っていますが、ラジオボタンでは正しくありません。

HTML：

<div> 
    <label>Gender:</label> 
    <input type="radio" name="gender" class="gender" value="Female" >Female</input> 
    <input type="radio" name="gender" class="gender" value="Male" >Male</input> <br/> 
    <span class="error">This field is required</span> 

    </div> 

のjQuery：

$('.gender').on('input', function() { 
var input = $(this); 
var is_checked = $("input[name=gender]:checked").length != 0;; 
if (is_checked) {$('.gender').removeClass("invalid").addClass("valid");} 
else {$('.gender').removeClass("valid").addClass("invalid");} 
}); 

これは私が遊んリアルタイム検証コードです。しかし、それは動作しません。フォームを送信するとき、私が選択したラジオボタンに関係なく、エラーメッセージが表示されます。検証のためにチェックし、エラーがない場合、私は行にすべての入力を追加倍増することで、私は上記のコードを実行し、送信ボタン、上、すべてのリアルタイム検証をチェックした後

$("#studentsform").submit(function(event) { 
var form_data = $("#studentsform").serializeArray(); 
var error_free = true; 
for (var input in form_data){ 
    var element = $("#"+form_data[input]['name']); 
    var valid = element.hasClass("valid"); 
    var error_element = $("span", element.parent()); 
    if (!valid) {error_element.removeClass("error").addClass("error_show"); error_free = false;} 
    else {error_element.removeClass("error_show").addClass("error");} 
    } 


if (!error_free) { 
    event.preventDefault(); 
} 

else { 

idcount++ 

var Surname = $('#surname').val(); 
var Name = $('#name').val(); 
var Gender = $('.gender:checked').val(); 
var Addr = $('#address').val(); 
var Email = $('#email').val(); 
var Phone = $('#phone').val(); 

$("#tblData tbody").append("<tr>"+ "<td>" + idcount + "</td>"+ "<td>" + Surname + "</td>"+ 
"<td>" + Name + "</td>"+ 
"<td>" + Gender + "</td>"+ 
"<td>" + Addr + "</td>"+ 
"<td>" + Email + "</td>"+ 
"<td>" + Phone + "</td>"+ 
"<td><button class='btnEdit'>Edit</button><button class='btnDelete'>Delete</button></td>"+ "</tr>"); 

$(".btnEdit").bind("click", Edit); 
$(".btnDelete").bind("click", Delete); 
} 
}); 

。

プレビュー：あなたも、挿入をクリックした後、上の写真から見ることができるように

、私のエラーメッセージがまだ表示されます。

著者のコードは非常に構造化されていますが、誰かがより簡単でよりシンプルな方法を持っていれば、サンプルソリューションを提供できますか？

多くの感謝！

Answer 1

あなたがチェック値

編集一致するブール値を返します

$("input[name=gender]").prop("checked"); 

必要があるように見える：あなたは同じコードを維持したい場合は、あなたが.validを追加する必要が

をすべてのgenderクラスの入力に対応しています。この方法では、ラジオをチェックすると有効になり、エラーは発生しません。

$('.gender').on('input', function() { 
    var input = $(this); 
    var is_checked = $("input[name=gender]:checked").length != 0; 
    if (is_checked){ 
    $('.gender').removeClass("invalid").addClass("valid"); 
    } else { 
    $('.gender').removeClass("valid").addClass("invalid"); 
    } 
});