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;
};
});
Related
I want to check pattern check if input field length > 0 how can i do this .
expectation
when input field empty showing required message(touched)
After start typing need to check pattern if pattern is not match need to show Please Enter Valid Input and if input field length 0 need to show only required message
(function(angular) {
'use strict';
angular.module('ngMessagesExample', ['ngMessages']);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>
<div ng-app='ngMessagesExample'>
<!-- App goes here -->
<form name="test" novalidate ng-submit="test.$valid && submit()">
<div layout-gt-md="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Number</label>
<input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
<div ng-messages="test.number.$error">
</div>
<div ng-messages="test.$error" ng-show="test.number.$dirty">
<div ng-message="required">number is required</div>
</div>
<span ng-show="!test.number.$valid">Please Enter Valid Input</span>
</md-input-container>
</div>
</form>
</div>
demo
help me out
i have updated the code in HTML
<!doctype html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app='ngMessagesExample'>
<!-- App goes here -->
<form name="test" novalidate ng-submit="test.$valid && submit()">
<div layout-gt-md="row">
<md-input-container class="md-block" flex-gt-xs>
<label>Number</label>
<input required ng-model="user.number" name="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" >
<div ng-messages="test.number.$error">
</div>
<div ng-messages="test.$error" ng-show="test.number.$dirty"><div ng-message="required">number is required</div></div>
<span ng-show="test.number.$error.pattern">Please Enter Valid Input</span>
</md-input-container>
</div>
</form>
</div>
</body>
</html>
I want to fill out an invitation.
Under recipient name I type in the recipient name and then reload the page but nothing happens. The text I put there still remains along with the organization name, event date, url, and host name.
Such as under recipient name I put Gwendalyn Bears and Organization Name I put Tech Industries. Then when I reload the page those names are still there.
Below is my javascript code. It is only two lines but that's all I got at the moment.
function resetForm() {
document.getElementById("recipientName").value = default;
}
My html document so you will know what I am doing. Just so you know I am having to put Javascript into the code. Variables in a form is what it is called.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<section id="pageForm">
<form action="#">
<label for="recipientName">Recipient name:</label>
<input type="text" name="recipientName" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization name:
</label>
<input type="text" name="organizationName" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" placeholder="Enter your Website URL" />
<label for="hostName">Host name:
</label>
<input type="text" name="hostName" placeholder="Host Name" />
<input type="submit" value="Submit">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
<footer>This events site is for IT3215 tasks.
</footer>
<script src="invite.js"></script>
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();
}
})
I am trying to display one piece of form data, the username, on the right side of the same page the form is present in (without page refresh). I want this to happen as soon as I hit submit. For this miniapp, there is no backend (not even local storage).
The following is the markup for the right-side of the page:
The userArray is defined on the scope and has the usernames pushed into it.
<div class="index-right">
<p ng-repeat="user in userArray">
{{ user }}
</p>
</div>
This is my main module and controller:
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope){
$scope.userArray = [];
console.log($scope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$scope.userArray.push($scope.formData.username);
}
console.log($scope.userArray);
};
});
Currently, the usernames aren't showing up on the front page. Although, they are being pushed into the userArray (I am consoling out the array on the browser). Any help on how to proceed would be greatly appreciated.
I am adding the whole index.html here:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cosmo/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-app="practichemApp">
<header class="index-header"><h1>Registration Page</h1></header>
<hr>
<div class="index-left" ng-controller="MainCtrl">
<form id="index-form" name="practichemForm" ng-submit="submitForm(practichemForm.$valid)" novalidate>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.username.$invalid && !practichemForm.username.$pristine }">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="formData.username" ng-minlength="3" ng-maxlength="20" required>
<p ng-show="practichemForm.username.$invalid && !practichemForm.username.$pristine" class="help-block">Username is required</p>
<p ng-show="practichemForm.username.$error.minlength" class="help-block">Username is too short.</p>
<p ng-show="practichemForm.username.$error.maxlength" class="help-block">Username is too long.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.email.$invalid && !practichemForm.email.$pristine }">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="formData.email" required>
<p ng-show="practichemForm.email.$invalid && !practichemForm.email.$pristine" class="help-block">Please Enter a valid email.</p>
</div>
<!-- PASSWORD -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.password.$invalid && !practichemForm.password.$pristine }">
<label>Password</label>
<input type="password" name="password" class="form-control" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/" required>
<p ng-show="practichemForm.password.$error.minlength" class="help-block">Password needs to be at least 8 characters long.</p>
<p ng-show="practichemForm.password.$error.maxlength" class="help-block">Password is too long.</p>
<p ng-show="practichemForm.password.$error.pattern" class="help-block">Password needs at least one integer, one lowercase letter and one uppercase letter.</p>
</div>
<!-- PASSWORD CONFIRMATION -->
<div class="form-group" ng-class="{ 'has-error': practichemForm.passwordConfirm.$error.required && !practichemForm.passwordConfirm.$pristine }">
<label>Password (confirmation)</label>
<input type="password" name="passwordConfirm" class="form-control" ng-model="formData.passwordConfirm" ui-validate="'$value == formData.password'" ui-validate-watch="'formData.password'" ng-minlength="8" ng-maxlength="20" required/>
<p ng-show="practichemForm.passwordConfirm.$error.ui-validate && practichemForm.passwordConfirm.$dirty && practichemForm.passwordConfirm.$error.required">Passwords don't match.</p>
</div>
<br><br>
<button type="submit" class="btn btn-danger" ng-disabled="practichemForm.$invalid">Submit</button>
</form>
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-utils/validate.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Your element that you want to use to show your data it outside of the scope of the place that has the data.
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
You can use a service to share the information, or put the userArray on a higher scope (like $rootScope, or move the ng-controller to a element that wraps both.
$rootScope being the easiest.. try this:
<div class="index-left" ng-controller="MainCtrl">
...
</div>
<div class="index-right" ng-repeat="user in userArray">
{{ $root.user }}
</div>
var app = angular.module('myApp', ['ngRoute', 'ui.validate']);
app.controller('MainCtrl', function($scope, $rootScope){
$rootScope.userArray = [];
console.log($rootScope.userArray);
$scope.submitForm = function(isValid){
if(isValid){
$rootScope.userArray.push($scope.formData.username);
}
console.log($rootScope.userArray);
};
});
You have your ng-repeat out of the controller scope
I created a plunker for you example (removed some fields for simplicity)
http://plnkr.co/edit/7skU1lBIU5Gy7bJ0Htgh?p=preview
Moved this inside so that it is under mainctrl's
<div class="index-right" ng-repeat="user in userArray">
{{ user }}
</div>
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.