Question

<form id="contact-form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method=post>
    <p>Gender:</p>
    <label>
        <input type="radio" name="gender" id="gender-m" value="male">
        Male
    </label>
    <label>
        <input type="radio" name="gender" id="gender-f" value="female">
        Female
    </label>
</form>

 function checkgender(){
      var gender = $('#gender').val();
      if ($("#gender:checked").length == 0) {
           $("#gender-result").html('gender requirements.');
           return false;
           alert("this is checkgender");
      };

      //jquery started
      $(document).ready(function () {
           $('#contact-form').submit(checkgender);
      });
 });

当我点击提交时，我的意图很简单，如果未选择性别，则显示#gender-result，但我尝试了很多方式，我仍然无法得到我想要的内容。

Answer 1

<强> HTML

<form id="contact-form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method=post>
    <p>Gender:</p>
    <label>
        <input type="radio" name="gender" id="gender-m" value="male">
        Male
    </label>
    <label>
        <input type="radio" name="gender" id="gender-f" value="female">
        Female
    </label>
        <button id="submit">submit</button>
</form>

<强> JS

$(document).ready(function () {
    $('#submit').click(function(){
        if(! $("#contact-form").find("input[name=gender]:checked").length){
        alert("pleade cheeck")
        return false;
        }

    });
});

<强> DEMO

注意：请勿在{{1}}功能

中包含文档

Answer 2

在提交功能中，您必须使用以下功能进行验证

    $("form").submit(function () {
var validationChecker =checkgender();
 if (validationChecker == 1) {
return false;
}
});


function checkgender() {
    var gender = $('#gender').val();
    if ($("#gender:checked").length == 0) {
        $("#gender-result").html('gender requirements.');
        alert("validation");
        return "1";
    }
    else
    {
                alert("success");
      return "0";
    }

  }

<强>小提琴 http://jsfiddle.net/Isakkiraj/t9trx946/

Answer 3

$('#gender').val();错误，您需要使用$('input[name="gender"]')来访问单选按钮（#gender表示选择ID =＆＃34; gender＆＃34;）的元素。

然后添加:checked以获取所选值：$('input[name="gender"]:checked').val()

如果undefined，请显示消息并返回false以阻止表单提交，否则请提交表单。

在表单提交按钮或表单提交事件上绑定验证。

    function checkgender(){
       $("#gender-result").hide();
          if (undefined == $("input[name='gender']:checked", "#contact-form").val()) {
               $("#gender-result").html('gender requirements.').show();
               return false;          
          }
          return true;
     }

    $("input[type='submit']", "#contact-form").on("click", function (e) {
      return checkgender();
    });

这是一个有效的fiddle。

jquery性别验证不起作用

3 个答案: