Develop Reference

How can i create HTML5 like required alert for radio button?

For the input type text, if i add required attribute, my form won't submit and browser will focus on required field and alert will say please fill this field.
For the input type radio, if i add required attibute, my form won't submit but also it does not provide me any alert or focus on the radio which is unchecked.
If this is not an in-built functionality for HTML5, can i in some way create it and make it look like the same as it looks for text inputs so that style integrity is also preserved?

This code works well, if you not select radio, form will not submit. If you select one and enter text in textbox, form will submit.
<form>
<input type="radio" name="one" value="1" required>
<input type="radio" name="one" value="2" required>
<input type="radio" name="one" value="3" required>
<input type="text" name="two" required>
<button>Submit</button>
<form>
Checked on latest version of Google Chrome. May be you found a bug in your browser, try to update it.

Beside required radio button alerts work "perfectly fine" in Chrome...
jsBin demo
it makes no sense at all to have an alert for a radio button, that's silly.
If you have a radio button:
there's absolutely no need to have only one radio button. → Use checkboxes.
there's absolutely no reason to have all radio buttons unchecked initially.
one must be checked by default - and it's your job to do so
logically there's no need to popup alerts like "This radio button is required" - therefore neither to set a required attribute to a radio button.
if you still don't understand why... well simple because radios are used as UI switch states. Only one can and must be checked. If you make them all initially unchecked - and a client unintentionally hits a radio - he's dead in the devil's loop, because once you enter the circle there's no way out. Therefore makes no sense to have all blanks in the first place. You cannot undo... (well, unless you have another silly checkbox or something that says "uncheck all radio buttons!" nonsense).

javascript code for required checkbox

I have a website and I'm trying to make my (extra cost) checkboxes required before proceeding to checkout with paypal. The checkboxes, when clicked, add extra money to the total price as well (not sure if that affects anything). I also cannot find the name= field for the checkboxes so I used id= which I'm sure is completely wrong. Sorry I am extremely new with this.
ALSO NOTE - after my checkbox form I have to go through 2 more pages of clicking a book now button before I arrive at the SUBMIT checkout button... not sure if this stops anything from working correctly? –
I have added the following to my custom css:
<form action="../" onsubmit="if (this.package-44.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="checkbox" id="package-44" value="add" required="required" /></p>
<p><input type="submit" name="woocommerce_checkout_place_order" value="Proceed to PayPal" required="required" /></p>
</form>
I posted this in footer.php of my theme:
$('#formTemplate').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
//If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
$("#formTemplate [required]").each(function(index) {
if (!$(this).val()) {
//If at least one required value is empty, then ask to fill all required fields.
alert("Please fill all required fields.");
return false;
}
});
}
return false; //This is a test form and I'm not going to submit it
});
I have also changed the inputs to <required="required" />on the backend of my checkbox input. This is still not stopping me from proceeding with my checkout.
any more help is appreciated.

if I understand you that the checkbox is required. Is it?
Just change the checkbox line:
<p><input type="checkbox" id="package-44" value="add" required ></p>

There is a simple html code for required for html inputs.
add required="required" to the input element. Example:
<input type="checkbox" required="required" />
When you submit the form, and the checkbox isn't checked, the browser will give you an alert to inform you that you need to check the checkbox element.
And because you want to do this in javascript, you can take a look at this answer: How to set HTML5 required attribute in Javascript?
EDIT: See comment from Marko below about checking the submitted forms with the required tags.

Clear Checkbox when Radio Button selection is Changed

I am using a form builder with field IDs in Wordpress. I need to uncheck a specific checkbox if a specific radio button selection is changed. The radio button's field ID is 180. The checkbox's field ID is 640. Here's what I tried first:
<script type="text/javascript">
jQuery(document).ready(function($){
$('input[name="item_meta[180]"]').change(function(){
$('input[name="item_meta[640]"]').val('');
})
})
</script>
Note that this script was originally written to change the value of a dropdown, not a menu. The only change I made to the code was changing "select" to "input" on line 3.
I've also tried changing
.val('');
to
.attr('checked', false);
and also to
.removeAttr('checked');
None of these work. The checkbox remains checked when the radio button is changed. Does anyone have any ideas? Thanks in advance!
UPDATE: Here are the two relevant form fields in HTML:
<div id="frm_field_180_container" class="frm_form_field form-field frm_required_field frm_top_container">
<label class="frm_primary_label">Pricing Categories
<span class="frm_required">*</span>
</label>
<div class="frm_description">Select your meta-category then locate your entry fee in the subsequent dropdown.</div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-0" value="Independent Film & Videos" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-0">Independent Film & Videos</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-1" value="Film / Video for TV & Cable Production" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-1">Film / Video for TV & Cable Production</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-2" value="TV Ads, PSAs, Screenplays, New Media, Websites, etc." class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-2">TV Ads, PSAs, Screenplays, New Media, Websites, etc.</label></div>
<div class="frm_radio"><input type="radio" name="item_meta[180]" id="field_180-3" value="Student Entry of Any Category (with 2 Additional Categories Free) - $45" class="required" onclick="frmCheckDependent(this.value,'180')"/><label for="field_180-3">Student Entry of Any Category (with 2 Additional Categories Free) - $45</label></div>
</div>
and
<div id="frm_field_640_container" class="frm_form_field form-field frm_top_container frm_last_third">
<label class="frm_primary_label">Apply Early-Bird Discount
<span class="frm_required"></span>
</label>
<div class="frm_opt_container"><div class="frm_checkbox" id="frm_checkbox_640-0"><input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" /><label for="field_640-0">1-3 Categories: $5</label></div>
</div>

The following approach appears to work:
$('input[name="item_meta\\[180\\]"]').change(function(){
$('input[name="item_meta\\[640\\]\\[\\]"]').prop('checked',false);
});
JS Fiddle demo.
Note that I removed the onclick (since they weren't defined, their absence generated errors, and if you're using jQuery why are you even using in-line event-handlers?). Also, the escaping of the square-brackets (using the \\ characters).
References:
prop().

You've got a mismatch for the name of the checkbox, between your HTML and your JQuery . . .
HTML
<input type="checkbox" name="item_meta[640][]" id="field_640-0" value="5" />
Here, the name attribute is item_meta[640][].
JS
$('input[name="item_meta[640]"]').val('');
Here, the name attribute is item_meta[640].
Because of that, the selector is not matching the checkbox. If you update you JQuery selector to $('input[name="item_meta[640][]"]'), it should work fine.
As noted by Dave Thomas, you are better going with .prop('checked', false); to uncheck the box.

How does one use the jquery-plugin "inline form validation engine" with radio buttons (one option required)?

Right now I am working on a project that uses the "Inline Form Validation Engine 2.6.2", jQuery plugin by C.Dugas and O.Refalo (because many people here know it best). On top of that we are reworking many pages to use knockout.js.
Now to my problem:
My usecases determine that the selection of an option is required and it is also required that the user explicitly chooses the option - especially the 'I don't have a job' one - wherefore my suggestion of using that option as a default option was not acceptable.
From what I found via the original documentation of the given jquery-plugin I concluded that my inputs needed the attributes type="radio" and data_validation_engine="validate[required] group".
Following that information I ended up with this code to create my radiobuttons:
<div data-bind="foreach: radioButtonOptions.Company, visible: true" style="">
<div>
<input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="0" id="Company0">
<label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company0">I don't have a job!</label>
</div>
<div>
<input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="1" id="Company1">
<label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company1">Softdrink Company</label>
</div>
<div>
<input type="radio" data_validation_engine="validate[required] radio" name="Company" data-bind="value: Value, checked: $root.model.Company, attr: { id: 'Company'+Value() }" data-errormessage-value-missing="Please choose your employer." data-prompt-target="ym-message-Company" value="2" id="Company2">
<label data-bind="attr: { for: 'Company'+Value() }, text:Text" for="Company2">Food Company</label>
</div>
</div>
So that will end up in 3 nicely labelled and unselected RadioButtons.
My submit button will then check the forms validity prior to sending the post:
$("#submitButton").click(function (event) {
if (!$('#inputForm').validationEngine('validate'))
return false;
// submit per ajax ...
});
and thereby prevent submitting if the validation fails.
This works properly for any "validate[required]"-rule I have set on select-lists and textboxes and even through a small extension for my DateTime Editor-Template that splits the date in 3 different inputs and reassembles it onchange in a fourth hidden field.
But for some reason - which I fail to see - it will not work with my radiobutton lists.
Did anyone encounter a similar problem with this plugin and was able to solve it or does anyone by chance have a good idea how to try and find the problem... I have to admit right now I feel a little stuck
Thx in advance for any help and/or suggestions that will lead to a solution!

Sorry, I had a typo in my code generation. My generator wrote "data_validation_engine" instead of "data-validation-engine". Sadly, I just didn't see the difference between my code and the example code of the plugins official documentation page. But - triggered on leonhart's comment - having a closer look into the engines source code I finally realized the typo.
Thanks again Leonhart!

PHP form validation - adding a validation tick box

I'm using this tutorial to try and make a form http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
My form works great but I have included 3 tick boxes that I want the user to tick before they can submit. Creating this validation has had me scratching my head all day!
I've tried making these custom fields but am pretty sure my syntax is wrong. I am well out of my depth here! The tutorial provides example that I tried to implement but the coding is too different for me to use on my form. This is what I tried:
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox" value='<?php echo $formproc->SafeDisplay('email') ?>'</label><label for='Please tick the box before pressing submit' >
And then after the form, inside the script adding:
frmvalidator.addValidation("checkbox1","checkbox1","Please tick the box before pressing submit");
The form still submits but my validation doesn't happen. If anyone can point me in the right direction, that would be really incredible.
I'm not sure if it's the done thing to post the actual page I'm working on as it's my clients website?

It's in the documentation.
frmvalidator.addValidation("checkbox1","shouldselchk=on");

First you need to give value to your checkbox as below
<input type="checkbox" name="checkbox1" id="checkbox1" value="1"/>
Then, you need to pass type of validation in second argument of addValidation function as below
frmvalidator.addValidation("checkbox1","shouldselchk=1");