I want to apply validation on checkbox with toggle effect
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field">
<div class="help-block with-errors"></div>
<span class="toggle"></span></label>No
</div>
Can anyone please help me. Its not working. I applied required and data-error also but at the time of submit the form shows the ng-valid whether i checked the checkbox or not
Thanks in advance
I am not much clear on what you mean by toggle effect with checkbox.
But i have utilized form validation Example of https://scotch.io/tutorials/angularjs-form-validation and created a small POC for checkbox validation.
PLease have a look here.
<div class="togglebutton form-group has-feedback paddingTopBtn8">
Yes<label> <input type="checkbox" ng-model="user.checkfield" required
name="checkfield">
<p ng-show="userForm.checkfield.$invalid && !userForm.checkfield.$pristine"
class="help-block">Please toggle.</p>
<span class="toggle"></span></label>No
</div>
CodePen Example
I think you only need:
<input type="checkbox" ng-model="checkfield" required data-error="This is an mandatory field" checked data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger">
Related
I have the below code to select Yes\No for selecting the options from Multi Select dropdown. But It is required only when I select the Yes Option from radio. Otherwise the validation message should disappear when I move from Yes to No. (I am disabling the Multi Select in script when the user selects the No optio)
<input id="Option1" name="MyRadio" ng-model="MyRadioData" type="radio" title="Yes" value="Yes" ng-click="Flip('Yes')" />Yes
<input id="Option2" name="MyRadio" ng-model="MyRadioData" type="radio" title="No" value="No" ng-click="Flip('No')" />No
<select id="MultiSelect1" kendo-multi-select name="MultiSelect1" k-value-primitive="true" k-max-selected-items="30" k-placeholder="multiPlaceHolderVendor"
k-ng-model="MyOptions" k-data-source="MyOptionsDS" ng-required="MyRadioData == 'Yes'" validationmessage="Required"></select>
<span data-for="MultiSelect1" data-role="validator"></span>
But the above code is not working though I have used ng-required option for multi select.
Appreciate any help.
If <span data-for="MultiSelect1" data-role="validator"></span> is where messages put, you can handle with ng-show ng-hide like this:
UPDATE
<!-- if you choose no it hide-->
<span ng-hide="MyRadioData == 'No'" data-for="MultiSelect1" data-role="validator"></span>
<!-- if you choose yes it hide-->
<span ng-hide="MyRadioData == 'Yes'" data-for="MultiSelect1" data-role="validator"></span>
Here is a plnkr with a button but it does the same, i will help you how this work.
I have validation issue if i use k-ng-model on field that field is not required with Angularjs validation , User can submit the form so below code field is required even i dont select the value user can still submit the form.. Any idea how to solve it ?
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && ddChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div>
You can use ng-model with k-ng-model, Try assigning ng-model to a seperate variable and use ng-required.
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
k-ng-model="challengesDTO.themesKyList" ng-model="challengesDTO.themesKyListValue" ng-required
id="themesList"></select>
This solution worked for me: kendo ui, angular require validation for numeric text box
Just create a hidden input for the each kendo widget and bind the model from your k-ng-model also to the ng-model of the hidden field. The k-ng-model seems to be no NgModelController, which is why the validators cannot hook into the models $validators and do their work.
<input kendo-date-time-picker k-ng-model="$ctrl.event.endDate"></input>
<input type="hidden" name="endDate" ng-model="$ctrl.event.endDate" required></input>
I am working on Angualrjs.below is my code
<form name="myForm" ng-submit="OnClickSubmit())">
<div ng-repeat="ReadItem in SelectedItem" >
<label class="input">
<input type="text" id="txt_{{ReadItem.No}}" ng-model="ReadItem.Quantity" name="Quantity" required />
<div ng-show="myForm.Quantity.$dirty && myForm.Quantity.$error.required" class="note field-error">Required!</div>
<div ng-show="(myForm.Quantity.$dirty && ((5 < ReadItem.Quantity))" class="note field-error">Qty More.</div>
</label>
</div>
<button >order</button>
</form>
i wanted to perform validation on condition only when i click single button order.button is placed bottom of page.it's not added on every row.
1.my form is valid, i mean all field is not empty.
2.and quantity should not grater than 5.
please let me know how to achieve this functionality on multiple row item.
if any condition fail then OnClickSubmit() should not fired.
If I get your question right, ng-disabled and $invalid would be your bestfriend:
<button ng-disabled="myForm.$invalid" >Submit</button>
This will disable your button until all fields required is valid.
In AngularJS, I'm trying to add/remove a checked class on a parent element, when its child radio button is checked/unchecked.
<label ng-class="{checked: menuType.isChecked0}">
<input type="radio" name="menuType" ng-model="menuType.isChecked0" />Text 1
</label>
<label ng-class="{checked: menuType.isChecked1}">
<input type="radio" name="menuType" ng-model="menuType.isChecked1" />Text 2
</label>
Here is a fiddle: http://jsfiddle.net/fAA2w/
There is no controller or any other relative code. If there is a better way to approach this, please share. This seems simple enough, but I cannot find an answer to this question. What am I doing wrong here?
You need to give the radio input a value.
For more examples see http://docs.angularjs.org/api/ng/input/input%5Bradio%5D.
<div ng-app>
<label ng-class="{checked: isChecked == 1}">
<input type="radio" name="menuType" ng-model="isChecked" value="1" />Text 1
</label>
<label ng-class="{checked: isChecked == 2}">
<input type="radio" name="menuType" ng-model="isChecked" value= "2" />Text
</label>
</div>
This is the correct way to be doing it. Reason being, when your ng-model changes, your ng-class will pick up on that and update the view, the Angular way!
Having this ordinary (name attribute is requred by server) form with angular and can't figured out how to make validations work. What should i put into ng-show="TODO"
http://jsfiddle.net/Xk3VB/7/
<div ng-app>
<form ng-init="variants = [{duration:10, price:100}, {duration:30, price:200}]">
<div ng-repeat="variant in variants" ng-form="variant_form">
<div>
<label>Duration:</label>
<input name="variants[{{$index}}][duration]" ng-model="variant.duration" required />
<span ng-show="TODO">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="variants[{{$index}}][price]" ng-model="variant.price" />
<span ng-show="TODO">Price required</span>
</div>
</div>
</form>
</div>
ps: this is just piece of form, which is more complicated
Thanks
AngularJS relies on input names to expose validation errors.
Unfortunately, as of today it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.
Long story short you should rely on ng-form to validate dynamically created inputs. Something like :
<div ng-repeat="variant in variants" >
<ng-form name="innerForm">
<div>
<label>Duration:</label>
<input name="duration" ng-model="variant.duration" required />
<span ng-show="innerForm.duration.$error.required">Duration required</span>
</div>
<div>
<label>Price:</label>
<input name="price" ng-model="variant.price" required/>
<span ng-show="innerForm.price.$error.required">Price required</span>
</div>
</ng-form>
Working fiddle here
UPDATE : Base on your serverside requirement why not do something like that :
<input type="hidden" name="variants[{{$index}}][duration]" ng-model="variant.duration"/>
<input name="duration" ng-model="variant.duration" required />
The hidden input will be the one read by the server while the other one will be used to do the client side validation (later discarded by server). It s kind of an hack but should work.
PS : Be sure that your form is valid before actually submitting it. Can be done with ng-submit