I am working on application where I've one form and It should show validation error message for input fields on wrong input.
My form will look like this -
It should show error message if -
Input field modified with wrong input
Submit button clicked without modification in required input field.
It should show error message as below -
To achieve this I am using ng-message directive. It wil help me to show error message on $dirty of input field. But for Submit button I could not find correct way. Currently I am using a flag which will be modified on submit click. But I am interested in some better approach. Is there predefined method available to achieve this ?
Here is the complete example which I tried, and here is plunkr for the same.
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function() {
$scope.submitted = true;
if (myForm.$valid) {
alert('Form submitted with passed validation');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<label>
Enter your phone number:
<input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
</label>
<div ng-if="submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Thanks!
You can use $submitted for the form,
Syntax: formname.$submitted
$submitted : True if user has submitted the form even if its invalid.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script>
var app = angular.module('myApp', ['ngMessages']);
app.controller('myCtrl', function($scope) {
$scope.submitForm = function() {
if (myForm.$valid) {
alert('Form submitted with passed validation');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" novalidate ng-submit="submitForm()">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<div ng-if="myForm.$submitted || myForm.myName.$dirty" ng-messages="myForm.myName.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<label>
Enter your phone number:
<input type="number" name="myPhone" ng-model="phone" ng-maxlength="20" required />
</label>
<div ng-if="myForm.$submitted || myForm.myPhone.$dirty" ng-messages="myForm.myPhone.$error" style="color:red" role="alert">
<div ng-message="required">You did not enter a field</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
<br>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Please run this snippet and check.
Here is the reference
The changed plunker link of yours
Update Plunker Link
You could go with disabling submit button till your form isn't correct one
Related
This question already has answers here:
validating multiple textbox having same name with jquery validator validates only first input
(4 answers)
.valid() only validates first input with jQuery Validation plugin
(1 answer)
Closed 4 years ago.
I've been struggling all day with a JQuery validate issue. Where it only validates the first field.
I've managed to reproduce it here:
$(document).ready(function() {
$('#go').click(function() {
console.log('go clicked');
if ($('#detailsForm').valid()) {
alert('if you see this then the form is valid.');
}
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#1.10.0" data-semver="1.10.0" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script data-require="jquery-validate#1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<script data-require="jquery-validate#1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>This doesn't work :(</h1>
<form id="detailsForm">
<div class="row guttered-bottom">
<div class="col-md-6 col-xs-12">
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
First Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<br />
Last Name<div style="color:#E320C9">*</div>
<div class="input-container">
<input id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
</div>
</div>
</div>
</div>
</div>
</form>
<br>
<button id="go">CLICK ME! </button>
</body>
</html>
Steps to reproduce: click the button and observe that the validation message comes up for the first field (first name). Enter a first name and click the button again. Notice that the form seems to validate even though both fields are required.
What am I doing wrong?
jQuery Validate needs each input to have a name attribute. Without this, it can't properly create the input objects it uses to store validation results.
Just add a unique name to each input and you should be good:
<input name="ReserveFirstName" id="ReserveFirstName" type="text" class="input-large input-wide" placeholder="Enter your first name" required="true" />
<input name="ReserveLastName" id="ReserveLastName" type="text" class="input-large input-wide" placeholder="Enter your last name" required="true" />
I gave a validation to test field by giving required to it as
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required focus value = "{{emailId}}">
</div>
</div>
and then i'm clicking submit button,but the validation is not working. I'm able to proceed to next page with out email.
Is there any other way to do the validation.
Can someone help me
Thanks
It should be like:
The validation not stop the submission automatically. In your submit function you need to check if the forum is valid.
Like this:
angular.module('app', []).
controller('ctrl', function($scope) {
$scope.submit = function() {
console.log('submitted');
}
});
.validation {
font-size: 80%;
color: red;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input type="text" name="txt" ng-model="txt" required /><br />
<!--<div class="validation" ng-show="myForm.$submitted && myForm.txt.$invalid">Please fill out the field</div>-->
<button ng-click="myForm.$valid && submit()">Submit</button><br />
Form is valid: {{myForm.$valid}}
</form>
</div>
I have couple of fields in my form & I want to enable submit button if anyone of them is filled, how I can do this? If I put required to both or anyone of them then it won't work as I want.
<input type="text" name="phone">
<span ng-show="form.addContactForm.phone.$touched && form.addContactForm.phone.$error.required">Phone number or email is required</span>
<input type="text" name="email">
<span ng-show="form.addContactForm.email.$touched && form.addContactForm.email.$error.required">Phone number or email is required</span>
<button type="submit" ng-disabled="form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
If phone or email is entered then other message should hide
You just add the conditions in
<input type="text" name="phone" ng-model="ctrl.phone">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<input type="text" name="email" ng-model="ctrl.email">
<span ng-show="(form.addContactForm.phone.$touched || form.addContactForm.email.$touched) && !ctrl.phone && !ctrl.email">Phone number or email is required</span>
<button type="submit" ng-disabled="(!ctrl.phone && !ctrl.email) || form.addContactForm.$invalid || form.addContactForm.$submitted">Submit</button>
Edit: Add error message and condition
Simplest solution, if this form is all you have: Use ng-required and make the condition in each field dependent on the other field. I even added a ng-disabled so that, if a field is filled-in, the other becomes disabled. I did not include the error messages for clarity - use the <span>s you already have.
<div ng-app="app" ng-controller="Ctrl as c">
<form name="contactForm">
<input ng-model="c.phone" type="text" name="phone"
ng-required="!c.email" ng-disabled="c.email" />
<input ng-model="c.email" type="text" name="email"
ng-required="!c.phone" ng-disabled="c.phone" />
<button ng-disabled="contactForm.$invalid">Submit</button>
</form>
</div>
Relevant fiddle: https://jsfiddle.net/k0L7c7jh/
If the model becomes larger, solutions like this (i.e. validation rules directly on the UI) do not scale well. For this I like model validations and to that end I created and I am using in my work egkyron, a JS validation framework that binds well with Angular (as well as with others).
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
</script>
</body>
</html>
why ngMessages alert appears only one time?
When I use (data-dismiss="alert" class="close") from the bootstrap options the alert is hide but then it never shows up again.
<body ng-app="ngMessagesExample">
<form name="myForm">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error">
<div role="alert" class="alert alert-danger alert-dismissible fade in">
<button aria-label="Close" data-dismiss="alert" class="close" type="button">
<span aria-hidden="true">when close never display again -> ×</span>
</button>
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</div>
</form>
</body>
codepen: http://codepen.io/mescal/pen/PZpWjd?editors=101
Thanks!
Try this:
<body ng-app="ngMessagesExample">
<form name="myForm">
<label>
Enter your name:
<input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="20" required />
</label>
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" ng-show="myForm.myName.$touched">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
</body>
What this will do is show/hide the error message when the user touches the field but does not necessarily make any changes to it. You do not need the button to remove the error message manually as it will be hidden automatically if the user input matches your conditions. You can replace $touched with $pristine or $dirty to trigger the error message based on whether user has not entered anything or has entered something in the field.
I'm creating a simple AngularJS app using ng-clip. This is my code:
<!doctype html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="src/ZeroClipboard.min.js"></script>
<script src="src/ngClip.js"></script>
</head>
<body>
<div ng-app="myapp">
<div class="container" ng-controller="myctrl">
<div class="page-header">
<h3>Simple Script</h3>
</div>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="" ng-model="name">
</div>
<div class="form-group">
<label>Gender</label>
<input type="radio" ng-model="gender" value="Male"> Male <input type="radio" ng-model="gender" value="Female"> Female
</div>
<div class="form-group">
<label>DOB</label>
<input type="text" class="form-control" placeholder="" ng-model="dob">
</div>
<p><strong>Preview</strong></p>
<p ng-model="final">Name: {{name}}<br/>
Gender: {{gender}}<br/>
DOB: {{dob}}</p>
<button class="btn btn-default" clip-copy="final">Copy!</button>
<br><br>
<textarea class="form-control" rows="3" placeholder="Test here"></textarea>
</form>
</div>
</div>
<script>
var myapp = angular.module('myapp', ["ngClipboard"]);
myapp.config(['ngClipProvider', function(ngClipProvider) {
ngClipProvider.setPath("src/ZeroClipboard.swf");
}]);
myapp.controller('myctrl', function ($scope) {
$scope.fallback = function(copy) {
window.prompt('Press cmd+c to copy the text below.', copy);
};
$scope.showMessage = function() {
console.log("clip-click works!");
};
});
</script>
</body >
</html>
Plunker Preview
Plunker Code
When I click on the "Copy!" button, I couldn't copy all text inside the final p element.
How to copy entire text inside the final p element into my clipboard?
It will definately not work as per doc ng-model cannot applied to paragraph("<p>") tag.
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.