I have added list of checkboxes in following way. And I have added required property also. Because user should select at least one checkbox.
<div ng-repeat="student in vm.students">
<label class="checkbox-inline">
<input type="checkbox" value="{{studentName}}" ng-model="student.selected" name="students" required>
{{sim.name}}
</label>
</div>
<div data-ng-messages="userform2.simulations.$error" data-ng-if="vm.interacted(userform2.simulations)" class="error-messages">
<div data-ng-message="required">You should select atleast one sim.</div>
</div>
But this one doesn't work. It works for last checkbox only. If check and uncheck the last one the error message is appear, It doesn't look whether other checkboxes are selected or not. Any possible way will be highly appreciable.
In angular you should use ng-required=true to set 'required' on the input
The docs:
https://docs.angularjs.org/api/ng/directive/input
Follow this link
CheckBox List
you will get the answer ithink you missed checklist -value or you need validation on it for select one check box.
for validation take full list and check every property if any no value is checked then generate a message for it.
I hope it will be help to you
Related
I am using react-final-form and taking help from this example
https://codesandbox.io/s/52q597j2p
in above example giftCardMessage property is removed from the object when user unchecked this field Is this a gift?
steps to reproduce.
checked the Is this a gift? field and enter something Message in text field .then unchecked see property will remove.
I used the above concept and try to make same thing .but in my example I used prefixed .in my example if I unchecked the checkbox it didn't remove the property of object
https://codesandbox.io/s/react-final-form-declarative-form-rules-uvz6y
<WhenFieldChanges
field="gift"
becomes={false}
set="giftCardMessage"
to={undefined}
/>
<FieldPrefix prefix="apps.dh">
<div>
<label>Is this a gift?</label>
<PrefixedField name="gift" component="input" type="checkbox" />
</div>
<div>
<label>Message</label>
<PrefixedField
name="giftCardMessage"
component="textarea"
placeholder="What do you want the card to say?"
/>
</div>
</FieldPrefix>
The message input should be automatically disabled when the box is unchecked(value of gif is either true or false), check here https://imgur.com/a4Eigoh
You should add: disabled={!values.gift} to your message for it to respond to the value of the box
I have a checkbox, based on value of its ng-model, I'm toggling visibility of a div using ng-show.
This div contains an <input> of type="number". I have a validation on it of min="10000".
I dont want the form to get submitted if the number input is less than 10000.
However, I want this only to happen when the checkbox is checked.
So, I'm using ng-required to check the value of checkbox.
<input type="checkbox" ng-model="isOn"/>
<div ng-show="isOn">
<input type="number" min="10000" ng-model="counter" ng-required="isOn"/>
</div>
If someone proceeds without touching the checkbox and the input field, the form get submitted.
However, if I click the checkbox, enter a number<10000, and the uncheck it again, the form doesn't get submitted.
On the console I get error that it cannot focus on the the input control.
The ng-required fails to work on the min condition. It is being checked regardless of ng-required.
Is there any way I can get this working?
PS: I dont want to use the solution with text input + length limit + restricted char codes on key press so that only numbers could be typed.
you need to reset the model of the number input field to its initial state as well when user unchecks the checkbox.
I used ng-if instead of ng-show and it worked.
I had tried it before I posted the question, but it didnt work. Later I realized I had done the change on a different html file.
I hope this should work
<form name="MyForm" novalidate >
<input type="checkbox" ng-model="MyForm.isOn" required/>
<div ng-show="MyForm.isOn.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">Please select the checkbox</span>
</div>
<div ng-show="MyForm.isOn">
<input type="text" ng-model="MyForm.counter" required min="1000" />
<div ng-show="MyForm.counter.$touched||MyForm.$submitted">
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.required">You can't leave this empty</span>
<span class="errormsg" ng-message="required" ng-show="MyForm.counter.$error.min">Value should be atleast 1000</span>
</div>
</div>
</form>
I am using spring's tag in my html. My jsp has a group of checkbox which renders value from model object "allTimeslots". This object has list of string.
form:checkboxes element="li" path="timeslotId" id="checkbox" type="checkbox"
items="${allTimeslots}" /></td></tr></table>
Now, my requirement is to check if atleast one check-box is checked when the form is submitted. I am using jquery validation where this check has to be done.
I cannot use type="checkbox" as this is not permitted in spring's tag.
Please suggest.
<form:checkboxes element="li" path="timeslotId"
items="${allTimeslots}" />
and in javascript
$('input[name="timeslotId"]:checked').length > 0
will do the work.
Just wondering how I can validate a group of checkboxes in angular, so that when none of them are selected and when they are $dirty, an error message is shown.
I'm not sure what I'm doing wrong but $dirty does not get set for them - the last one has to be selected to have $dirty set. I'd like $dirty to get set when one of the checkboxes in the group have been touched. I've written a custom ng-required rule which checks whether one of the checkboxes has been checked or not.
Plunkr here: http://plnkr.co/edit/lDYMXSZcCOjmBSMC7kHQ?p=info
<div class="checkbox checkbox-inline checkbox-icons" ng-repeat="type in serviceTypes" ng-if="newListing.isService" ng-click="print(newListing)">
<input type="checkbox" id="{{type.icon}}" ng-model="newListing.listingTypes[type.typeId]" name="inputListingType" ng-required="!oneCheckboxSelected(newListing.listingTypes)">
<label for="{{type.icon}}">
{{type.name}}
</label>
</div>
<small class="help-block" ng-messages="addSpaceForm.inputListingType.$error" ng-show="addSpaceForm.inputListingType.$dirty">
<span ng-message="required">This field is required</span>
</small>
And in the controller:
$scope.oneCheckboxSelected = function(arr) {
return _.keys(_.pick(arr, _.identity)).length > 0;
};
This issue is occurring because you're trying to check the $dirty attribute of a form element that there is many of with the same name. This won't work as angular won't be able to bind the attribute to many elements.
Consider using http://vitalets.github.io/checklist-model/ which is a bower installable dependency for handling multiple checkboxes in one directive.
You should be able to use a custom function for checklist-change="imChanged()" to toggle your validation message block
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.