验证复选框输入必须仅通过jquery检查

时间:2016-10-17 09:23:18

标签: jquery html validation checkbox

我有一个带复选框的表单和jquery提交方法,如下所示:



$("form.adj_baru").submit(function (event) {
                event.preventDefault();
                if (confirm('Anda yakin akan submit ?')) {
                    var formData = new FormData($(this)[0]);
                    var cekbox = $("input[name=size]").val();
                    if (cekbox === "") {
                        alert("Pilih salah satu ukuran !");
                        return;
                    }
                    $.ajax({
                        url: 'adj/adj_crud.php', //type='add_adj'
                        type: 'POST',
                        data: formData,
                        async: false,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (data) {
                            console.log(data);
                            }
                    });
                }
                return false;
            });

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='adj_baru'>
  <label>Checkbox : </label><br>
  <input type='checkbox' name='size' value='m'>M<br>
  <input type='checkbox' name='size' value='l'>L<br>
  <input type='checkbox' name='size' value='xl'>XL<br>
  <input type='submit' value='SUBMIT'>
  </form>
  </body>
&#13;
&#13;
&#13;

当复选框为空时,警告alert("Pilih salah satu ukuran !")无效。如果未选中复选框 并选中不超过一个

,如何提醒

4 个答案:

答案 0 :(得分:1)

也许你更新下面的部分。检查是否有复选框已选中。

                var cekbox = $("input[name=size]:checked").length;
                if (cekbox == 0) {
                    alert("Pilih salah satu ukuran !");
                    return;
                }

答案 1 :(得分:1)

您可以使用.length计算选中的复选框。请参阅片段。然后,您可以决定,如果选中了一定数量的复选框(或者如果没有选中),该怎么办。

&#13;
&#13;
$("form.adj_baru").submit(function (event) {
                event.preventDefault();
                var checked = $("input[name=size]:checked").length;
                if (checked === 1) {
                  alert("1 checked");
                } else if (checked > 1) {
                  alert("More than 1 checked");
                } else {
                  alert("None checked");
                }
                return false;
            });
&#13;
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='adj_baru'>
  <label>Checkbox : </label><br>
  <input type='checkbox' name='size' value='m'>M<br>
  <input type='checkbox' name='size' value='l'>L<br>
  <input type='checkbox' name='size' value='xl'>XL<br>
  <input type='submit' value='SUBMIT'>
  </form>
  </body>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这是另一种检查我选中的复选框的方法:

                var cekbox = $("input:checked").length;
                if (cekbox == 0) {
                    alert("Pilih salah satu ukuran !");
                    return;
                } 

答案 3 :(得分:0)

试试此代码

 if ($("input:checked[name=size]").length != 1) {
      alert("Pilih salah satu ukuran !");
      return;
 }

以下是演示https://jsfiddle.net/8wzcyoe5/