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.
Related
On an angularJS application I have a <form> with a group of radio buttons, I want to force the user to select an option before he validates the form.
Here a simplify version of my HTML code :
<form name="myForm">
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" required>
</label>
<button type="submit" ng-disabled="!myForm.$valid">
SUBMIT
</button>
<h1>
{{myForm.$valid}}
</h1>
</form>
I reproduced my issue in this example :
JSfiddle
Why does it prints true instead of false ?
You need to set ng-model to keep the selected value, e.g. $scope.selected (required needs ng-model to work). Also a function is needed to set the model on every click. Validation can be done like this:
<label ng-repeat="option in options">
{{option.name}}
<input type="radio" name="animalOptions" value="option.id" ng-model="selected" ng-click="toggle(option.id)" ng-required="!selected">
</label>
ng-required="!selected" ensures that user has selected an option
Check this example: fiddle example
You need ng-model to set validity of your form input(s).
And use
required
like this in Angular way :
ng-required="true"
Something like this :
<form name="testForm" ng-submit="yourSubmitFunction();" novalidate>
<input type="radio" name="radio" ng-model="rr" value="optionA" ng-required="true"/> optionA
<input type="radio" name="radio" ng-model="rr" value="optionB" /> optionB
<button type="submit" >Submit</button>
</form>
Hi I have two ratings fields on my page, when the first rating is checked and I check the second one, the first one is unchecked. It's not a problem in back-end because the value of the ratings is already saved but for the visitors it's a problem because the stars disappears.
Is there a way in javascript or jQuery to say : if this field is check it remains check ?
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<fieldset class="rate">
<input id="5-stars-1" type="radio" name="firstRate" value="5" />
<label for="5-stars-1">5</label>
<input id="4-stars-1" type="radio" name="firstRate" value="4" />
<label for="4-stars-1">5</label>
</fieldset>
<fieldset class="rate2">
<input id="5-stars-2" type="radio" name="secondRate" value="5" />
<label for="5-stars-2">5</label>
<input id="4-stars-2" type="radio" name="secondRate" value="4" />
<label for="4-stars-2">5</label>
</fieldset>
Do you have any idea ?
If you need more infos or more extract from my code don't mind to ask !
Alright so thanks to Rory and Sathish, the answer is really simple :
Radio are designed to be checked once at a time so I couldn't do what I wanted, instead I simply need to switch to checkboxes and the problem is solved !
Thanks again !
I am trying to create a form for users who have forgotten their login data. There are three radio buttons and when the user clicks on a radio button and clicks 'OK', the whole content hides and a new form is shown for the option they have chosen. Below the html:
<div id="MainContent">
<form ng-submit="">
<label><input type="radio" name="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" name="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" name="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
</div>
How can I make this happen with Angular? I have very little experience with Angular, so I'd really appreciate the help.
Thanks in advance!
There are two ways to achieve the desired effect.
Using ng-if
Using ng-show or ng-hide
The difference is in this, ng-if removes/recreates a portion of the DOM tree based on a Boolean expression i.e. true or false values.
On the other hand ng-show just hides the portion based on the value of the expression. It sets the display of that the part of the DOM to none.
For your case I would favor ng-if so that only the required part of the DOM is loaded into the app at the right time. Some have argued that by changing expressions on the web-inpsector, one could enable or disable an ng-show block.
Here is the Edited code. I have included a plunker. here is the link http://plnkr.co/edit/JB4LAgo9rqtPnPZHpwWr?p=preview
<label><input type="radio" value="unForgotten" ng-model="dataForgotten"/> Forgot username</label>
<br/>
<label><input type="radio" value="pwForgotten" ng-model="dataForgotten"/>Forgot password</label>
<br/>
<label><input type="radio" value="bothForgotten" ng-model="dataForgotten"/>Forgot both username and pw</label>
<div ng-if="dataForgotten == 'unForgotten'">
<!-- If Username Forgotten then Content goes here-->
Username Forgotten
</div>
<div ng-if="dataForgotten == 'pwForgotten'">
<!-- If Password Forgotten then Content goes here-->
Password Forgotten
</div>
<div ng-if="dataForgotten == 'bothForgotten'">
<!-- If Both Forgotten then Content goes here-->
Both Forgotten
</div>
Here is the explanation on the docs as regards ng-if
https://docs.angularjs.org/api/ng/directive/ngIf
While here is the documentation for ng-show https://docs.angularjs.org/api/ng/directive/ngShow
You can use ng-show for this. The directive evaluates a boolean condition and shows the content when true, so to hide one section and show another you just need the inverse.
<div ng-show="!completed">
First Section
</div>
<div ng-show="completed">
Second Section
</div>
On your $scope, you'll have a bool completed property (or whatever you want to call it) and you can change this in your controller when the button is clicked using ng-click.
<button ng-click="changeCompleted()">Show/Hide</button>
Controller:
$scope.changeCompleted = function(){
$scope.completed = !$scope.completed;
}
*Note you could also shorten this part by performing the assignment directly in the ng-click directive.
Here's a working jsfiddle example.
ng-show docs
Also, if you'd like to make sure a radio button is checked before allowing the button to be clicked, have a look at ng-disabled which allows you to conditionally disable/enable your button.
If you want to have it in plain javascript:
Close
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
<div id="MainContent">
<form ng-submit="formsubmit(dataForgotten)">
<label><input type="radio" ng-model="dataForgotten" id="unForgotten"/>Forgot username</label>
<label><input type="radio" ng-model="dataForgotten" id="pwForgotten"/>Forgot password</label>
<label><input type="radio" ng-model="dataForgotten" id="bothForgotten"/>Forgot both username and pw</label>
<input type="submit" value="OK">
<input type="submit" value="Cancel">
</form>
<form name="secondForm" ng-show="submited">
</form>
</div>
//controller code
$scope.submited=false;
$scope.formsubmit = {
//form value insert code here
$scope.submited=true;
};
Hi im at coding a form and i needed a validation form for my radio and checkbox inside my form so i searched around the net and found out that jquery 1.3+ has class="required" tag that does exactly what i wanted but
i have this section of radios :
<label class="label" type="radio" name="sloganch" >Does your slogan need to be incorporated in your Logo Design ?</label>
<div class="inline-group">
<label class="radio"><input type="radio" name="radio-inline" class="required" ><i></i>Yes</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>No</label>
<label class="radio"><input type="radio" name="radio-inline"><i></i>Maybe</label>
<label class="radio"><input type="radio" name="radio-inline" ><i></i>I decide later</label>
</div>
And if i put the class="required" on the first radio when it calls this function it distort my radios by attaching " This field is required" to my first radio
and distort the complete line of radios .
Is it possible somehow to fix this to set for eg the " This field is required" under the complete row ? thanks in advance
this should work
$("input:radio:not(:first)").addClass("test");
EDIT
This should work i have also included a js fiddle for your reference
the above code will add class test to all the radio buttons except the first
JS Fiddle
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.