We Keep Coding

required fields should only be needed upon element display

I have a form where a user is asked if he has an authorized representative in form of a radio button. If the user choose the 'yes' option, it will show more fields about the representative and it has a required input 'representative email'.
Is there a way for it to be only needed when the user choose the yes option? The form is not submitting because it keeps finding the value of this required field if the user chooses the 'no option'.
<form>
<div class="onBehalfOf">
<input type="radio" checked="checked" name="Radio" id="yes" value="Yes">
<label for="yes"> Yes</label>
<input type="radio" name="Radio" id="no" value="No">
<label for="no"> No</label>
</div>
<div class="authorizedRep">
Email:
<input type="email" required />
</div>
<input type="submit" label="submit" />
</form>
js Fiddle Example

With a small change you can toggle the required attribute on the email input when you show/hide the fields. You just need to add the appropriate emailInput class to the element.
$('.onBehalfOf input:radio').change(function() {
if ($(this).is(':checked') && $(this).val() == 'No') {
if ($('.authorizedRep').hasClass("hide")) {
} else {
$('.authorizedRep').addClass("hide");
$('.emailInput').removeAttr('required');
}
}
if ($(this).is(':checked') && $(this).val() == 'Yes') {
$('.authorizedRep').removeClass("hide");
$('.emailInput').attr('required');
}
});

How can I change the default styling for Jquery require_from_group method?

I am using the jQuery validation plugin to produce an alert that pops up if the user does not check at least one box in a group for a form, utilizing the require_from_group Method. However, there is a lot of checkboxes and it looks quite odd when an alert appears in the middle of all thirty checkbox options. I would like for just one alert to appear at the top of the group. How can this be done?
This is a picture of what I'm talking about:
thirty-four alerts when all I want is one
HTML:
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Occupation: Check All That Apply</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input class="occupation-group" onchange="showHideControlgrowerchecks();" type="checkbox" name="Grower" id="Grower"> Grower</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="PCA_Consultant" id="PCA_Consultant"> PCA/Consultant</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="Packer_Processor" id="Packer_Processor"> Packer/Processor</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="Research_Gov_Ed" id="Research_Gov_Ed"> Research/Gov/Ed</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="Assn_Commission" id="Assn_Commission"> Assn/Commission</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="Suppliermfgsvc" id="Suppliermfgsvc"> Supplier/Mfg/Svc</label>
<br>
<label>
<input class="occupation-group" type="checkbox" name="Ad_Agency" id="Ad_Agency"> Ad Agency</label>
<br>
<label>
<input class="occupation-group" type="checkbox" onchange="showHideControloccupation();" name="Other" id="Other"> Other</label>
<br>
<br>
<input type="text" class="form-control" style="display:none" name="Occupation-Other" id="Occupation-Other" placeholder="Please Specify Other Occupation Here" required>
<br>
<br>
</div>
</div>
</div>
Javascript:
$("#form1").validate({
rules: {
Grower: {
require_from_group: [1, ".occupation-group"]
},
PCA_Consultant: {
require_from_group: [1, ".occupation-group"]
},
Packer_Processor: {
require_from_group: [1, ".occupation-group"]
},
Research_Gov_Ed: {
require_from_group: [1, ".occupation-group"]
},
Assn_Commission: {
require_from_group: [1, ".occupation-group"]
},
Suppliermfgsvc: {
require_from_group: [1, ".occupation-group"]
},
Ad_Agency: {
require_from_group: [1, ".occupation-group"]
},
Other: {
require_from_group: [1, ".occupation-group"]
}
}
});

There is no such thing as "default styling" for the require_from_group method.
To combine the 34 messages into one, use the groups option.
If you don't like where the plugin is putting the validation message, use the errorPlacement option to change it. Within your custom function, you could use a conditional to move the message for one type of thing, leaving the default placement for everything else.

jQuery to Validate an Input Text Control based on Radio Selection

How do I validate that the input text corresponding to the radio option is checked?
For example, using the image above:
If Contact 1's E-Mail radio option is selected, Contact 1's E-Mail text field cannot be blank, but Contact 1's Phone and US Mail text fields are still permitted.
If Contact 2's US Mail radio option is selected, Contact 2's US Mail text field cannot be blank, but Contact 2's Phone and E-Mail text fields are still permitted.
I have built the form above using the HTML below, but you can play with my Fiddle here: fiddle.
BEGIN UPDATE: I have a newer fiddle with better code here:
fiddle2
It has more instructions in the HTML and a closer attempt at my jQuery. For some reason, though, it still does not seem to be doing anything.
END UPDATE
I have tried naming the fields so that my jQuery can parse them, but that does not mean there is not a better way.
<body>
<form name="jp2code" action="#" method="POST">
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_PhoneRadio" name="group1"/>
<label for="group1_PhoneText">Phone:</label>
<input type="text" id="group1_PhoneText" name="group1_PhoneText"/>
<br/>
<input type="radio" id="group1_EMailRadio" name="group1"/>
<label for="group1_EMailText">E-Mail:</label>
<input type="text" id="group1_EMailText" name="group1_EMailText"/>
<br/>
<input type="radio" id="group1_USMailRadio" name="group1"/>
<label for="group1_USMailText">US Mail:</label>
<input type="text" id="group1_USMailText" name="group1_USMailText"/>
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_PhoneRadio" name="group2"/>
<label for="group2_PhoneText">Phone:</label>
<input type="text" id="group2_PhoneText" name="group2_PhoneText"/>
<br/>
<input type="radio" id="group2_EMailRadio" name="group2"/>
<label for="group2_EMailText">E-Mail:</label>
<input type="text" id="group2_EMailText" name="group2_EMaiText"/>
<br/>
<input type="radio" id="group2_USMailRadio" name="group2"/>
<label for="group2_USMailText">US Mail:</label>
<input type="text" id="group2_USMailText" name="group2_USMailText"/>
</span>
</fieldset>
<div>
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
What is the best way to write the jQuery?
I am new to jQuery, but I attempted my hand at it based on some Show/hide examples.
What I created below does not work, but hopefully indicates what I am trying to accomplish.
$(function() {
$("input[type='radio']").change(function() { // when a radio button in the group changes
var id = $(this).id;
var index = id.indexOf('group');
if (index == 0) { // is there a better way to do this?
var groupN_Len = 7; // Length of 'groupN_'
var radio_Len = 5; // Length of 'radio'
var preStr = id.substring(0, groupN_Len);
$"input[name*='preStr']".validate = null; // clear validation for all text inputs in the group
var postStr = id.substring(groupN_Len + 1, id.Length() + 1 - radio_Len); // extract Phone, EMail, or USMail
$(preStr+postStr+'Text').validate({ rules: { name: { required: true } } });
}
});
});

To make sure that the radiobutton is checked for each field, add attribute required="" in one of the radiobuttons for each fieldset.
demo

OK, whatever radio button is selected in the Contact Group's Contact Preferences, that corresponding text field is required.
Here is where I am so far on my jQuery checking:
EDIT:
Modified with tilda's important detail about adding '.' to the class name.
Added Required Attribute: how to dynamically add REQUIRED attribute to textarea tag using jquery?
Removed Required Attribute: jquery removing html5 required attribute
Final code works and looks like this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script type="text/javascript">
$(function() {
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("input[type='radio']").change(function() {
$('.'+$(this).attr('name')).each(function(index) {
$(this).removeAttr('required');
});
if($(this).is(':checked')) {
$('.'+$(this).attr('id')).each(function(index) {
$(this).prop('required',true);
});
}
});
$('#submit').click(function() {
$(this).validate();
});
});
Back to the HTML of the document: I did a lot of subtle editing to the text by creating specific ids and names for the radio buttons that matched up with the class names for the text controls.
Here is that end result:
<body>
<form name="jp2code" action="#" method="POST">
<div>For each field below, provide the Phone Number, E-Mail Address, and Street Address. <b>Indicate the preferred contact method using the radio button.</b></div>
<fieldset>
<legend>Contact 1</legend>
<span>
<input type="radio" id="group1_Phone" name="group1"/>
<label for="group1_Phone">Phone:</label>
<input type="text" name="group1_PhoneText" class="group1 group1_Phone" />
<br/>
<input type="radio" id="group1_EMail" name="group1"/>
<label for="group1_EMail">E-Mail:</label>
<input type="text" name="group1_EMailText" class="group1 group1_EMail" />
<br/>
<input type="radio" id="group1_USMail" name="group1"/>
<label for="group1_USMail">US Mail:</label>
<input type="text" name="group1_USMailText" class="group1 group1_USMail" />
</span>
</fieldset>
<fieldset>
<legend>Contact 2</legend>
<span>
<input type="radio" id="group2_Phone" name="group2"/>
<label for="group2_Phone">Phone:</label>
<input type="text" name="group2_PhoneText" class="group2 group2_Phone" />
<br/>
<input type="radio" id="group2_EMail" name="group2"/>
<label for="group2_EMail">E-Mail:</label>
<input type="text" name="group2_EMailText" class="group2 group2_EMail" />
<br/>
<input type="radio" id="group2_USMail" name="group2"/>
<label for="group2_USMail">US Mail:</label>
<input type="text" name="group2_USMailText" class="group2 group2_USMail" />
</span>
</fieldset>
<div>
<input type="submit" value="Send" id="submit"/>
</div>
</form>
</body>
Let me explain what is going on in the jQuery, using the HTML above:
When a radio button's checked state changes, each control with a class name that matches the radio button's name attribute has the required property removed.
If a radio button is checked (i.e. checked=true), then each control with a class name that matches the radio button's id attribute has the required property added.
Finally, the validator seems to have to be run on a single form control (not on individual text controls like I was doing).
Here is the sample Fiddle that I ended with: Fiddle v8
At tilda: You didn't say much, but what you did say helped a lot!

Jquery validation multiple checkbox sets error placement

I have multiple sets of checkboxes.
How can i place the error message to the end of each set of checkboxes.
This code implementation will place the message right after the first element
The fiddle
<form id="myForm" action="">
<input type="checkbox" id="check0" name="check0" class="chkgroup"/>
Set 1 check 1?
<br />
<input type="checkbox" id="check1" name="check1" class="chkgroup"/>
Set 1 check 2?
<br />
<input type="checkbox" id="check2" name="check2" class="chkgroup"/>
Set 1 check 3?
<br />
<br />
<input type="checkbox" id="check3" name="check3" class="chkgroup2"/>
Set 2 check 1?
<br /><input type="checkbox" id="check4" name="check4" class="chkgroup2"/>
Set 2 check 2?
<br /><input type="checkbox" id="check5" name="check5" class="chkgroup2"/>
Set 2 check 3?
<br /><input type="submit" />
Custom method is use to validate the checkbox
$(function () {
jQuery.validator.addMethod("checkboxCheck", function(value, element,params) {
return $(params[0]+':checked').length > 0;
});
$("#myForm").validate({
rules: {
check0:{
checkboxCheck:['.chkgroup'],
},
check3:{
checkboxCheck:['.chkgroup2'],
},
},
messages: {
check0:{
checkboxCheck: "check your checkbox",
},
check3:{
checkboxCheck: "check your checkbox",
},
},
submitHandler: function(form) {
// ajax goes here
alert("valid form");
return false;
}
});
});

You can do that with css float and a div wrapper around each set.
see: http://jsfiddle.net/Xu7ZK/2/

jQuery radio button value validation

I'm using this in a form to check whether a radio button group has a certain value (Yes/No). The HTML for one of these is:
<form id="registerHere">
<div class="control-group">
<label class="radio">
<input type="radio" value="Yes" name="freemedia">
Yes
</label>
<label class="radio">
<input type="radio" value="No" name="freemedia" checked="checked">
No
</label>
</div></form>
And I'm using the following JS (jQuery.validate.js is included):
<script type="text/javascript">
$(document).ready(function(){});
$("#registerHere").validate({
rules:{
freemedia:{
required:true,
equalTo: "Yes"
},
},
messages:{
freemedia:{
required:"Please select",
equalTo:"Please apply to the 'freemedia' group first.</a>"
},
},
});
});
</script>
However, it is not checking the value correctly, as it always shows me the message, regardless of whether 'Yes' or 'No' is checked.
Where am I going wrong?

I cleaned up some of your jquery, you had a few errors in there.
Also, digging around in the plugin I noticed that you can use the 'equalTo' parameter to specify which control is required. It just uses the 'equalTo' as a selector for a query. So if you treat your 'equalTo' setting as a jquery selector, it should work. It may be a bit of a hack, but I had it working.
All you need to do is assign an id to your radio buttons and you should be good to go
<div class="control-group">
<label class="radio">
<input id="chkYes" type="radio" value="Yes" name="freemedia" />
Yes
</label>
<label id="chkNo" class="radio">
<input type="radio" value="No" name="freemedia" />
No
</label>
<input type="submit" value="Submit" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#registerHere").validate({
rules:
{
freemedia:
{
required: true,
equalTo: "#chkYes"
}
},
messages:
{
freemedia:
{
required: "Please select",
equalTo: "Please apply to the 'freemedia' group first."
}
}
});
});
</script>

You want to check your value selected at the time of form submission ,That's the good way to do it Give a predefined selected radio button and then check the selected Radio at the time of form sub mission that what done here
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>
Now Suppose you have not selected any Radio button by default then you can check that whether user has selected any radio butoon or not and if selected what is it?
Following code helps you in doing that
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>
Enjoy..!

In jquery validation plug-in "equalTo" is used to compare value between the fields, not on same field.(It's my study if any one knows more about it.Please let me know.)
You can add your custom method to it.
$.validator.addMethod("check_for_yes", function(value, element) {
return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");
Validation -
rules : {
freemedia : {
check_for_yes: true
}
}
OR
You can check it on Jquery click event of radio button by showing alert.