I am facing a problem in form validation using Angular.js.
This is my HTML code:
<form class="form-horizontal" name="regForm" novalidate>
<div class="form-group" ng-class="{'has-error':regForm.name.$touched && regForm.name.$invalid}">
<label class="control-label col-sm-2">Username:</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="name" ng-model="name" placeholder="Enter Username" ng-minlength="5" ng-maxlength="10" required>
</div>
<div class="help-block" ng-messages="regForm.name.$error" ng-if="regForm.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 class="form-group">
<label class="control-label col-sm-2">Password:</label>
<div class="col-sm-10">
<input class="form-control" type="password" name="pwd" ng-model="pwd" placeholder="Enter Password" ng-pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" maxlength="12" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Repeat Password:</label>
<div class="col-sm-10">
<input class="form-control col-sm-6" type="password" name="num" ng-model="repeat password" placeholder="Repeat password">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email Address:</label>
<div class="col-xs-10">
<input class="form-control col-sm-6" type="email" name="num" ng-model="email" placeholder="Enter Email Address">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Repeat Email Address:</label>
<div class="col-xs-10">
<input class="form-control col-sm-6" type="email" name="num" ng-model="repeatemail" placeholder="Repeat Email Address">
</div>
</div>
</form>
For the first input field (i.e. username) I tried validations using ng-messages and has-error. This was the output I am getting
I need the specific output be like, if name is small means I have to get error message like "your name is too small". But when I am typing the name I am getting three error messages at a time.
You need to specify the condition for each message to show:
<p ng-if="regForm.name.$error.minlength">Your name is too short.</p>
Your code is working for me. I suspect you don't have the angular-messages module included. From the angular docs:
First, get the file:
Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js
NPM e.g. npm install angular-messages#X.Y.Z
Bower e.g. bower install angular-messages#X.Y.Z
Then, include angular-messages.js in your HTML:
<script src="path/to/angular.js"></script>
<script src="path/to/angular-messages.js"></script>
Finally, load the module
in your application by adding it as a dependent module:
angular.module('app', ['ngMessages']);
With that you're ready to get started!
Related
This is the html for my page
<form id="sign-up">
<label class="col-lg-4 col-md-3">First Name</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="first-name" required>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Last Name</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="last-name" required>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Username</label>
<div class="col-lg-6 col-md-6">
<input type="" name="" class="form-control" id="username" required>
</div>
<div class="col-md-12 label-padding">
<span class="error-message username-exists hidden">Username Exists</span>
</div>
<label class="col-lg-4 col-md-3">Email</label>
<div class="col-lg-6 col-md-6">
<input type="email" name="" class="form-control" id="email" required>
</div>
<div class="col-md-12 label-padding">
<span class="error-message email-exists hidden">Email Exists</span>
</div>
<label class="col-lg-4 col-md-3">Password</label>
<div class="col-lg-6 col-md-6">
<input type="password" name="" class="form-control" id="pswd" placeholder="Minimum password length: 8 chars" required>
<p class="error-message hidden password-error">Password too short.</p>
</div>
<div class="col-md-12 label-padding"></div>
<label class="col-lg-4 col-md-3">Confirm Password</label>
<div class="col-lg-6 col-md-6 label-padding">
<input type="password" name="" class="form-control" id="pswd-2" placeholder="repeat password" required>
<p class="error-message hidden password-mismatch-error">Passwords don't match.</p>
</div>
it has a bug in firefox where I can't on the modal type into the password field. To show this issue well enough I recorded it so you can see on the form looping with tab skips the field (and I also can't click the field).
https://youtu.be/PyG1KM6_jzY
The problem is with Ubuntu 18.04 operating system you're using combined with Firefox.
The problem is solved if you install the available package by
https://bugzilla.mozilla.org/attachment.cgi?id=8974077
Here is the origin of the .deb
https://bugzilla.mozilla.org/show_bug.cgi?id=1405634
Hopefully, the bug will soon be fixed in Ubuntu, in the meantime, you can install the package fix.
<form _ngcontent-c10="" action="" id="sign-in" method="post" novalidate="" data-context="sign-in" class="ng-invalid">
<div _ngcontent-c10="" class="row">
<label _ngcontent-c10="" for="username">Username</label>
<input _ngcontent-c10="" id="username" name="username" required="" type="text" value="" class="ng-untouched">
<div _ngcontent-c10="" class="error" data-sign-in-error="username error">
**field balnk**
</div>
</div>
<div _ngcontent-c10="" class="row">
<label _ngcontent-c10="" for="password">Password</label>
<input _ngcontent-c10="" id="password" minlength="6" name="password" required="" type="password" value="" class="ng-invalid">
<div _ngcontent-c10="" class="alert-error">
<div _ngcontent-c10="" data-sign-in-error"="password-error">
**password insufficient length**
</div>
</div>
</div>
Whenever data-sign-in-error is visible I want to print the input id with the corresponding div data attribute value. The output should be
username-username error, password-password-error
I don't want to use classes as a selector.
I am trying to use jqBootstrapValidation; it shows the default message instead of a custom message. Do I miss a <div> here ?
<div class="control-group">
<div class="controls">
<div class="form-group">
<label for="login_value" class="sr-only">Username</label>
<input type="text" class="form-control" id="login_value" name="juname" placeholder="Username" tabindex="1" required="required" data-validation-required-message="Please Enter Username" />
</div>
</div>
</div>
I believe you forget to add the validation classes to your label.
<label for="login_value" class="sr-only control-label required">Username</label>
<input type="text" class="form-control" id="login_value" name="juname" placeholder="Username" tabindex="1" required="required" data-validation-required-message="Please Enter Username" />
Hi I am new to Angular Js and I am trying to make a Login page where I Have three forms which are as follows:
Login Form
Create New Account form
Forgot password Form.
All this forms are present in one HTML Page.HTML page for the login(login.html) is as follows:
<form class="login-form" ng-submit="submit()" method="POST" ng-controller="SignInController" >
<h3 class="form-title">Sign In</h3>
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
<span>
Enter any username and password. </span>
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control form-control-solid placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Addresss" name="email" ng-model="email_id"/>
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control form-control-solid placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password" ng-model="password"/>
</div>
<div class="form-actions" >
<button type="submit" class="btn btn-success uppercase">Login</button>
Forgot Password?
</div>
<div class="create-account">
<p>
Create an account
</p>
</div>
</form>
<form class="forget-form" method="post" ng-controller="ForgetPassword" ng-submit="passwordGenerator()"> <!-- action="#"-->
<h3>Sign In</h3>
<div class="form-group">
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Email Address" name="email" ng-model="ForgetPassEmailId" />
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success uppercase btn-block">Reset my password</button> <!--type="submit" -->
</div>
</form>
<form class="register-form" action="select_pricing.html" method="post">
<h3>Create Account</h3>
<p class="hint">
Enter your personal details below:
</p>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Full Name</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Full Name" name="fullname" />
</div>
<div class="form-group">
<!--ie8, ie9 does not support html5 placeholder, so we just show field title for that-->
<label class="control-label visible-ie8 visible-ie9">Email Address</label>
<input class="form-control placeholder-no-fix" type="text" placeholder="Email Address" name="email" />
</div>
<div class="form-group">
<label class="control-label visible-ie8 visible-ie9">Password</label>
<input class="form-control placeholder-no-fix" type="password" autocomplete="off" id="register_password" placeholder="Password" name="password" />
</div>
<div class="form-group margin-top-20 margin-bottom-20">
<label class="check">
<input type="checkbox" name="tnc" /> I agree to the <a href="#">
Terms of Service </a> & <a href="#">
Privacy Policy </a>
</label>
<div id="register_tnc_error">
</div>
</div>
<div class="form-actions">
<button type="submit" id="register-submit-btn" class="btn btn-success uppercase btn-block">Create</button>
</div>
</form>
The Angular Controller for the Forget password is as follows
var myApp = angular.module('Login_Upquire_Angular',[]);
myApp.controller("ForgetPassword",['$scope',function($scope){
$scope.passwordGenerator=function(){
var email_id=$scope.ForgetPassEmailId;
if (email_id=="abc#gmail.com"){
console.log("Reset Request is accepted");
window.location="/login.html";
}
}
}]);
As you can see based on my Angular js File, I want to check whether the given password matches with abc#gmail.com, if yes then it should print on my console "REset Request is accepted" and take me back to login page(/login.html) and to the form element namely login-form. Yet I am getting the following error
Cannot POST /login.html
Can somebody help me with this? I have tried but couldn't find a solution for it.
You'll have to do some asynchronous validation. Something like this: http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/
I am trying to validate a form with the jQuery validation plugin. However, I am only getting the validation to work for 1 of the inputs. Any ideas?
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"> </script>
<form id="driver-form" class="form-horizontal driver" method="post">
<div class="form-group">
<label for="inputName1" class="col-md-2 col-md-offset-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverFirst" placeholder="First Name" required/>
</div>
</div>
<div class="form-group">
<label for="driverLast" class="col-md-2 col-md-offset-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverLast" placeholder="Last Name" required/>
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-md-2 col-md-offset-2 control-label">Email</label>
<div class="col-md-4">
<input type="email" class="form-control" id="driverEmail" placeholder="Email" required/>
</div>
</div>
<div class="form-group">
<label for="inputPhone1" class="col-md-2 col-md-offset-2 control-label">Phone Number</label>
<div class="col-md-4">
<input type="text" class="form-control" id="driverPhone" placeholder="Phone Number" required/>
</div>
</div>
</form>
javascript:
$("#driver-form").validate();
jsfiddle: http://jsfiddle.net/rynslmns/533Yt/
The validation framework used name attribute, you have not specified it
<input type="text" class="form-control" id="driverFirst" name="driverFirst" placeholder="First Name" required/>
Demo: Fiddle