I'm trying to toggle an error area on my form that only triggers once there is some input, it's a bit silly to have the errors all appear if the user hasn't started typing yet.
<form name="registerForm">
<input type="email" name="email" ng-model="email" required />
</form>
<span ng-show="registerForm.email.$invalid">
Invalid email.
</span>
This works fine once I'm typing but I want it to show no errors if the input is empty. I've tried using the model ng-hide="!email.length" but can't get it to work.
<span ng-show="registerForm.email.$invalid && registerForm.email.$dirty>
Try this:
<span ng-show="registerForm.email.$invalid && email>
Related
I have a big form for a website, with multiple required fields, and all of them are working perfectly, when i click submit on the form, the web page scroll to the field's location with an error message, except on two parts, the "Number of travelers" and the "Date of the trip".
This is the HTML for both of them:
<div class="sect-txt" style="margin-top:100px;" id="op">
<h1> Date of the trip </h1>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check In </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-in" name="checkin" required />
</div>
<div class="al">
<h1 style="font-family:Montserrat;font-size:14px;color:#161616;margin-bottom:5px;"> Check Out </h1>
<input type="date" class="hide-replaced" data-date-size="1" placeholder="Check-out" name="checkout" required />
</div>
<a href="#four">
<div class="btn-nxt" style="position:relative;top:137px;">
NEXT
</div>
</a>
</div>
<div class="sect-txt">
<h1> Number of travelers </h1>
<input type="number" class="f-2" placeholder="Adults" name="adults" required/>
<input type="number" class="f-3" placeholder="Children" name="childrens" required/>
<a href="#fif">
<div class="btn-nxt-b">
NEXT
</div>
</a>
</div>
And this is a link to the page in action: http://www.eliteware.co/92/form/
Your button is not focusable because you are trying to hide it when it has to receive focus again. Check the following link for more information about why this happens. Basically, you are hiding the object that is supposed to receive focus when validation is needed. If you don't want this to happen, you can probably do validation before hiding, or unhide the object if validation fails.
https://stackoverflow.com/a/28340579/616813
Also, do remember, if an error log exists, that is the first point to check if you receive an error. That is the whole point of error log, to give you a starting point to debug.
Or as Andreas said, "Fix the damn errors in the console... :)".
Edit:
Because it was killing me, I tried to reverse engineer your application. All it took was comparing the textbox that was working, and the one that was failing to find the problem. Really, that easy.
aria-required="true"
Your "Adults" and "Children" input fields have this property. You need required="true" instead.
Check your css and update that. And no, I have no idea why "aria=required" and "required" property behave differently. It is something new to learn for sure.
I've been writing a web application and i've got three different forms.
I've put some validation on them but it seems that after a recent update everything gets ignored.
Validation that still works:
-checks if input isn't empty
-Maxlength
Validation that stopped working:
-Patterns
-input type email ( This is the one that surprises me the most), it doesn't
check for an '#' anymore or any other checks it does if you put your input
type to email.
example code = `
<div class="form-group" [ngClass]="{ 'has-error': submitted && (!trainer.email || emailExists)}">
<label for="email">E-mail*</label>
<input [(ngModel)]="trainer.email" type="email" class="form-control" name="email" maxlength="50" placeholder="Enter e-mail adress" />
<div *ngIf="submitted && !trainer.email" class="help-block">E-mail adress is required</div>
<div *ngIf="submitted && emailExists" class="help-block">E-mail adress "{{emailInUse}}" is already in use</div>
</div>
`
I've removed everything from the html and put in just a single email input type and it still doesn't work. I guess it goes wrong somewhere else in my code but I don't know where to start looking. This example is for my trainer class but I have 2 other html files that also suddenly stopped working so that adds to my conclusion that the problem isn't in the HTML.
Is there any common bug that causes these kinds of problems?
Thanks
I have Custom input component with validation with ngMessages,FormController and ng-required:
<div class="col-sm-9 col-xs-12">
<input
id="{{$ctrl.fieldName}}"
name="{{$ctrl.fieldName}}"
class="form-control"
type="text"
minlength="{{$ctrl.minLength}}"
maxlength="{{$ctrl.maxLength}}"
ng-required="{{$ctrl.isRequired === 'true'}}"
ng-model="$ctrl.value"
ng-change="$ctrl.form.$submitted = false;"
>
<div
ng-messages="$ctrl.form[$ctrl.fieldName].$error"
ng-if="$ctrl.form.$submitted"
>
<span class="help-block" ng-message="required">
Field is required
</span>
<span class="help-block" ng-message="minlength">
Minimum length of field: {{$ctrl.minLength}}
</span>
<span class="help-block" ng-message="maxlength">
Maximum length of field: {{$ctrl.maxLength}}
</span>
</div>
</div>
Which is used in this way:
<act-text-field
form="heroAddForm"
field-name="name"
min-length="3"
max-length="15"
is-required="true"
errors="$ctrl.errors.name"
ng-model="$ctrl.hero.name">
</act-text-field>
What I want to achieve is validation fires when user clicks submit button. And it works, validation fires also for required field name, but also for field description which is not required:
<act-text-field
form="heroAddForm"
field-name="description"
max-length="50"
is-required="false"
errors="$ctrl.errors.description"
ng-model="$ctrl.hero.description"
></act-text-field>
Also for this field validation messages are visible, although field description is valid, cause I add class has-error to invalid fields:
<div class="form-group"
ng-class="{'has-error': $ctrl.form.$submitted && (!$ctrl.form[$ctrl.fieldName].$valid)}"
>
<!-- rest of code -->
You can easily reproduced this wrong behaviour in my Plunker: Custom input demo app with validation states (I know it has other mistakes). I think ng-message="required" should not be visible, because field description is not required. I know I can add some ng-ifs to code to by-pass it, but I think I make a mistake somewhere which I can't see. Do you see where I made a mistake? Thank you in advance for every help.
I found a solution, again I forgot to include ngMessages. Without it, my code went crazy, I apologize for wasting your time :)
So basically I have a form that uses some Angular, it is a register form and has quite a lot of fields so for a better user experience we decided to use angular to create a 'next' button half way through the form which takes the user to the second half of the form without refreshing the page. However, using basic validation like required is complicated because if the user misses something on the first page and then clicks the submit button on the second page, the 'this field is required' message will flash up but the user cannot see it because it appearing on the first screen.
Is there a way to validate each half of the form separately using something like angularJS or jquery validation plugin? I.e. can I validate the first half of the form when I click the 'next' button so the user cannot get onto the second half of the form without first filling in the first half.
Just a quick note: I tried using the Jquery Validation plugin but as I am also using angular so when I click the next button it does validate once, but then still allows me to move on to the next page.
Hope this question makes sense, cheers!
You can do this in angular way completely as you are using angular in your form. You can also add a check inside your submit function whether any field is invalid before sending the post request too.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<div ng-show="!next">
<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>
<input type="button" ng-disabled="myForm.user.$invalid || myForm.email.$invalid" ng-click="movenext()" value="Next" />
</div>
<div ng-show="next">
<input type="button" ng-click="prev()" value="Previous" /><br>
<p>Password:<br>
<input type="password" name="password" ng-model="password" required>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.password.$invalid">
</p>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.next = false;
$scope.movenext = function(){
$scope.next = true;
}
$scope.prev = function(){
$scope.next = false;
}
});
</script>
</body>
</html>
try:
$("#form").validate();
you can also chose which elements to try and validate using:
$("#form").validate().element("#id");
this will manually fire the validation process without submitting the results, and it will also let you chose what elements you want to validate.
Maybe you can use the keyup function. Something like this:
$("input[type='email']").keyup(function(evt){
validate($(this).val());
});
Where validate is a function where you check the input's value.
Anyway, if you want use the keyup function you can do something like this.
In my form, I have a field that is required using Angular's form validation. It looks something like:
<form id="project" name="formProject">
<input id="projectName" name="projectName" ng-model="projectForm.projectName" placeholder="Name" required />
<div ng-show="!formProject.projectName.$pristine && formProject.projectName.$error.required>
A project name is required.
</div>
The problem is, once the user puts the cursor in the input box, the error message immediately shows. It doesn't wait for the user to start typing. This is not an issue in Firefox or Chrome, just IE. Is there an easy work around?
You could workaround the problem by initialize the value binding with the ng-model to an empty string.
Either via ng-init:
<input id="projectName" name="projectName" ng-model="projectForm.projectName" ng-init="projectForm.projectName = ''" placeholder="Name" required="" />
Or do it in a controller:
$scope.projectForm = {
projectName: ''
};
Example plunker: http://plnkr.co/edit/jbXJSYuIaOBO037fsyzI?p=preview
Hope this helps.