javascript - 如何使用 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");

它将返回一个与检查值匹配的 bool 值

编辑:

如果您想保持代码相同，则需要将 .valid 类添加到所有 gender 类输入中。这样，当您检查一个 radio 时，它将使两者都有效，并且您不应该收到错误。

$('.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");
  }
});