7 Replies - 248 Views - Last Post: 28 June 2019 - 01:30 PM

#1 pfar54   User is offline

  • D.I.C Addict

Reputation: 1
  • View blog
  • Posts: 538
  • Joined: 30-April 15

Checkbox validation with errorPlacement and hidden field

Posted 27 June 2019 - 08:47 PM

I have multiple checkbox inputs that I am trying to create validation for. At least one checkbox has to be selected for the form to submit. What I did was add a hidden input. Then with a change function, there is a join function that combines the checkbox values. Under that there is a variable that checks for the checkboxes' length.

In the jQuery validate, I have tried requiring the field and the parent radio button that produces its associated checkboxes. Then the checkbox fields I have set a min of 1.

Currently, when I hit submit, the form goes through without any of the checkboxes being selected or the parent radio buttons.

Does anyone see what I am doing wrong?


<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>
		</div>
	</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script>
$(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
	$('#notifSubmit').on('click', function(event) {
		$('#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.
					}
				});
			}
		});

This post has been edited by pfar54: 28 June 2019 - 05:49 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Checkbox validation with errorPlacement and hidden field

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:25 AM

Quote

$('.equipmentOptionCont').change

Div elements do not have a change event.
Was This Post Helpful? 0
  • +
  • -

#3 pfar54   User is offline

  • D.I.C Addict

Reputation: 1
  • View blog
  • Posts: 538
  • Joined: 30-April 15

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:28 AM

Not sure entirely where you are getting at. The rest of the code I have in that change event works. For instance my console.log to see the value length works.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:39 AM

Maybe the event bubbles up. You see the console.log statement on line 65 and it shows the correct value?
Was This Post Helpful? 0
  • +
  • -

#5 pfar54   User is offline

  • D.I.C Addict

Reputation: 1
  • View blog
  • Posts: 538
  • Joined: 30-April 15

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:41 AM

Yes, it shows the correct value.
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:44 AM

Quote

var interestCheck = (newSelPush || usedSelPush);

Are you aware of the result when you use boolean or with something like arrays? What do you expect interestCheck to be?

Quote

Currently, when I hit submit, the form goes through without any of the checkboxes being selected or the parent radio buttons.

It looks like you only require interestHidden to be a minimum (length or value?) of 1 if one of the radio buttons is selected. You don't require either radio button to be selected.
Was This Post Helpful? 0
  • +
  • -

#7 pfar54   User is offline

  • D.I.C Addict

Reputation: 1
  • View blog
  • Posts: 538
  • Joined: 30-April 15

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 10:44 AM

It doesn't matter what is it. In the validation, I am just requiring it having a value and that the minimum length is 1.
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,111
  • Joined: 15-January 14

Re: Checkbox validation with errorPlacement and hidden field

Posted 28 June 2019 - 01:30 PM

I'm not familiar with the plugin you're using, but this line:

required: $('#newMowerSelect').prop('checked') == true

That's going to set required to true if that is checked, or false if it is not checked. I'm assuming that means that if you set required to false, then it's not required. So that sounds to me like it's only required if that is checked.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1