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>
Related
I have a dropdown menu, two input text box, and a submit button. I want the submit button to be disabled until dropdown item is selected AND both input boxes are filled. I looked at several examples including this one and this one but none of these are working for me. Below is my code. Thanks
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" />
To Date:
<input type="text" id="dateTo" ng-model="data.date2" />
<button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button>
</form>
I also tried this method below:
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" >
** content for dropDown menu, populating it by using Django
</select>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required />
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button>
</form>
So initially when the page loads and all fields are empty by default, the Submit button is disabled and the problem is that after all three fields are filled, it doesn't get enabled. Thanks
Your second method works for me (utilizing myForm.$invalid) if I add required to the dropdown element. I've created a plunkr you can play with here.
<form name="myForm">
Select an option:
<select id="dropDown" name="dropDown" ng-model="data.dropDown" required>
<option>red</option>
<option>blue</option>
<option>green</option>
</select><br/>
From Date:
<input type="text" id="dateFrom" ng-model="data.date1" required/><br/>
To Date:
<input type="text" id="dateTo" ng-model="data.date2" required /><br/>
<button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button>
</form>
Note: I used Angular 1.4 in the plunkr as you did not specify which version of Angular you are working with.
Edit: OP stated that issue was created by using JQuery's datepicker. May I suggest using angular-ui boostrap datepicker? Plunker example - Angular-UI Bootstrap docs
Why dont you use ng-disabled="myForm.myName.$pristine" because pristine will check for each variable inserted in textboxes
please check small example here..
ng pristine example
So I have a radio button whose model is needed by the function that is called when I hit the button below it:
<form class="form-inline" role="form">
<div class="form-group">
<div>
<input type="radio" ng-model="display" value="true">True <input type="radio" ng-model="display" value="false">False
</div>
<button>
....
</button>
</div>
</form>
However, the results never come back right. If I go in and debug the code, within the javascript every single time the damn value of $scope.display is "true". It doesn't have to do with me not using ng-value, based on what I have read about it, right? Previously, this element worked correctly and was not in a form/form-inline/form-group, but a simple div. Does that have something to do with it?
it does work here is a pluncker: pluncker
<form name="myForm" ng-controller="ExampleController">
<input type="radio" ng-model="display" value="true">true
<input type="radio" ng-model="display" value="false">
false
<br>
display = {{display}}
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.
I have a form where there are some required inputs that are not within the form tag. The form is validating even though these inputs are not valid.
How can I fix this without moving all inputs inside the form tag?
Specifically I need to have the form be invalid when any inputs associated with the form are invalid. Not just those contained within the element.(i.e. any input with it's form attribute pointing to the form)
example:
http://jsfiddle.net/v6QkB/
<div class="radio-group">
<input type="radio" form="testForm" name="test2" value="a" ng-model="formData.test2" ng-required="true">
<input type="radio" form="testForm" name="test2" value="b" ng-model="formData.test2" ng-required="true">
</div>
<form name="testForm">
<div class="radio-group">
<input type="radio" name="test1" value="a" ng-model="formData.test1" ng-required="true">
<input type="radio" name="test1" value="b" ng-model="formData.test1" ng-required="true">
</div>
<input type="submit" value="submit" ng-disabled="testForm.$invalid">
</form>
You can use the ngForm directive to wrap all elements (outer inputs and form).
According to the docs ngForm is a "nestable alias of form directive. [...] It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined."
Furthermore, "the purpose of ngForm is to group controls, but not to be a replacement for the <form> tag with all of its capabilities (e.g. posting to the server, ...)".
<div ng-form="outerForm">
<div class="radio-group">
...
</div>
<form name="testForm">
<div class="radio-group">
...
</div>
<input type="submit" value="submit" ng-disabled="outerForm.$invalid" />
</form>
</div>
How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).