Why isn't the error variable being set here? Shouldn't user.username.$error.minlength be true when no value is in the input?
<form name="user" ng-submit="submit()">
<div class="input-wrapper">
<input placeholder="Username" ng-model="user.username" ng-minlength="2" ng-maxlength="12" />
<div ng-show="user.username.$error.minlength">Min length!</div>
</div>
<div class="input-wrapper">
<input placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" />
<div ng-show="loginForm.password.$error.minlength">Min length!</div>
</div>
</form>
if you need to show the message when there is no value for the password you need to check the required property.
put a name for the form
<form name="formName" ng-submit="submit()">
put a name to password input. and the required attribute
<input name="password" placeholder="Password" ng-model="user.password" ng-minlength="5" ng-maxlength="15" required />
change the ng-show as,
<div ng-show="formName.password.$error.required || formName.password.$error.minlength">Min length!</div>
formName.password.$error.required will handle the status of empty input.
here is a plunker demo
Related
I have a react app that has a couple of inputs. The problem is, whenever I navigate to the page, it auto-fills all the fields with previously entered data on Microsoft Edge (The new one). I use Materialize for my styling. I implement my form like so:
<form onSubmit={this.handleSubmit} autoComplete='off' className="login-form">
<div className="input-field">
<input
placeholder='Type email here'
id="email"
type="email"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="email">Email</label>
</div>
<div className="input-field">
<input
placeholder='Type password here'
id="password"
type="password"
required
className="validate contact-input"
onChange={this.handleChange}/>
<label
className="active"
htmlFor="password">Password</label>
</div>
<div className="input-field col s6">
<button className="btn z-depth-2 login-btn">
Sign In
</button>
</div>
</form>
Some solutions I have tried that do not work include:
<form autoComplete="off">
...
</form>
<form autoComplete="new-password">
...
</form>
<input autoComplete="off" />
<input autoComplete="new-password" />
<input autoComplete="none" />
Anyone know how to fix this?
Try this :
<input type="text" autocomplete="off" list="autocompleteOff"
id="fieldId" name="fieldname" placeholder="Placeholder here" />
Answer from here : Disable input text suggestions in Edge?
I'm creating a signup model form with a react-responsive-modal library. I wrote my Modal like this
<Modal open={this.state.openCreateAlbum} onClose={this.onCloseModalCreate}>
<div className="modal-body">
<h2>Get Started Absolutely<span> Free!</span></h2>
<span className="subtitle">No credit card needed</span>
<form className="contact-form form-validate3" novalidate="novalidate">
<div className="form-group">
<input type="text" name="name" id="name" placeholder="First Name" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input className="form-control" type="email" name="email" placeholder="E-mail" required="" autocomplete="off" aria-required="true" />
</div>
<div className="form-group">
<input type="password" name="pass" className="form-control" placeholder="Password" required="" autocomplete="off" aria-required="true" />
</div>
<input className="btn btn-md btn-primary btn-center" id="sign_up" type="button" value="Sign Up" />
</form>
</div>
</Modal>
Notice that for First Name field I'm not using className=form-control and for other fields, I'm using that className.
The problem I got is when I run that. I cannot enter text to email and password field but it's fine with the first name field. I don't know why and how to fix that. I followed a tutor video and he didn't have that issue. Here is the link to the video https://www.youtube.com/watch?v=YLQXEHDXnlU
Ps: Im using this library for Modal component https://www.npmjs.com/package/react-responsive-modal
I'm trying to get the second password input only to show after the user starts typing into the first input. Also, is there are way to either "require" them both or none at all?
<form name="signUpForm">
...
<input ng-modal="password" type="password" placeholder="password">
<input ng-show="password.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
password has no property like $dirty but form controller has that one. So first of set name of input then you can access form controller with it
<form name="signUpForm">
...
<input name="passwordNameAttr" ng-modal="password" type="password" placeholder="password">
<input ng-show="signUpForm.passwordNameAttr.$dirty" class="animate-show animate-hide" type="password" placeholder="password (again)">
</form>
for dynamic require you can use ng-required. Just put an expresion on it and depends on condition your fields will be required or not...
another example using ng-show $valid required for input fields ..
html:
<form name="signUpForm">
<input name="firstPassword" ng-model="first.password" type="password" placeholder="password" required>
<input name="secondPassword" ng-show="signUpForm.firstPassword.$valid" ng-model="second.password" type="password" placeholder="password (again)" required>
</form>
working fiddle here: https://jsfiddle.net/vj5evgyw/2/
The angular email validation is not working for me, that I'm not allowed to type any text in the email text box.
Following is my HTML:
<form name="locationSettingsForm" ng-submit="vm.saveLocationSettings()" class="form">
<input class="userInput" style="width:40%" type="email" name="email"
maxlength="50" data-ng-model="vm.location.email" required
ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" />
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.email">Email is invalid</label>
<label class="validationErrorText" data-ng-show="locationSettingsForm.email.$dirty && locationSettingsForm.email.$error.required">Email is required</label>
</form>
Initially I tried without the ng-patter. I only used type='email', but in both instances it didnt work. I can't type any text.
try this pattern
ng-pattern="/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$/"
it should work
Hi try below code....
<input type="email" id="inputEmail" ng-model="email" name="uEmail" placeholder="Email Id" required>
<div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
<span ng-show="form.uEmail.$error.required">Tell us your email.</span>
<span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo