Develop Reference

How to make required atleast one checkbox when one of the main check box is checked

I want to require at least one checkbox from all when one of the upper checkboxes is enter image description hereclicked. the snap is attached herewith.
here is the javascript code
function toggleOtherTextboxVisiblewh()
{
var check = document.getElementById('wh');
var chk2=document.getElementsByName('s1[]');
var chk3=document.getElementsByName('q1[]');
if (check.checked) {
document.getElementById('sizewh').style.display = 'block';
}
else {
document.getElementById('sizewh').style.display = 'none';
for (i=0;i<chk2.length;i++)
chk2[i].checked=false;
for (b=0;b<chk3.length;b++)
chk3[b].value = "";
}
}

Having Button not run Function With Empty Input Field

So I have a button that whenever clicked appends whatever the user entered below the input field. I want to make it so when clicked with an empty field nothing appends (essentially the function does not run).
Here is my code:
var ingrCount = 0
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
var ingredientSpace = $("<p>");
ingredientSpace.attr("id", "ingredient-" + ingrCount);
ingredientSpace.append(" " + ingredientInput);
var ingrClose = $("<button>");
ingrClose.attr("data-ingr", ingrCount);
ingrClose.addClass("deleteBox");
ingrClose.append("✖︎");
// Append the button to the to do item
ingredientSpace = ingredientSpace.prepend(ingrClose);
// Add the button and ingredient to the div
$("#listOfIngr").append(ingredientSpace);
// Clear the textbox when done
$("#ingredients").val("");
// Add to the ingredient list
ingrCount++;
if (ingredientInput === "") {
}
});
So I wanted to create an if statement saying when the input is blank then the function does not run. I think I may need to move that out of the on click function though. For the if statement I added a disabled attribute and then removed it when the input box contains something. But that turns the button another color and is not the functionality I want. Any ideas I can test out would help. If you need any more information please ask.

If you're testing if ingredientInput is empty, can you just return from within the click event?
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if(ingredientInput === '') { return; }
// rest of code

Simply use :
$("#addIngrButton").on('click', function() {
var ingredientInput = $("#ingredients").val().trim();
if (ingredientInput.length == 0) {
return false;
}
// ..... your code

Javascript activeElement doesen't work for dynamically created text-fields

I'm trying to create dynamically text fields when some text is entered to the text field. At first it created new textfield after every keystroke, but i tried to narrow it down so it would create one text-field per text-field.
To explain with a brief example, what i want to get is that in the beginning i have textfield A. If something is typed in textfield A then textfield B is created under textfield A. If something is typed in textfield B then textfield C is created under textfield B, and so on until the user leaves the last one empty.
What's wrong is the activeElement does not get chosen for dynamically created element. My idea was that when another textfield gets selected it will become (should've become) an activeElement with a length of a zero thus changing createNew to true and allowing it to create new textfield.
I hope i explained clearly what i'm trying to achieve, but English is not my mother-tongue so it's a bit difficult. I may be approaching this problem with a bad perspective so if someone has a better idea how to create text fields dynamically i'm open to different options. I did some googling before and didn't find much about that particular idea.
Anyways, here's my js.
//This is the javascript for the namepage.html
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$(".text-controller").bind("paste cut keydown",function(e) {
getNewInsertion();
})
});

You should delegate the event on the container:
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
Here I leave you a snippet:
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputcontainer">
<input type="text" class="text-controller" />
</div>

i want to change behaviour even when an option is not changed in dropdown jquery

I have a requirement to include a user input along with dropdown.
I implemented it using .change() method of jquery.
Using .change() function allows me to take the input when i select "Enter value" option.
In order for this code to work again i will have to change the selection. i.e .
When i click on "Enter value" option again, no index will be changed and nothing will happen.
How do i get the focus to the textbox with out changing the selected option.
In short i want the current functionality to work multiple times with out having to select other options.
My code in js fiddle is :
My code in jsfiddle
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});

You could change the select value to be "0" and thus show "None" after giving focus to the input field.
jQuery(".gfield_select").change(function() {
var val = jQuery(this).val();
var enter = jQuery(this).parent().find('option:selected').text();
var x = jQuery(this).parent();
if (enter ==="Enter a value" || enter === "Enter value"){
var holder = x.find('.holder');
holder.val('');
holder.prop('disabled',false);
holder.focus();
jQuery(this).val("0"); // Change select value to None.
} else {
x.find('.holder').val(x.find('option:selected').text());
x.find('.holder').prop('disabled',true);
}
});

How to validate specific input fields in a specific div

I am able to validate all fields within a div but I only want to validate specific fields. Here is a jsfiddle to show what I mean Once validation is passed the div is hidden. I have to enter data in all of the fields so if you check 'Yes' from the checkbox you will see a input field appear I don't want to include that and also if you select 'NoGame' from the dropdownlist once you enter data in all the fields apart from the two fields in the lower div (green border) and click the Test1 button you will see what I mean. Any suggestions?
This is the code which validates all fields and then Hides the div, which can also be seen in the fiddle
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
$.each($div.find("input[type='text']"), function (i, input) {
if ($(input).val().length == 0 || $.trim($(input).val()) == '') {
result = false;
return;
}
});
return result;
}
$(document).ready(function(){
$("#hide").click(function(){
if (IsValid('contentone')) {
$('#contentone').hide();
};
});
});

Input fields of type text that you don't want to validate exclude them from the validation process
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
var excludeElement = ["reason"]; //<-- EXCLUDED ELEMENTS IDS
$.each($div.find("input[type='text']"), function (i, input) {
if ($.inArray($(input).attr('id'), excludeElement) < 0 && ($(input).val().length == 0 || $.trim($(input).val()) == '')) {
result = false;
return;
}
});
return result;
}