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.
Related
I am using a small jQuery library jQuery-Visibly
A jQuery Plugin designed to easily Conditionally show elements based on values of other Form elements.
Project page and documentation: http://www.danielrivers.com/visibly
Project GitHub Page: https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js
Some key features that put it above some other libraries:
Multiple fields and values can be set as a rule for revealing a hidden field instead of only a single field to field rule like other libraries do. Example; To show field 3 I can require both field 1 and field 2 to have a certain value set in both at the same time in order for field 3 to become visibble.
RegEx matching - require a text inputs text value to match the regex pattern in order for a conditional field reliant on it to be shown.
Below is my demo where I am trying to use checkboxes to reveal a hidden DIV.
In DIV ID #test I have a conditional rule set with visibly="foo:checked;foo3:checked"
This means field #foo and #foo3 should both be checked in order to reveal #test
However it is not working. It is possibble that the library only supports select and input fields and not checkbox fields but looking at the library code (125 lines) https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js on line 60 mI saw :checked which made me think it is supported but I am not 100% certain of it?
Could someone look at this to see if checkboxes should work with what I am doing?
DEMO: https://jsfiddle.net/955us4ge/
HTML
<label for="foo">
<input id="foo" name="foo" type="checkbox"> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox"> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox"> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
this should be hidden until checkbox #foo and #foo3 are both checked
</div>
JS
$(document).ready(function() {
$('#test').Visibly();
});
The Visibly plugin seems to check the value attribute of the elements that you added to the rules and checks if the value meets the condition. So if you want it to work with checkbox elements you will need to change the value attribute on them.
Here is an example.
$('#test').Visibly();
$("input").on("click", function() {
if($(this).prop("checked")) {
$(this).val("checked");
} else {
$(this).val("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/DanielRivers/jQuery-Visibly/master/js/jquery-visibly.js"></script>
<label for="foo">
<input id="foo" name="foo" type="checkbox" value=""> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox" value=""> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox" value=""> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
This should be hidden until checkbox #foo and #foo3 are both checked
</div>
In case you'd like to do this with plain jQuery:
https://jsfiddle.net/rjmu8dus/
$(document).ready(function() {
$("input[type=checkbox]").on('change',function(){
if( $("#foo").prop('checked') == true && $("#foo3").prop('checked') == true) {
$("#test").show();
}
});
});
Something you might add is create an else that says if they are not clicked to not show them.
I was looking to toggle a switch(also disable) using check box,and I came across html attributes checked/enabled, it works fine if I type it into the code it works well, but I am not able to figure out is how to control it dynamically using angularjs. I tried the code below for disabling I used
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" enabled />
for checked I used,
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" checked/>
I tried
<input type="checkbox" value={{light.status}} ng-click="toggle(light.status)" {{status}}/>
angular part of the same
function toggelingtype(type){
if(type==1}$scope.status="checked";
if(type==2) $scope.status="";
if(type==3)$scope.status="disabled;
this function is called when some http request I received
Simply use attributes like ng-checked and ng-disabled
<input type="checkbox" ng-checked="light.checked" ng-disabled="light.disabled" />
EDIT: Alternative
<input type="checkbox" ng-model="light.status" ng-disabled="!light.status" />
Now if you set light.status = false;, the checkbox will be both unchecked and disabled.
Hope it helps.
Got 2 radio buttons. If the second one is selected a div with a group of checkboxses is shown. In that case one of the checkboxses needs to be selected. But if the first radio button is selected then the div with the checkboxses isn't visibile but the validation messages is shown anyway.
<script>
webshims.setOptions('wspopover', { appendTo: 'body' });
$.webshims.activeLang("sv");
$.webshims.setOptions('forms', {
replaceValidationUI: true,
addValidators: true,
customMessages: true
});
$.webshims.setOptions('forms-ext', {
replaceUI: true
});
$.webshims.polyfill('forms forms-ext');
</script>
<input id="PersonOrCostDiv1" class="user-success" type="radio" required="" value="1" name="Level" data-cacheval="false">
<input type="radio" id="PersonOrCostDiv2" name="Level" required="" value="2" data-cacheval="false" class="user-success">
<input type="checkbox" data-dependent-validation='{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}' value="100000001" id="checkbox-group100000001" class="group-required user-error" name="SelectedCostDivisions" aria-invalid="true">
<input type="checkbox" data-dependent-validation="'{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}' value="100000004" id="checkbox-group100000004" class="group-required user-error" name="SelectedCostDivisions" aria-invalid="true">
I've been testing with and without "from-prop" and had some looks on this page:
http://afarkas.github.io/webshim/demos/demos/webforms/4-webforms-custom-validity.html
Notice what I think is a bug. If I fill up the requierd properties and then choose 'test 3' in the special case in the button. The page is posted to server.
But if I as in the first case fills up the requierd values and then choose 'test1' I got an error message. If I then choose 'test 3' that should work the error message is still there.
And another thing is when I use the 'group-required' I cant manage to get the error message in the selected language. The other messages works as it should.
Yeah, there was a small bug in the data-dependent-validation rule. The reason is, that data-depnendent-validation isn't really a customValidity modifier but a general property modifier, which has to be executed even if the control is invalid by another rule. (in your case group-required). I have fixed this issue (https://github.com/aFarkas/webshim/commit/7f670cf7693ab03dfc86097bda0491faf57b00ea).
But you should do it a little bit different. Instead of using data-dependent-validation='{"from": "PersonOrCostDiv2", "prop": "required", "from-prop": "value:2"}', you should simply use: data-dependent-validation="PersonOrCostDiv2". This will automatically check if the control is checked and will disable/enable the form-controls. Your HTML would look something like this (much simpler!):
<form>
<input id="PersonOrCostDiv1" class="user-success" type="radio" required="" value="1" name="Level" data-cacheval="false">
<input type="radio" id="PersonOrCostDiv2" name="Level" required="" value="2" data-cacheval="false">
<fieldset data-dependent-validation="PersonOrCostDiv2">
<input type="checkbox" value="100000001" id="checkbox-group100000001" class="group-required" data-errormessage="Please check on this group" name="SelectedCostDivisions">
<input type="checkbox" value="100000004" id="checkbox-group100000004" name="SelectedCostDivisions">
</fieldset>
<input type="submit" />
</form>
In case you don't want to update to the fixed version (It may have some bugs, because it's not a stable tested build (Note this is only fixed in master branch not the main gh-pages branch), you should remove data-dependent-validation. And disable/enable the controls or the fieldset yourself with JS depending on the checkedness of PersonOrCostDiv1. In case you use filedset:disabled, you have to use $.prop(fieldset, 'disabled', true/false) to make it work in IE. see: http://jsfiddle.net/trixta/K6nn9/).
To change the errormessage you need to either set it descriptive using the data-errormessage attribute (see html above) or with the following JS code:
webshims.ready('form-validators', function(){
webshims.customErrorMessages['group-required'].sv = "you really have to check on of these controls";
});
Feel free to ask again, if this doesn't help.
http://jsfiddle.net/nXqd/qC2Ya/6/
Take a look at the jsfiddle. When I enter wrong data in two inputs and clicking submit, I only receive the error message on the first one. Now I want two of them which have the name attribute in the form displayed as well.
In this example, I use the same name on purpose to get these values on the backend easier. I just loop through the list and get all information.
You are doing it wrong. You have added same name for both fields. Same name attributes are used to combine the fields in a group. You have to use class based validation.
working demo http://jsfiddle.net/xr5g6/1/
Hope it fits your needs. :)
code
$("form").validate({
rules: {
number: {required: true, range: [1,2]},
number2: {required: true, range: [1,2]}
}
});
html
<form name="myForm">
<fieldset>
<legend>My Form</legend>
<label for='number'>Number</label>
<input name='number'class='required'/> <br />
<label for='number'>Number</label>
<input name='number2' class='required'/>
<label for='change-range'>Max range</label>
<input name='change-range' class='required'/>
</fieldset>
<input type="submit">
</form>
You should use different name attriburtes for different inputs.
Demo: http://jsfiddle.net/xYTNw/
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">?