I have a form with four inputs. If the sum of three inputs are greater than the first input (inh_gesamtsumme #ctrl_259) a message in parsley should be shown:
<fieldset class="inhalte_calculate">
<div class="widget widget-text mandatory">
<label for="ctrl_259" class="mandatory">Summe Geschäftsausstattung gesamt:</label>
<input type="number" name="inh_gesamtsumme" id="ctrl_259" class="text mandatory" value="0" required="" placeholder="Summe in €" step="any">
<label for="ctrl_168" class="mandatory">... davon Elektronik:</label>
<input type="number" name="inh_sum_elektronik" id="ctrl_168" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
<label for="ctrl_169" class="mandatory">... davon stationäre/fahrbare Maschinen:</label>
<input type="number" name="inh_fahrbahr" id="ctrl_169" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
<label for="ctrl_170" class="mandatory">... davon Waren und Vorräte:</label>
<input type="number" name="inh_sum_waren" id="ctrl_170" class="text mandatory" value="33" required="" placeholder="Summe in €" step="any">
</div>
</fieldset>
We need to calculate this in a javascript, not in html code
Related
Hi i am learner in angularJS and in my form i have name and email fields and one radio group for gender selection and my requirement is when i select male then name field is required and if i select female then email field is required
I have tried below code but its not working can some one help me please
code:
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name">Employee Name:</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email">Email Address:</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
autofocus required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid>Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="male" ng-model="empInfo.gender" #gender="ng-model">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" value="female" ng-model="empInfo.gender" #gender="ng-model">Female
</label>
</div>
</form>
Maybe try with that validation:
HTML :
<form class="form-horizontal alert alert-warning" name="empList" id="empForm" ng-submit="insertInfo(empInfo)">
<h3 class="text-center">Insert Employee Details Into Database</h3>
<div class="form-group">
<label for="Name" ng-show="empInfo.gender != male_value">Employee Name is required</label>
<input type="text" name="emp_name" class="form-control" placeholder="Enter Employee Name" ng-model="empInfo.name"
required="gender.value=='male'" />
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_name.$invalid">Name field is Empty!</p>
</div>
<div class="form-group">
<label for="Email" ng-show="empInfo.gender == male_value">Email Address is rquired</label>
<input type="email" name="emp_email" class="form-control" placeholder="Enter Employee Email Address" ng-model="empInfo.email"
required="gender.value=='female'"/>
</div>
<div class="form-group">
<p class="text-danger" ng-show="empList.emp_email.$invalid">Invalid Email!</p>
</div>
<div class="form-group">
<label for="Gender">Gender:</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="male_value" ng-model="empInfo.gender">Male
</label>
<label for="" class="radio-inline gender">
<input type="radio" name="emp_gender" ng-value="female" ng-model="empInfo.gender" >Female
</label>
</div>
</form>
JS:
$scope.male_value = 'male';
plunker: http://plnkr.co/edit/Hi5t1gU5TIdNx670wHo1?p=preview
Codepen link: http://codepen.io/anon/pen/mVyPaw
Need to create an angular app (w/ 1 controller) that validates that this form has all three fields filled out & Submit button can only be enabled if the form is valid. Don't need to use the preprocessors.
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>
</form>
</div>
Actually it's module inject problem. ng-app="myApp" ng-controller="formCtrl" Where is your myApp module code.
try like this.
<div class="container" ng-app>
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="form" id="contact-form" novalidate>
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>
</form>
</div>
Add required validation
<div class="container" ng-app="myApp" ng-controller="formCtrl">
<h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>
<form role="form" name="myForm" id="contact-form">
<div class="form-group">
<label for="FirstName">First name</label>
<input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
</div>
<div class="form-group">
<label for="LastName">Last Name</label>
<input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
</div>
<div class="form-group">
<label for="EmailAddress">Email address</label>
<input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" required> Check me out
</label>
</div>
<button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>
</form>
</div>
Here is your edited CodePen
I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle
I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>
its very strange that i am closing the form input field tags but even though i didn’t find it in console.even my form value didn't getting posted.
here is my code
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<div class="form-group">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group" />
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
Edited::
<div class="form-group">
<form ng-submit="updatepersonel()" ng-repeat="update in userDetail">
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.firstname" />
<label for="exampleInputPassword1">First Name</label>
<div class="form-group">
<label for="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" ng-model="perupdate.lastname" ng-value="update.lastname" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone</label>
<input type="text" class="form-control full" ng-model="perupdate.firstname" ng-value="update.phone" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control full" ng-model="perupdate.location" ng-value="update.location" />
</div>
<button class="btn btn-success" type="submit">Update</button>
</form>
</div>
i have solved my issue.
what i was doing i was trying to get the data in ng-value.
But when i try to bind data in my ng-model i get the solution
js
$scope.perupdate= {
firstname: key.firstname,
lastname : key.lastname,
phone : key.phone,
location : key.location,
};
view
<input type="text" class="form-control full" ng-model="perupdate.firstname">
I have a simple with two fields. Each field associated with two radio buttons.
I want to calculate the form progress..Markup of the form look like this
<fieldset>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">1st Option</label>
</div>
<br/>
<div>
<div class="btn-group">
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
<label class="radio-inline">
<input type="radio" name="radio" />
</label>
</div>
<label for="FH1" class="radio-inline control-label">2nd Option</label>
</div>
</fieldset>
I have a directive define for formprogress
<formprogress progress={{progressValue}} />
Assume that "progressValue" is a scope variable, now I want to update this value somehow, to show the form progress.How it would possible?