我尝试创建多个复选框输入。至少需要选中一个复选框才能提交表单。我所做的就是添加了隐藏的输入。然后,通过更改功能,有一个合并功能将复选框值组合在一起。在其下有一个变量,用于检查复选框的长度。
在jQuery验证中,我尝试要求使用该字段和产生其关联复选框的父单选按钮。然后,我将复选框字段设置为最小值1。
当前,当我点击“提交”时,表单将通过,而没有选中任何复选框或父单选按钮。
有人看到我在做什么错吗?
$(document).ready(function() {
var showMe = '';
/*var checkLength = '';
$('#interest').val(checkLength);
console.log(checkLength);*/
var newStatus = '';
//Telling whether new is selected
var usedStatus = '';
//Telling whether used is selected
var newSelPush = '';
var usedSelPush = '';
$('.equipmentOptionCont').change(function() {
var newSel = [];
var usedSel = [];
//Get new mower options
$("input:checkbox[name=newMowerOption]:checked").each(function() {
newSel.push($(this).val());
newSelPush = newSel.join(', ');
});
//Get used mower options
$("input:checkbox[name=usedMowerOption]:checked").each(function() {
usedSel.push($(this).val());
usedSelPush = usedSel.join(', ');
});
//Interest length creation for validation
var interestCheck = (newSelPush || usedSelPush);
//Hidden interest input value
checkLength = interestCheck.length;
console.log(checkLength);
$('[name="interestHidden"]').val(checkLength);
});
//Validation
$('#prodNotifForm').validate({
onfocusout: true,
rules: {
interestHidden: {
//required: true,
required: $('#newMowerSelect').prop('checked') == true,
min: 1
}
},
messages: {
interestHidden: {
required: "Please choose at least one interest",
min: "At least one interest needs chosen"
}
},
errorPlacement: function(error, element) {
if ($(element).attr('name') == 'interestHidden') {
error.insertBefore(element.parent('div'));
} else {
error.insertAfter(element); // <- default
}
},
submitHandler: function(form) {
//Variables for the form ids
var notifFirstName = $('#notifFirstName').val();
$.ajax({
url: 'subscriberNotifSend.php',
type: 'POST',
data: {
'notif_first_name': notifFirstName,
},
success: function(data) {
//console.log(data); // data object will return the response when status code is
},
complete: function() {
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus + '|' + errorThrown);
//console.log('error'); //otherwise error if status code is other than 200.
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
<form id="prodNotifForm">
<div id="interestContainer">
<input type="radio" name="notifymethod" id="newMowerSelect" class="equipmentMainSel notifCheck">
<label for="newMowerSelect" class="checkMower">
<div class="labelMowerSelect">New</div>
<img src="" alt="New Mower Options" class="mowerOptionImgs">
</label>
<input type="radio" name="notifymethod" id="usedMowerSelect" class="equipmentMainSel notifCheck">
<label for="usedMowerSelect" class="checkMower">
<div class="labelMowerSelect">Used</div>
<img src="" alt="Used Mower Options" class="mowerOptionImgs">
</label>
<div id="interestError"></div>
<div id="newMowerOptions" class="equipmentOptionCont">
<p class="notifQuestion">New Mower Options</p>
<div class="equipmentWrap">
<label class="equipmentOptions">Ferris</label>
<input type="checkbox" name="newMowerOption" value="Ferris">
</div>
</div>
<div id="usedMowerOptions" class="equipmentOptionCont">
<p class="notifQuestion">Used Mower Options</p>
<div class="equipmentWrap">
<label class="equipmentOptions">Ferris</label>
<input type="checkbox" name="usedMowerOption" value="Ferris">
</div>
</div>
<div><input type="hidden" id="interestHidden" name="interestHidden" value=""></div>
</div>
<button id="notifSubmit">Sign up</button>
</form>