我很难找到解决方案。我希望你能帮忙吗?
我创建了一个带有单选按钮的弹出窗口,我需要用户选择。我已设法将其放入弹出窗口,但现在我试图显示错误消息,如果有人在选择选项之前尝试单击“提交”。
到目前为止我的代码没有按照我的意愿运行。即使没有选择,我的提交按钮也会继续淡出弹出窗口。
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
希望你能帮忙吗?谢谢。
干杯
答案 0 :(得分:0)
<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>
只需添加其中一个单选按钮即可。然后浏览器已经对表单进行了验证,如果没有选择单选按钮,则会出错。
此外,您还可以使用最常选择的选项,这样用户默认情况下总是选择一些。您可以像这样使用格式:
<input type="radio" checked>
答案 1 :(得分:0)