I could not display the error message while input field takes the invalid data using Angular.js. Here is my code:
<form name="billdata" id="billdata" enctype="multipart/form-data" novalidate>
<div ng-class="{ 'myError': billdata.type.$touched && bill data.type.$invalid }">
<input type="number" class="form-control oditek-form" ng-model="type" name="type" step="1" min="0" placeholder="Add Type" ng-pattern="/^[0-9]+([,.][0-9]+)?$/">
</div>
<div class="help-block" ng-messages="billdata.type.$error" ng-if="billdata.type.$touched">
<p ng-message="pattern" style="color:#F00;">This field needs only number(e.g-0,1..9).</p>
</div>
</form>
Here I need to only give number as input. If user is entering anything rather than number it should display the error message. Here myError is showing the red color border on input field which is coming properly but the message is not coming which should display.
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<form name="myForm">
For Text <input name="myName" ng-model="myName" ng-pattern="/^[a-zA-Z ]+$/" required>
<span style="color: red" ng-show="myForm.myName.$error.required">First Name is required.</span> <span style="color: red" ng-show="myForm.myName.$error.pattern">Any other symbol are not allow.</span>
<br />
For Number
<input type="number" class="textbox_usr" name="txtmobno" id="txtmobno" ng-model="txtmobno" ng-minlength="10" ng-maxlength="10" required /><br />
<span style="color:red" ng-show="myForm.txtmobno.$dirty && myForm.txtmobno.$invalid">
<span ng-show="myForm.txtmobno.$error.required || myForm.txtmobno.$error.number">Valid Mobile number is required</span>
<span ng-show="((myForm.txtmobno.$error.minlength || myForm.txtmobno.$error.maxlength) && myForm.txtmobno.$dirty) ">Mobile number should be 10 digits</span>
</span>
</form>
</div>
ng-messages div should be like following
<div ng-messages="billdata.type.$error" ng-show="billdata.type.$touched">
<div ng-message when="pattern">
<span>This field needs only number(e.g-0,1..9).</span>
</div>
</div>
Related
i'am using https://www.jqueryscript.net/demo/image-puzzle-slider-captcha/ for a form, i need to make sure the fields are correct before it submits. Right now it just get stuck (the puzzle) if i press the button submit when the field{s} have not been filled.
If all the fields are ok, it submits fine.
<h2>Contact Form</h2>
<form id="contact-form" action="" method="post">
<input autocomplete="off" type="text" id="website" name="website"/>
<label class="name">
<input type="text" placeholder="Name:" data-constraints="#Required #JustLetters" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid name.</span>
</label>
<label class="email">
<input type="text" placeholder="E-mail:" data-constraints="#Required #Email" />
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid email.</span>
</label>
<label class="phone">
<input type="text" placeholder="Phone:" data-constraints="#Required #JustNumbers"/>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*This is not a valid phone.</span>
</label>
<label class="message">
<textarea placeholder="Message:" data-constraints='#Required #Length(min=20,max=999999)'></textarea>
<span class="empty-message">*This field is required.</span>
<span class="error-message">*The message is too short.</span>
</label>
<br>
<script>
$('#captcha').sliderCaptcha({
repeatIcon: 'fa fa-redo',
onSuccess: function () {
//if form fields are OK submit.
document.getElementById('submit').click();
//if not ok, reset the slider.
}
});
</script>
https://www.jqueryscript.net/demo/image-puzzle-slider-captcha/disk/longbow.slidercaptcha.js
This file has a reset option but i don't know how to do it and do that in script above.
I am trying to make a validation with ng-messages in AngularJs 1.6.4.
But as soon as I type in in the form it shows all 3 ng-messages, and after that they won't go away until a page refresh. So even when the maxlength isn't reached it shows "your name is required".
<form name="userForm" ng-submit="signup(userForm.$valid)" novalidate>
<!-- First name -->
<div class="form-group" ng-class="{ 'has-error' : userForm.first_name.$touched && userForm.first_name.$invalid }">
<label for="example-text-input" class="col-2 col-form-label">First Name</label>
<div class="col-10">
<input class="form-control" type="text" placeholder="Please enter your first name"
name="first_name"
ng-model="user.first_name"
ng-minlength="2"
ng-maxlength="25"
required>
<div class="help-block" ng-messages="userForm.first_name.$error" ng-if="userForm.first_name.$touched">
<p ng-message="minlength">Your name is too short.</p>
<p ng-message="maxlength">Your name is too long.</p>
<p ng-message="required">Your name is required.</p>
</div>
</div>
</div>
</form>
EDIT
Solved it by adding the ngMessages to my modules and adding the script tag in my index.html
Your code work for me perfectly. check plunker link
Injecte ngmessage in your desired module.
angular.module('app', ['ngMessages'])
add angular message file in your project.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<input class="form-control" type="text" placeholder="Please enter your first name"
name="first_name"
ng-model="user.first_name"
minlength="2"
maxlength="25"
ng-required="true"/>
<div ng-messages="userForm.first_name.$error" ng-show="userForm.first_name.$touched" >
<span ng-message="required" class="error">Required</span>
<span ng-message="minlength">Minimum 2</span>
Maximum 25
</div>
I have couple of fields in my form & I want to enable submit button if anyone of them is filled, how I can do this? If I put required to both or anyone of them then it won't work as I want.
<input type="text" name="phone">
<span ng-show="form.addContactForm.phone.$touched && form.addContactForm.phone.$error.required">Phone number or email is required</span>
<input type="text" name="email">
<span ng-show="form.addContactForm.email.$touched && form.addContactForm.email.$error.required">Phone number or email is required</span>
<button type="submit" ng-disabled="form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
If phone or email is entered then other message should hide
You just add the conditions in
<input type="text" name="phone" ng-model="ctrl.phone">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<input type="text" name="email" ng-model="ctrl.email">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<button type="submit" ng-disabled="(!ctrl.phone && !ctrl.email) || form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
Edit: Add error message and condition
Simplest solution, if this form is all you have: Use ng-required and make the condition in each field dependent on the other field. I even added a ng-disabled so that, if a field is filled-in, the other becomes disabled. I did not include the error messages for clarity - use the <span>s you already have.
<div ng-app="app" ng-controller="Ctrl as c">
<form name="contactForm">
<input ng-model="c.phone" type="text" name="phone"
ng-required="!c.email" ng-disabled="c.email" />
<input ng-model="c.email" type="text" name="email"
ng-required="!c.phone" ng-disabled="c.phone" />
<button ng-disabled="contactForm.$invalid">Submit</button>
</form>
</div>
Relevant fiddle: https://jsfiddle.net/k0L7c7jh/
If the model becomes larger, solutions like this (i.e. validation rules directly on the UI) do not scale well. For this I like model validations and to that end I created and I am using in my work egkyron, a JS validation framework that binds well with Angular (as well as with others).
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
</script>
</body>
</html>
Im creating an edit view that should fill with the data from ng-init="findOne().
It seems to get everything except the price input which is the only number input form.
Is there anything special about the type="number" that it wont use the model="saving.price" yet for example it will fill the model="saving.retailer" box which is type="text".
Heres the View Code
<!-- Retailer Box Start-->
<div class="form-group new-deal-form"
ng-class="{ 'has-error' : createSavingForm.title.$invalid && submitted}" show-errors>
<label for="retailer">Retailer</label>
<input name="retailer" type="text" ng-model="saving.retailer" id="retailer" class="form-control"
placeholder="Retailer" required>
<div class="sub-label">Enter the Retailer of the Deal.</div>
<div ng-messages="savingForm.savingsCTRL.retailer.$error" role="alert">
<p class="help-block error-text" ng-message="required">Retailer is required.</p>
</div>
</div>
<!-- Retailer Box End-->
<!-- Price Box Start-->
<div class="form-group new-deal-form"
ng-class="{ 'has-error' : createSavingForm.title.$invalid && submitted}" show-errors>
<label for="price">Price(Euro)</label>
<input name="price" type="number" ng-model="price" id="price" class="form-control" placeholder="Price"
required>
<div class="sub-label">Enter the Price of the Deal. 0 for no price.</div>
<div ng-messages="savingForm.savingsCTRL.price.$error" role="alert">
<p class="help-block error-text" ng-message="required">Price is required.</p>
</div>
</div>
<!-- Price Box End-->
Batarang clearly shows the model as having the price. If i enter something in the price box and hit update, it saves the new price.
You haven't posted your model but there is something special about <input type="number"> - it can only be binded to a number (price = 2), not a string whose value is a number (price = '2').
function Ctrl($scope) {
$scope.priceStr = '2';
$scope.priceNum = 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<label>string model </label>
<input type="number" ng-model="priceStr" /><br/>
<label>number model </label>
<input type="number" ng-model="priceNum" />
</div>
</div>
I have this form with validation in AngularJS:
<form ng-app="myApp" ng-controller="validateCtrl as validate" name="myForm" action="sendEmail" novalidate>
<div class="form-group">
<input type="email" name="email" class="form-control" ng-model="validate.email" placeholder="Email" required>
<span style="color:yellow" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" ng-model="validate.subject" placeholder="Subject" required>
<span style="color:yellow" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
<span ng-show="myForm.subject.$error.required">Subject is required.</span>
</span>
</div>
<div class="form-group">
<textarea type="text" name="message" class="form-control" ng-model="validate.message" placeholder="Message..." required></textarea>
<span style="color:yellow" ng-show="myForm.message.$dirty && myForm.message.$invalid">
<span ng-show="myForm.message.$error.required">Message is required.</span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success"
ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
myForm.subject.$dirty && myForm.subject.$invalid ||
myForm.message.$dirty && myForm.message.$invalid"></button>
</form>
The button is disabled until the email, subject and message aren't correct. Ok, it's fine. But that is true, only if I have already interacted with the form.
In fact, when the page is loaded the first time and I haven't interacted with the form yet, the button is enabled. So, if I click it, I could send an empy email! I would that when the page is loaded the button is disabled and when I fill the fields become enabled.
How can I do that?
Thanks.
You first condition can be ng-disabled=" myForm.email.$invalid . Remove "myForm.email.$dirty
Try like this
<form name="postForm" method="POST" novalidate>
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-12"><legend>Submit New Post</legend></div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.title.$invalid && !postForm.title.$pristine }">
<input type="text" placeholder="Write Title" class="form-control" name="title" ng-model="post.title" required>
<p ng-show="postForm.title.$invalid && !postForm.title.$pristine" class="text-danger">* Write Post Title</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.url.$invalid && !postForm.url.$pristine }">
<input type="url" placeholder="Write URL" class="form-control" name="url" ng-model="post.url" >
<p ng-show="postForm.url.$invalid && !postForm.url.$pristine" class="text-danger">* Write URL in http:// or https:// Format</p>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12" >
<p class="text-danger">{{msg}}</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12"><button type="submit" class="btn btn-info" ng-disabled="postForm.$invalid" ng-click="submitForm(....)">Submit</button>
<img src="img/loading.gif" ng-show="loading" /></div>
</div>
</div>
</form>
On your submit button, modify the ng-disabled to this:
ng-disabled="myForm.$invalid || myForm.$pristine">
In this case, you don't have to validate all your inputs separetely. Just test if your form is invalid OR if the user never interacted with it yet.
A form in AngularJS has two different states: pristine and dirty. The pristine indicates that your form was never touched. And dirty is the opposite. When the user set any value to one of your inputs, the angular change the state of your form from pristine to dirty.
I guess this post is a good reference to read about forms in angular