We Keep Coding

Jquery validate require from group not working

Having some trouble with this function of the validation plugin:
http://jqueryvalidation.org/require_from_group-method
Related part of the form:
<input class="org-group" type="checkbox" name="org[1]" id="org[1]" value="on">
<input class="org-group" type="checkbox" name="org[2]" id="org[2]" value="on">
<input class="org-group" type="checkbox" name="org[3]" id="org[3]" value="on">
This list of checkboxes is dynamic. It could have 2 entries, or 50 entries, that's why I am using an array in the form. I want the plugin to ensure that one of the xxx checkboxes in the org-group class is checked.
I use this in the plugin:
$( "#orgform" ).validate({
rules: {
org[]: {
require_from_group: [1, ".org-group"]
},
However, it's not working. The form just submits regardless the amount of boxes checked. The "submithandler" works fine. I have some other text fields in this form which are required. If these fields are not filled, the validation runs fine.
What am I doing wrong?

You need to make sure you've referenced all of the required JQuery libraries. If you're using just the core library, validation won't work.
Make sure you're also referencing additional-methods.min.js
Fiddle Example
Once you have all of the required references, you'll need to modify your html content, so that all of your check boxes have the same name. Validation won't work if all of the names are unique. The ids will obviously have to remain unique.
Updated Html:
<form id="orgform">
<input class="org-group" type="checkbox" name="org" id="org[1]" value="on">
<input class="org-group" type="checkbox" name="org" id="org[2]" value="on">
<input class="org-group" type="checkbox" name="org" id="org[3]" value="on">
<input class="org-group" type="checkbox" name="org" id="org[4]" value="on">
<input type="submit" value="Validate">
</form>
Notice that all of the checkboxes have a name of "org".
After you've updated your html, update the call to validate to reference "org" instead of "org[]". If you inspect the console you'll notice the following error:
Uncaught SyntaxError: Unexpected token [
This is because the rules property doesn't accept [ or ]
With the html changes, you'll also need to update your JQuery.
Updated JQuery:
$("#orgform").validate({
rules: {
org: {
require_from_group: [1, ".org-group"]
}
}
});
Note: Please see the Fiddle example I've linked above for a working example.

How to validate a Bootstrap 3 angularJS form?

I have a form with some input type text, input type number, checkbox, radio, a select option and a submit button.
I want to validate each input. If a required input is not filled, I want to display a message.
Here's what happened :
For my first input, the message appears when I did not select a radio and even when I select.
<div class="form-group has-feedback">
I am : <br>
<label class="radio-inline">
<input type="radio" ng-model="sex" name="sex" id="sex" value="femme"> <strong>Woman</strong>
</label>
<label class="radio-inline">
<input type="radio" ng-model="sex" name="sex" id="sex" value="homme"> <strong>Man</strong>
</label>
<div ng-show="form.sex.$error.required">
<p class="help-block">
Sex is required
</p>
</div>
</div>
I miss something it the same for others inputs. I don't see what I am missing ?
Second, I want to disable the submit button when there is an error on a input. This does not work. Here is my code :
<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="form.$invalid" type="submit">Let me know</button>
You can see the complete code on Plunker.
Thanks for helping

Here is the updated plunker
http://plnkr.co/edit/ZfUE3uEjklJ2pow46Gs8?p=preview
<button ng-click="sendMessage();" class="btn btn-success pull-center" ng-disabled="!myForm.$valid" type="submit">Let me know</button>
use name attribute for all the fields you want to validate.
access error variables using form name. In you case its is "myForm".
You can disable form using the expressions:
myForm.$invalid
!myForm.$valid
name of your application is not correct in ng-app you have mentioned "myapp" and in script file it is "owmuchApp". I have used "owmuchApp" at both the places

First of all, your plunker add an error. You where using
ng-app="myApp"
instead of
ng-app="owmuchApp".
Your validation worked pretty well. I just added the "required" directive to both radio button and... it worked !
See this plunker working

You had 2 problems, first the name of your application module was wrong,
("owmuchApp" in the script.js and "myApp" in the index.html) so the application wasn't even loading.
You need set the ng-required field of the radio buttons group this way:
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="femme"> Woman
<input type="radio" ng-model="sex" ng-required="!sex" name="sex" id="sex" value="homme"> Man
Here is the working solution
Update
I forget to mention that i added a new condition on the show message:
<div ng-show="form.sex.$dirty && form.sex.$invalid">
<p ng-show="form.sex.$error.required" class="help-block">
Sex is required
</p>
</div>
Will be shown only when the user tries to submit the form, otherwise the message was been shown soon as the form was rendered.

onchange select radio isn't checked

<input type="radio" name="radiobutton" id="1_1 value="1. Жетоны" "/>
<select id="1_1" onchange="document.GetElementById(this.id).checked=true;">
How come when I change option of select, radio isn't checked?
Thanks for carefuly!
But there is something else wrong, because it does not work too:
<input type="radio" name="radiobutton" id="1_1" value="1. Жетоны" "/>
<select name="1_1" onchange="document.GetElementById(this.name).checked=true;">
Thanks to shashi!

There are two things wrong:
- Your input tag is invalid HTML - it's missing a closing double-quote on the id attribute's value, and you have an out-of-place double-quote at the end of the tag.
- It looks like you're trying to use the same id for both the input and select tag. You can't do that; their ids must be different.

Replace,
document.GetElementById(this.id) with document.getElementById(this.id);
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

Element IDs must be unique in a page, however element names can be repeated. Also, form controls must have a name to be successful (i.e. be submitted to the server).
So you can fix the problem by using references to form controls (and fixing the markup):
<form>
<input type="radio" name="radiobutton" id="1_1" value="1.blah">
<select name="whatever" id="1_1" onchange="this.form.radiobutton.checked=true;">
<option>0
<option>1
</select>
<input type="reset">
</form>
Note that you need a reset button, otherwise it's impossible to uncheck the radio button without reloading the page (or the user running a script).

Radio Button Control in jquery

I'm new to Web development and jQuery.
I'm trying to build an ASPX page with two RadioButton controls that must perform the following actions:
On page load, one of the two must be selected depending on a flag from an object on the ASPX page. Lets call it customer.Id. If the Id is true, select RadioButton one must be set else select RadioButton 2 must be set.
At any point after page load the user selects a RadioButton, the other must be deselected.
When RadioButton two is clicked, hide a Table named "employee table" and when RadioButton one is clicked, show that Table.
Can anyone please tell me how I can get this functionality in jQuery functions?

Not sure about .NET but in Classic ASP you would write a variable like this <%=customerID%>.
In jQuery, I think you can do something like this:
<input type="radio" id="radio1"> Yes
<input type="radio" id="radio2"> No
<table border="1" id="employeeTable">
<tr><td>This is the table</td></tr>
</table>
... and then some jQuery:
$(document).ready(function() {
var customerID = <%=customerID%> // asp variable
if (customerID != "") {
$('#radio1').prop('checked', 'checked');
} else {
$('#radio2').prop('checked', 'checked');
}
$('#radio1').click(function() {
$('#employeeTable').fadeIn('fast');
})
$('#radio2').click(function() {
$('#employeeTable').fadeOut('fast');
})
})
You can have a look/play here: http://jsfiddle.net/qcLtX/7/
Try changing the customerID value to nothing, like var customerID = "".
Good luck
UPDATE
Where I have used .prop: If you are using jQuery version 1.6 or greater, you should use .prop, otherwise, use .attr.

Radio buttons are grouped by their name attribute, like so (source).
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
If the radio buttons are grouped, then selecting any one of them automatically delselects all the others in that group.
So the buttons cannot have a distinct name. If you want to distinguish between radio buttons (without referring the their value), you should add an id.
<input type="radio" name="sex" id="m" value="male" />
You can set the selected radio button on page load declaratively in markup, or using jquery.
Declarative version:
<input type="radio" checked="checked" name="sex" value="male" />
jQuery:
$(document).ready(function(){
$("#m").attr("checked", "checked");
});

jQuery: having radio buttons and a textarea update hidden form fields

Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.

You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});

For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?