Hi I am new to angularjs. I am trying to do simple validation for required field as below.
<ng-form name="form" ng-submit="submit()">
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
<div class="button-container">
<input type="submit" value="Cancel" id="input-cancel">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" ng-click="RegisterUser()" value="Submit" id="input-submit"/>
</div>
</ng-form>
When i click on submit my validation are not working. If i click on textbox and click outside validations are working. May I get some help here to fix this? Any help would be appreciated. Thank you.
I would also add novalidate attribute to the form like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
<form novalidate name="form" ng-submit="submit()">
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work MainStreet" ng-model="workmainstreet" required="" name="workmainstreet">
<span ng-show="form.$submitted || form.workmainstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.workmainstreet.$error.required">Please Enter Work MainStreet</span>
</span>
</div>
<div class="inputblock">
<span class="input-icon"><img src="images/office-icon.png"></span>
<input type="text" class="with-icon" placeholder="Work SubStreet" ng-model="worksubstreet" required="" name="worksubstreet">
<span ng-show="form.$submitted || form.worksubstreet.$touched" class="error-message">
<span style="color:red" ng-show="form.worksubstreet.$error.required">Please Enter Work SubStreet</span>
</span>
</div>
<div class="button-container">
<input type="submit" ng-disabled="form.worksubstreet.$dirty && form.worksubstreet.$invalid || form.workmainstreet.$dirty && form.workmainstreet.$invalid" value="Submit" id="input-submit"/>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Otherwise the browser takes over.
And code to go with it:
angular.module('app', [])
.controller('ctrl', function($scope){
$scope.submit =function(){
$scope.RegisterUser();
}
})
Related
I have a list of some input fields and few select options, so I want them be required on ng-click and raise a message just over the particular required item in form of PopupMenu or kind of that, or what ever the suitable way to show require warning just over the field
Hierarchy in my case:
<form>
<input required
<input required
location form for multiple records (not form tag)
contact form for multiple contacts (not form tag)
submit button to post (input required), all locations and all contacts.
</form>
My Form:
<div class="form-inline">
<div class="form-group">
<input type="text" placeholder="Legal Name" ng-model="companyForm.legalName" required/>
</div>
<div class="form-group">
<input type="text" placeholder="EIN" ng-model="companyForm.ein"/>
</div>
<div class="form-group" id="selectFormationDiv">
<select id="formationListId"></select>
</div>
<div class="form-group">
<input type="checkbox" style="margin-top: 5px;" ng-model="companyForm.internal"/> <b>Internal</b>
</div>
</div>
Note this is not form, and not be called on ng-submit.
My Output:
My Desired output:
Please guide me through how do I code to get my desired output. Thanks
angular.module('app', [])
.error {
color: red;
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<div ng-app='app'>
<form name="form" class="css-form" novalidate>
<input type='text' ng-model='temp1' required name='temp1' />
<span ng-show="form.temp1.$error.required && form.$submitted" class='error'>
field1 is required
</span>
<br>
<input type='text' ng-model='temp2' required name='temp2' />
<span ng-show="form.temp2.$error.required && form.$submitted" class='error'>
field2 is required
</span>
<br>
<input type="submit" value="Save" />
</form>
<hr>
<!--Solution without `<form>` tag: -->
<input type='text' ng-model='temp3' name='temp3' />
<span ng-show="!temp3 && $submitted" class='error'>field3 is required</span>
<br>
<input type='text' ng-model='temp4' name='temp4' />
<span ng-show="!temp4 && $submitted" class='error'>field4 is required</span>
<br>
<input type="button" ng-click='$submitted=true' value="Save" />
</div>
I want to show some hint text below an input if the input has no errors on $error. So either show hint text, or show error message if there is an error.
I have tried using combinations of ngShow/Hide and $valid/$invalid but I can't seem to get it to work the way I need it to.
<div ng-form="reg.form" name="reg.form" novalidate>
<md-input-container flex="100">
<label>{{"views.application.mobile.label" | translate}}</label>
<input type="tel" ng-model="reg.user.mobile" name="mobile" required
ng-pattern="/(^04(\s?[0-9]{2}\s?)([0-9]{3}\s?[0-9]{3}|[0-9]{2}\s?[0-9]{2}\s?[0-9]{2})$)/">
<div ng-show="???" class="hint">e.g. 0400123123</div>
<div ng-messages="reg.form.mobile.$error">
<p class="help-block" ng-message="required">{{"views.application.mobile.error.required" | translate}}</p>
<p class="help-block" ng-message="pattern">{{"views.application.mobile.error.invalid" | translate}}</p>
</div>
</md-input-container>
</div>
I would use $untouched in combination with $error. $untouched will display the hint initially. Validation errors will kick in on blur. From this point on, since the field is "touched", the hint will be displayed unless input is invalid. In your case, something like this should work:
<div ng-show="reg.form.mobile.$untouched || (!reg.form.mobile.$error.required && !reg.form.mobile.$error.pattern)"
class="hint">
e.g. 0400123123
</div>
See this demo it will help you: http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview
'Error message' will be shown if the field is empty otherwise 'hint message' will be shown. Below is the related HTML & JS code
HTML:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="userForm" novalidate>
<label>
First Name: <br/>
<input name="firstname" type="text" ng-model="user.firstName" required><br />
<span class="error" ng-show="userForm.firstname.$error.required">Please enter First name<br /></span>
<span class="hint" ng-show="!userForm.firstname.$error.required">Hint: First name cannot left blank<br /></span><br />
</label>
<label>
Last Name: <br/>
<input name="lastname" type="text" ng-model="user.lastName" required><br />
<span class="error" ng-show="userForm.lastname.$error.required">Please enter Last name<br /></span>
<span class="hint" ng-show="!userForm.lastname.$error.required">Hint: Last name cannot left blank<br /></span><br />
</label>
<button ng-click="submitUser()">Submit</button> <button>Cancel</button>
</form>
<pre>{{ user|json }}</pre>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.isSubmitted = false;
$scope.submitUser = function() {
$scope.isSubmitted = true;
};
});
Following is my code
// LoginCtrl.js
angular.module('homeon', [ 'ngMessages' ]).controller('loginCtrl',
function($rootScope, $scope, $state, $ionicLoading, dbservices, server) {
//--------------------------------- my code-------------
})
<!-- login.html-->
<link href="css/login.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/cerulean/bootstrap.min.css">
<!-- load angular -->
<script src="http://code.angularjs.org/1.4.3/angular.js"></script>
<!-- load ngmessages -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.js"></script>
<!-- load our custom app -->
<script src="js/loginCtrl.js"></script>
<body ng-app="homeon">
<ion-view view-title="Login">
<ion-content>
<form name="loginForm" ng-submit="doLogin(loginForm)" novalidate="">
<div class="list list-inset">
<label class="item item-input itemLabel">
<input type="email" name="username" placeholder="Email" ng-model="username" required="required" ng-minlength="5" >
</label>
<label class="item item-input itemLabel">
<input type="password" name="password" placeholder="Password" ng-model="password" required="required" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[A-Z])(?=.*[!##$%^&*]).{8,}" autocapitalize="off" autocomplete="off" autocorrect="off">
</label>
<div ng-messages="loginForm.username.$error" style="color:red; align:center">
<span ng-message="required">Please enter user name</span>
<span ng-message="minlength">Length of email must be minimum 5 characters</span>
<span ng-message="email">Please enter valid email</span>
<div>
</div ng-messages="loginForm.password.$error" style="color:red; align:center">
<span ng-message="required">Please enter password</span>
<span ng-message="pattern">The passwords must be at least 8 characters and include an
uppercase, lowercase, number, and special character</span>
</div>
<button type="submit" class="button button-block" ng-click="" >Login</button>
</div>
</form>
</ion-content>
</ion-view>
</body>
I am getting 'ngMessages' not instantiated error in browser. Can you please let me know where am I doing wrong or why I am getting this error?
Thanks in advance.
Include <script src="js/angular-messages.js"></script> In your index.html page
I have a form with drop down, text boxes and one submit button. I can submit form with ENTER key like just add ng-keypress="addBookmarkOnEnter($event) with any text boxes and it'll work.
But can I do same task without adding ng-keypress with any text box?
Here is my form:
<form>
<div><input type="text" class="greyPhold" placeholder="http://" data-ng-model="bookmark.url" /></div>
<div class="forSelect">
<div class="selHead" data-ng-class="{hOpen: popup.dropdownStatus}">
<button data-ng-click="toggleDropdown()"><span data-ng-bind="popup.selectedCategory"></span></button>
<ul id="testDiv2" class="dropdownH">
<li data-ng-repeat="category in categories track by $index" data-ng-click="selectCategory($index)">
<div class="colony pull-left"><span>{{category.category_name}}</span></div>
<div class="pull-right"><input type="radio" name="tag" /><label></label></div>
</li>
</ul>
</div>
</div>
<div class="createColony">
<input type="text" class="whitePholder" placeholder="Create a new colony" data-ng-model="bookmark.categoryName"/>
</div>
<div class="complete text-center"><button type="submit" class="done" data-ng-click="addBookmark()">Complete</button></div>
</form>
hope this code would be help you
<html>
<head>
<script src="angular.min.js"></script>
<script src="ui-bootstrap.js"></script>
</head>
<body bgcolor="gray">
<div id="container" ng-app='two_way' ng-controller="two_way_control" style="background-color:CCFF66">
<p style="padding:10px;">
<h1 align="center"> Search Product </h1>
</p>
<p align="center">
<form method="post">
<input type="text" ng-model="searchText" placeholder="Enter a name here" required>
<button ng-click="check(searchText)">Search</button>
</form>
</p>
Search Item Name: {{searchText}}
</div>
</body>
</html>
and use given code inside controller
$scope.check=function(searchText){};
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});