使用带有jquery validate的隐藏字段进行复选框验证

时间:2019-06-28 14:26:56

标签: javascript jquery html jquery-validate

我尝试创建多个复选框输入。至少需要选中一个复选框才能提交表单。我所做的就是添加了隐藏的输入。然后,通过更改功能,有一个合并功能将复选框值组合在一起。在其下有一个变量,用于检查复选框的长度。

在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>

0 个答案:

没有答案