Below is Html code of form. The only issue here is, the error message get displayed until page load completes.
Any suggestion?
Edit
I am sharing video link of this issue
https://vimeo.com/142634090
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
});
<form ng-app="myApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Email is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
<div class="box-footer-custom">
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
</div>
</form>
#Yann Lelong, the code will work the way #Arvind Jha wants as long as the javascript is loaded before the html such as in your example. But based on what Arvind said, it seems that the javascript code is being loaded afterwards and not immediately (possible because of server slowness or network speed).
I took Yann's Plnkr and modified it to simulate what can happen if the javascript code isn't loaded right away and I was replicate the issue. The way to fix it is by adding the ng-cloak attribute to those elements that you want to hide before angular has a change to fully load up.
Given that the css rules for ng-cloak are in angular.js, it is also advisable to manually add the styling rules for the ngCloak in the head of the html
<head>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
And the components that you want to hide with ng-cloak:
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-cloak ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Name is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-cloak ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
Here the plnkr with my changes: http://plnkr.co/edit/iKFohNLbRD8zghdzBvuC?p=preview
It seems that your code is actually working the way you want it. I simply copy/pasted it in this Plunker and it worked.
index.hmtl
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<form ng-app="validationApp" action="#" method="post" ng-controller="validateCtrl" name="myForm" novalidate>
<div class="form-group-custom">
<label>Full Name</label>
<input type="text" name="fullName" class="form-control" placeholder="Full Name" ng-model="fullName" required>
<span style="color:red" ng-show="(myForm.fullName.$dirty && myForm.fullName.$invalid)">
<span ng-show="myForm.fullName.$error.required">Name is required.</span>
</span>
</div>
<div class="form-group-custom">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="useremail" class="form-control" placeholder="Email" ng-model="useremail" required>
<span style="color:red" ng-show="myForm.useremail.$dirty && myForm.useremail.$invalid">
<span ng-show="myForm.useremail.$error.required">Email is required.</span>
<span ng-show="myForm.useremail.$error.email">Invalid email address.</span>
</span>
</div>
<div class="box-footer-custom">
<button class="btn btn-primary" type="submit">Save</button>
<button class="btn btn-danger" type="submit" style="margin-left:10px;">Cancel</button>
</div>
</form>
</body>
</html>
app.js
// create angular app
var app = angular.module('validationApp', []);
// create angular controller
app.controller('validateCtrl', function($scope) {
});
What you can do is check your HTML header to make sure you properly included the mandatory scripts : AngularJS and your JS file.
Related
I am using bootstrap 4 in my Umbraco CMS project.
I want to add reCAPTCHA 2 in a registration form but I am having no luck with it.
Generated the keys for the recaptcha and set them in web.config where I can get later.
Here is my code of how I am trying to do it.
At the end of the header tag I included this scripts:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Then the form looks like this:
#using (Html.BeginUmbracoForm<AccountSurfaceController>("RegisterUser", null, new { id = "RegisterForm" }, FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-group">
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<small>Te gjitha fushat e meposhtme duhen plotesuar.</small>
</div>
</div>
<div class="form-group">
<label for="FirstName" class="form-control-label">Emri:</label>
<input type="text" class="form-control" name="FirstName" id="FirstName">
</div>
<div class="form-group">
<label for="LastName" class="form-control-label">Mbiemri:</label>
<input type="text" class="form-control" name="LastName" id="LastName">
</div>
<div class="form-group">
<label for="Username" class="form-control-label">Username:</label>
<input type="text" class="form-control" name="Username" id="Username">
</div>
<div class="form-group">
<label for="Email" class="form-control-label">Email:</label>
<input type="text" class="form-control" name="Email" id="Email">
</div>
<div class="form-group">
<label for="Password" class="form-control-label">Password:</label>
<input type="password" class="form-control" name="Password" id="Password">
</div>
<div class="form-group">
<label for="ConfirmPassword" class="form-control-label">Konfirmo Password:</label>
<input type="password" class="form-control" name="ConfirmPassword" id="ConfirmPassword">
</div>
<div class="form-group">
<div class="col-6">
<label for="captchaContainer" class="form-control-label">Captcha:</label>
</div>
<div class="col-6">
<div id="captchaContainer" class="g-recaptcha" data-sitekey="#ConfigurationManager.AppSettings[DictionaryKeys.ReCaptchaPublicKey]"></div>
</div>
</div>
<button type="submit" class="btn btn-primary">Regjistrohu</button>
}
I read some questions like this in SO but they did not solve my problem.
The recaptcha item shows in the page but when I click on it it creates the error 'too much recursion' in console and shows nothing.
Does anybody know why might cause this issue ?
Thanks in advance.
I found the issue and it was pretty strange indeed.
I had more than one form in my webpage.
The first one had the recaptcha while the other forms did not.
But other forms did have a field as below:
<input name="tagName" type="hidden" value="array" />
And that was the problem because when I change te name attribute to semthing else it works, for example:
<input name="anotherName" type="hidden" value="array" />
I think there is a bug in recaptacha logic to handle this scenario if you put name attribute equal to tagName.
Anyway will report this to recaptach team and let know if this is a bug or there is something I am missing.
Trying to get Angular-ui-validate to work with my form with bootstrapcss
Here is the HTML
<div class='container' ng-controller='RegisterController as ctrl'>
<form class="form-register" ng-submit="ctrl.register()">
<h2 class=form-user-details">General Information</h2>
<div class="form-group">
<label for="inputEmail1">Email address</label> <input type="email"
class="form-control" ng-model='inputEmail' id="inputEmail1"
placeholder="Email" required autofocus> <span
style='font-size: 10px; color: red'>Note: Your email will
serve as your username!</span>
</div>
<div class="form-group" ng-class="{'has-error': !form.confirm_password.$error.validator}">
<label for="inputPassword">Password</label> <input name='password'
type="password" id='inputPassword' ng-model='password'
class="form-control" placeholder="Enter Password" ng-minlength="6" ng-maxlength="30" required>
<input type="password" class="form-control" name='confirm_password'
placeholder="Re-enter Password" ui-validate="'$value==password'"
ui-validate-watch="'password'">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Create
Account</button>
</form>
</div>
Link to angular-ui-validate https://github.com/angular-ui/ui-validate/blob/master/dist/validate.min.js
Link to example I saw:
password-check directive in angularjs
3rd example down
Seems easy enough but !form.confirm_password.$error.validator is always true without exception
Few things actually happened... First I am stupid and forgot to put ui-validate in my model dependencies...
Then I needed to add a ng-model to the confirm_password field...
And finally I needed to add the name form to my form.
Then it worked...
I have a form where i have two textfields added using the Bootstrap. Now i tried to add AngularJs validation for these two fields but not able to do it..Here is my Markup for userId textfield.
<form role="form" name="Loginform" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
<span style="color:red" ng-show="Loginform.user.$dirty && myForm.user.$invalid">
<span ng-show="Loginform.user.$error.required">Username is required.</span>
</span>
</div>
</form>
Please help me to resolve this ..Thanks..
Can you please see I have updated code and made some correction
http://jsfiddle.net/v7je78gq/
<span style="color:red" ng-show="Loginform.$dirty && Loginform.$invalid">
<span ng-show="Loginform.$error.required">Username is required.</span>
</span>
This is because of in you are check for property which is not exist in the form
hope this will help you
If you want to validate one or more input field, the best way is to create a controller and calling it.
function Ctrl($scope) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
$scope.isValid = function(field){
return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
};
}
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<form name="myForm" novalidate class="form-horizontal">
<div class="control-group" ng-class="{error: isInvalid('name')}">
<label>Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="!isValid('name')">Name is required</span>
</div>
</form>
</body>
</html>
Hope it works for you :)
The name of your input field is UserID not user.
ng-show="Loginform.UserID.$error.required"
Your input name did not correctly corresponded to the validation element
<form role="form" name="Loginform" action="" method="post" class="registration-form">
<div class="form-group">
<label class="sr-only" for="UserID">User ID</label>
<input type="text" name="UserID" ng-model="user" placeholder="User ID..." class="form-first-name form-control" id="UserID" required>
<span style="color:red" ng-show="Loginform.UserID.$touched && Loginform.UserID.$invalid">
<span ng-show="Loginform.UserID.$error.required">Username is required.</span>
</span>
</div>
</form>
This doesn't look any different than what I thought I would normally write when I put a form together in AngularJS, but for whatever reason ngSubmit is not working, and ngDisabled isn't disabling the button when the fields are empty. I took the section and pasted it into a new project to see if it was just acting out due to some other dependencies, but it still doesn't work even after trimming the fat. Can anyone see what is wrong, it's obvious after this amount of time I'm not going to see it myself.
I preloaded the form fields using the controller to verify that they are talking, interpolated the user data in pre tags which are bound to ng-model since I can see it update as I type, and there are no ng errors occuring, even looking at Chromes angular plugin it looks fine. But, login() is never invoked on ngSubmit and the button is never ngDisabled when the required fields are blank.
Stripped down version of the issue that still doesn't work:
<div ng-app="myApp">
<div ng-controller="LoginController as loginCtrl">
<form name="loginForm" role="form" ng-submit="loginCtrl.login()" novalidate></form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" name="username" ng-model="loginCtrl.user.username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="loginCtrl.user.password" required>
</div>
<div class="form-group clearfix">
<button type="submit" class="btn btn-primary btn-block" ng-disabled="loginForm.$invalid">Login</button>
</div>
<pre>user data = {{loginCtrl.user | json}}</pre>
<pre>form invalid = {{loginForm.$invalid}}</pre> <!-- always says false... but it is invalid -->
</form>
</div>
</div>
<script>
(function() {
'use strict';
angular.module('myApp', [])
.controller('LoginController', [function() {
var self = this;
self.user = { username: 'asdf', password: 'asdf' };
self.login = function() {
console.log("hello world");
};
}]);
})();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
make sure that angular libraries are included.
https://docs.angularjs.org/misc/downloading
and have a look at these solutions
https://github.com/angular/angular.js/issues/2513
and if you like to see my working form...
<div class="col-md-10">
<form class="tab-pane active form-horizontal" id="first" name="userForm" novalidate ng-submit="save()">
<h2>Sign up</h2>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.username.$invalid}">
<label class="control-label col-md-3">UserName <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="username" class="form-control" ng-model="user.username" required placeholder="username"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Username is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.email.$invalid}">
<label class="control-label col-md-3">Email <span class="required">* </span> </label>
<div class="col-md-4">
<input type="email" name="email" class="form-control" ng-model="user.email" required placeholder="email"/>
</div>
<p ng-show=" submitted && userForm.email.$invalid" class="help-block">Email is required.</p>
</div>
<div class="form-group" ng-class="{'has-error' : submitted && userForm.password.$invalid}">
<label class="control-label col-md-3">Password <span class="required">* </span> </label>
<div class="col-md-4">
<input type="text" name="password" class="form-control" ng-model="user.password" required placeholder="1.2"/>
</div>
<p ng-show="submitted && userForm.password.$error.required" class="help-block">Password is required.</p>
</div>
<div class="form-group">
<label class="control-label col-md-3">Confirm Password </label>
<div class="col-md-4">
<input type="text" name="password_confirmation" class="form-control" ng-model="user.password_confirmation"
placeholder="password_confirmation"/>
</div>
<p ng-show="submitted && userForm.password_confirmation.$invalid" class="help-block">password_confirmation is required.</p>
</div>
<div class="form-group">
<div class="pull-left">
<a class="btn btn-default" href="/app/assets/images"> Back</a>
<button type="submit" class="btn btn-primary" ng-click="submitted=true">Submit</button>
</div>
</div>
</form>
</div>
I'm trying to do form validation with AngularJS but somehow the page won't show my required message.
Can anyone point me in the right direction what I'm missing at this time? I've just picked up AngularJS and I'm trying to write a proof of concept, so we can use this in production.
HTML
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required>
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
JavaScript
function registerController($scope){
$scope.master = {};
$scope.reset = function(){
$scope.register = angular.copy($scope.master);
}
};
As J.Pip stated, the message wasn't shown due to mis formatted HTML code. It should be solved with the code below.
HTML code
<form id="signup" class="form-horizontal" name="signup" novalidate>
<legend>Register</legend>
<div class="control-group">
<label class="control-label">Username</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i> </span>
<input type="text" class="input-xlarge" id="uname" ng-model="register.uname" name="uname" placeholder="Username" required />
<span ng-show="signup.uname.$error.required" class="help-inline">Required</span>
</div>
</div>
</div>
</form>