在弹出窗口中验证单选按钮

Question

我正在努力寻找解决方案。希望你能帮忙？

我创建了一个带有单选按钮的弹出窗口，需要用户选择。我已设法将其放入弹出窗口，但现在如果有人在选择选项之前尝试单击“提交”，我会尝试显示错误消息。

到目前为止，我的代码没有按我的意愿工作。即使没有做出选择，我的提交按钮也会继续淡出弹出窗口。

JS

    $("#myModal").draggable({
      handle: ".modal-header"
  });

$("#loadpage").click(function (e)
    {
        HideDialog();
        e.preventDefault();
    });
function setCookie(name, value, days) { // from http://www.quirksmode.org/js/cookies.html
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
window.onload = function () {
    var myVar = getCookie('Cookie Consent');
    console.log(myVar)
    if (myVar) {
        if (myVar=="Level 1") document.getElementById('Level 1').click(); // or .checked=true; 
        else if (myVar=="Level 2") document.getElementById('Level 2').click();
    }
    document.getElementById('loadpage').onclick = function () {
        var m = document.getElementById('Level 1');
        var f = document.getElementById('Level 2');
        var t = document.getElementById('Level 3');
        if (m.checked) {
            setCookie('cookie consent', m.value, 365);
        } else if (f.checked) {
            setCookie('cookie consent', f.value, 365);
        } else if (t.checked) {
            setCookie('cookie consent', t.value, 365);
        }
    }
}

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#blk-"+$(this).val()).show('slow');
    });
 });


//Controls how the modal popup is closed with the close button
function HideDialog()
{
    $("#myModal").fadeOut(300);
    }

$(function()
  {
    $('#myform').validate(
      {
        rules:
        {
          toggler:{ required:true }
        },
        messages:
        {
          toggler:
          {
            required:"Please select an option<br/>"
          }
        },
        errorPlacement: function(error, element) 
        {
            if ( element.is(":radio") ) 
            {
               error.appendTo( element.parents('#myform') );
            }
            else 
            { // This is the default behavior 
                error.insertAfter( element );
            }
         }
      });

  });

这是我的codepen demo

希望你能帮忙？谢谢。

干杯

Answer 1

您可以使用选择器提取输入类型单选的 DOMlist，然后使用.each 方法迭代它们中的每一个，然后您可以根据需要添加自定义验证或 CSS。示例

  $("#loadpage").click(function (e)
{
  $("input[name='toggler']").each(function(index) {
    if ($(this).prop("checked")) {
    alert("checked")
}
})
    HideDialog();
    e.preventDefault();
});

更新 Codepen 链接here

Answer 2

<form>
  option1<input type="radio" name="foo" value="option1" required>
  option2<input type="radio" name="foo" value="option2">
  option3<input type="radio" name="foo" value="option3">
  <br><br>
  <input type="submit" value="submit">
</form>

只需将 required 添加到其中一个单选按钮即可。那么浏览器已经对表单进行了验证，如果没有选择单选按钮就会报错。

此外，您还可以在最常选择的选项上使用选中，这样用户默认总是选择一些东西。你可以像这样使用检查：

<input type="radio" checked>