We Keep Coding

At least 1 required checkbox in form submit

I have a form with many checkbox. User must select at least one of them to submit the form. I've tested other stacks found here without success. This is my HTML code:
<form id="formnewsletter" action="mypage">
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi">Iscrivimi</button>
</div>
</form>
UPDATE with solution. This is the script that worked in my case:
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
$(document).ready(function () {
function checkMe() {
document.getElementById("formnewsletter").onsubmit = function() {
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
alert("Seleziona una lista!");
return false;
}
};
}
window.onload = function() {
checkMe();
}
});
Can someone suggest me the JavaScript code to let it work fine?

Since you haven't tagged it with jQuery, here is a solution in plain ol' javascript.
You can use CSS class of the checkboxes along with querySelector
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
}

with jquery it would work like this for example:
$("#submit").on("click", function() {
var checkboxes = $('.formlistbox input[type="checkbox"]');
if(checkboxes.filter(':checked').length < 1) {
alert("please check at least 1 checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi" id="submit">Iscrivimi</button>
</div>

If you (want to) use jQuery:
if($('.listchecknewsletter:checked').length > 0) {
// one or more are checked
}
Further, if you want to POST all the checkbox values, you have to change their name to group[], to make it an array.

in jquery not able to show a specific div in side a click event

i am working in asp.net mvc application ,have writen following code in jquery
$(document).ready(function () {
$(".field-validation-error").hide();
$(".select-billing-address-button").click(function () {
$(".edit-address").hide();
$("#billing-address-select").val(this.value);
$(".new-address-next-step-button").click();
$('html,body').animate({
scrollTop: $(".new-billing-address").offset().top
}, 'slow');
});
$(".adress-new-submit").click(function () {
$(".field-validation-error").show();
$(".new-address-next-step-button").click();
$('html,body').animate({
scrollTop: $(".new-billing-address").offset().top
}, 'slow');
});
$(".field-validation-error").hide(); this code the field validation field
but i want to unhide the field validation field when i click adress-new-submit
button. using the code $(".field-validation-error").show(); but i am not able
the achive the goal using the above code.can any one help me
my html view is as follows
<div class="edit-address">
<div class="inputs">
<label for="BillingNewAddress_FirstName">First name:</label>
<input class="text-box single-line" data-val="true" data-val-required="First name is required." id="BillingNewAddress_FirstName" name="BillingNewAddress.FirstName" type="text" value="John">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.FirstName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_LastName">Last name:</label>
<input class="text-box single-line" data-val="true" data-val-required="Last name is required." id="BillingNewAddress_LastName" name="BillingNewAddress.LastName" type="text" value="Smith">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.LastName" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Email">Email:</label>
<input class="text-box single-line" data-val="true" data-val-email="Wrong email" data-val-required="Email is required." id="BillingNewAddress_Email" name="BillingNewAddress.Email" type="text" value="rakshiraik#gmail.com">
<span class="required">*</span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Email" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Company">Company:</label>
<input class="text-box single-line" id="BillingNewAddress_Company" name="BillingNewAddress.Company" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Company" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
<label for="BillingNewAddress_CountryId">Country:</label>
<span class="required">*</span>
<span class="field-validation-error" data-valmsg-for="BillingNewAddress.CountryId" data-valmsg-replace="true" style="display: none;">Country is required.</span>
</div>
<div class="inputs">
<label for="BillingNewAddress_StateProvinceId">State / province:</label>
<span id="states-loading-progress" style="display: none;" class="please-wait"></span>
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.StateProvinceId" data-valmsg-replace="true"></span>
</div>
<input id="Location" name="Location" type="text" value="" placeholder="Enter a location" autocomplete="off" style="width:400px;"><br><br>
<div class="inputs">
<label for="BillingNewAddress_City">City:</label>
</div>
<div class="inputs">
<label for="BillingNewAddress_Address1">Address 1:</label>
<span class="required">*</span>
</div>
<div class="inputs">
<label for="BillingNewAddress_Address2">Address 2:</label>
<input class="text-box single-line" id="BillingNewAddress_Address2" name="BillingNewAddress.Address2" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.Address2" data-valmsg-replace="true"></span>
</div>
<div class="inputs">
</div>
<div class="inputs">
<label for="BillingNewAddress_PhoneNumber">Phone number:</label>
</div>
<div class="inputs">
<input class="text-box single-line" id="BillingNewAddress_FaxNumber" name="BillingNewAddress.FaxNumber" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="BillingNewAddress.FaxNumber" data-valmsg-replace="true"></span>
</div>
<button type="button" title="Continue" class="button-1 adress-new-submit">Continue</button>

You can try .toggle() in place of .show()
$(".field-validation-error").toggle();
Some times using the ID works, in place of $(".field-validation-error").toggle(); use "#idName" after giving it an id.
Make sure you try everything.

How to show/hide HTML elements with checkboxes

I was trying to create a checkbox checked by default for an ecommerce website, I want to show the div when the checkbox is unchecked. and hide the div when the checkbox is checked.
My Fiddle: http://jsfiddle.net/ScnQT/3161/

You can check whether checkbox is checked using $(this).prop('checked')
if checked $(this).prop('checked') returns true else false
for more details here
Updated fiddle
$('.shipping_address_details').hide();
$('#checkedforShippingAddress').change(function(){
if($(this).prop('checked')){
$('.shipping_address_details').hide();
}else{
$('.shipping_address_details').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress">
<span>Ship to the same address</span>
</p>
<div class="shipping_address_details">
<br/>
<h3>Shipping Address</h3>
<p class="form-row form-row form-row-first ">
<label>First Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_first_name" >
</p>
<p class="form-row form-row form-row-last " >
<label>Last Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " >
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-first" >
<label>Email Address <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>Postal Code <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<p class="form-row form-row form-row-first" >
<label>State <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>City <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-wide" >
<label>Address <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text">
</p>
<p class="form-row form-row form-row-wide address-field">
<input type="text" class="input-text">
</p>
</div><!-- shipping address container ends -->
</form>

$('.shipping_address_details').hide();
$('#checkedforShippingAddress').change(function(){
if($(this).prop('checked')){
$('.shipping_address_details').hide();
}
else if(!$(this).prop('checked')){
$('.shipping_address_details').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>
<input type="checkbox" name="shipping_address" checked="checked" id="checkedforShippingAddress">
<span>Ship to the same address</span>
</p>
<div class="shipping_address_details">
<br/>
<h3>Shipping Address</h3>
<p class="form-row form-row form-row-first ">
<label>First Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " name="billing_first_name" >
</p>
<p class="form-row form-row form-row-last " >
<label>Last Name <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text " >
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-first" >
<label>Email Address <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>Postal Code <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<p class="form-row form-row form-row-first" >
<label>State <abbr class="required" title="required">*</abbr></label>
<input type="email" class="input-text ">
</p>
<p class="form-row form-row form-row-last" >
<label>City <abbr class="required" title="required">*</abbr></label>
<input type="tel" class="input-text ">
</p>
<div class="clear"></div>
<p class="form-row form-row form-row-wide" >
<label>Address <abbr class="required" title="required">*</abbr></label>
<input type="text" class="input-text">
</p>
<p class="form-row form-row form-row-wide address-field">
<input type="text" class="input-text">
</p>
</div><!-- shipping address container ends -->
</form>

Your fiddle is almost right, but you have a small error. Here's a working fiddle:
http://jsfiddle.net/3ku3me4o/
You need if($(this).prop('checked') === true) rather than if($(this).prop('checked', true). The latter is setting the "checked" property to be true rather than testing if it's true.

https://jsfiddle.net/ScnQT/3165/
Although you can use .prop. If i'm not mistaken. .prop should be used for setting attributes, over checking them.
if($(this).is(':checked')){}
Should solve your problem.

$('.shipping_address_details').hide();
$('#checkedforShippingAddress').click(function(){
if($(this).is(":checked"))
$('.shipping_address_details').hide();
else
$('.shipping_address_details').show();
})
Fiddle

form validation cannot read property style of null

I have a form with validation but the date validation message is not showing and in the console it reads..property style of null and highlights this code "error_box.style.display = 'block';" within the context of this function.
function displayError(fieldname, message){
var input_field = document.querySelector('#'+fieldname);
var error_box = document.querySelector('#'+fieldname+'Message');
addClass(input_field, 'error');
removeClass(input_field, 'correct');
error_box.style.display = 'block';
}
I have the full code in a fiddle:
http://jsfiddle.net/tUa5e/
HTML
<form action="#">
<div class="formColumn1">
<label for="pickup"><span class="textStyle">Pick-up</span>
<input type="date" id="pickup"></label><br>
<label for="dropoff"><span class="textStyle">Drop-off</span>
<input type="date" id="dropoff"><br>
<span id="dropoff" class="message">That date is invalid</span></label>
<div id="pickuperror"></div>
</div>
<!--COLUMN ONE END -->
</div>
<!--COLUMN TWO -->
<div class="formColumn2">
<label for="name"><span class="textStyle">Full Name*</span>
<input type="text" id="name"><br>
<span id="nameMessage" class="message">You must have a valid name</span>
</label>
<label for="email"><span class="textStyle">Email*</span>
<input type="text" id="email"><br>
<span id="emailMessage" class="message">You must have a valid email</span>
</label>
<label for="phoneNumber"><span class="textStyle">Phone Number*</span>
<input type="text" id="phoneNumber"><br>
<span id="phoneNumberMessage" class="message">You must have a valid phone number</span>
</label>
<label for="postalAddress"><span class="textStyle">Postal Address</span>
<input type="text" id="postalAddress"><br>
</label>
<label for="city"><span class="textStyle">City</span>
<input type="text" id="city"><br>
</label>
<span class="textStyle">Addtional Information</span>
<textarea name="comment" form="usrform">Enter text here...</textarea>
<input type="submit" id="submit" value="Submit"/>
<!--COLUMN TWO END-->
</div>
</form>
<!--END OF FORM-->
</div>

how to generate the below html dynamically and how to populate the corresponding calculated fields on change

Below is my html I want to generate it automatically based on number of rows return by a jqgrid. and I want to calculate the values of other input box on change of the other. Please see the jsfiddle link for what I have tried
<div class="col-2">
<div class="filters padd10">
<div class="formItem" style="border-right:1px solid #4b4b4b; width:29%;">
<label>New Allocated Amount</label> <span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<span class="formlist"><input type="text" value=""></span>
<br> <span class="fright mr30">$0</span>
</div>
<div class="formItem" style="width:43%; border-right:1px solid #4b4b4b;">
<label>New Allocated Amount</label> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="formlist"><input type="text" value="" class="mr10" ><span class="txtAmount">(or) </span>
<input type="text" value="" style="width:30px">%</span> <span class="fright" style="margin-right:100px;">$0</span>
</div>
<div class="formItem" style="width:12%; margin-right:0px">
<label>
<input type="checkbox" value="">Freeze</label> <span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class="formlist mtop5"><input type="checkbox" value=""></span>
<span class=""><input type="checkbox" value=""></span>
</div>
</div>
</div>
Please see
http://jsfiddle.net/blackeyes123/Dd9Kf/