I am using anuglar.js form validation.
I want to check validation without form submit button.
This is my html.
<form name="userForm">
<input type="hidden" ng-model="StandardID" />
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
<button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My controller js is.
$scope.update= function () {
alert($scope.userForm.Name.$valid);
if ($scope.userForm.Name.$valid) {
alert("Entry added");
}
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
To do it, the key is use the name attribute in your <form> and in all of your inputs.
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid
For example:
<form name="myForm" novalidate>
<label>My Input:</label>
<input type="text" name="myInput" ng-model="myInput" required>
<span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>
Check angular docs
HTML
<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>
<input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
<span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
<span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
</div>
<button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button>
</form>
</div>
directive
.directive('ngModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
elem.on('blur', function() {
ngModel.$dirty = true;
scope.$apply();
});
ngModel.$viewChangeListeners.push(function() {
ngModel.$dirty = false;
});
scope.$on('$destroy', function() {
elem.off('blur');
});
}
}
});
Related
I have some fields inside a form tag and submit button outside a form tag. If any of the fields inside a form is empty my form should not be submitted. For this I used the required attribute but it was not working since submit button was outside of the <form> and also used novalidate attribute. Nothing seems to work.
Below is my code:
<section id="profile" class="content-header">
<div class="thumbnail">
<button type="submit" class="btn btn-block btn-success" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
</div>
<div class="row">
<form name="profileForm" role="form">
<div class="form-group col-md-6">
<label for="firstName"> First Name </label>
<input type="text" class="form-control" id="firstName" ng- model="profileDetails.firstName" ng-disabled="viewProfile" required/>
</div>
<div class="form-group col-md-6" ng-if="userDetails.role==0">
<label for="firstName"> Middle Name </label>
<input type="text" class="form-control" id="middleName" ng- model="profileDetails.middleName" ng-disabled="viewProfile" />
</div>
</form>
</div>
</section>
like FirstName and MiddleName there are many other fields without filling any of those fields my form should not be submitted, can anyone suggest me the best approach for this. My angularController is:
(function() {
function profileController($scope, profileFactory, $loading) {
$scope.updateProfile = function() {
$loading.start("main");
profileFactory
.updateProfile($scope.profileDetails)
.then(function(response) {
var updatedUserDetails = response.user;
if (updatedUserDetails.imagePath !== null) {
$scope.profileDetails.imagePath = updatedUserDetails.imagePath;
$scope.profileDetails.profieImageBytes = updatedUserDetails.profieImageBytes;
}
angular.extend($scope.userDetails, $scope.profileDetails);
$scope.editProfile();
})
.catch(function() {
$loading.finish("main");
});
};
$loading.finish("main");
}
profileController.$inject = ["$scope", "profileFactory", "$loading"];
angular
.module("vResume.profile")
.controller("profileController", profileController);
})();
You typically use the .$invalid field on the form with ng-disabled for this.
<button type="submit" class="btn btn-block btn-success" ng-disabled="profileForm.$invalid" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
See the angularjs docs.
required attribute doesn't work on my form. What am I doing wrong?
Here is my code in HTML:
<form id="main-contact-form" method="POST">
<fieldset class="form-group">
<input id="name" placeholder="Nome" class="form-control" type="text" tabindex="1" required /></fieldset>
<fieldset class="form-group">
<input id="email" placeholder="E-mail" class="form-control" type="email" tabindex="2" required /></fieldset>
<fieldset class="form-group">
<input id="phone" placeholder="Numero di telefono" class="form-control" type="tel" tabindex="3" required /></fieldset>
<fieldset class="form-group">
<textarea id="message" class="form-control" rows="8" placeholder="Scrivi un messaggio.." tabindex="5" required /></textarea></fieldset>
<fieldset>
<button name="submit" class="btn btn-primary" id="submitBtn">Invia Messaggio</button>
</fieldset>
</form>
<div id="feedback"></div>
Here is the php code in the head tag:
<script>
$(document).ready(function(){
$( "#submitBtn" ).click(function( event ) {
//values
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var phone=document.getElementById('phone').value;
var message=document.getElementById('message').value;
var dataString = {"name": name, "email":email, "phone": phone, "message":message}
$.ajax({
type:"post",
url:"submitForm.php",
data: dataString,
success: function(html) {
$('#feedback').html(html);
}
});
event.preventDefault();
});
});
</script>
I have simple html form on my site:
<form action="mailer.php" method="post">
<fieldset>
<div class="column-50">
<div>
<label for="name">Name <span>*</span></label>
<input type="text" id="name" name="name" required>
<span class="mf-error-message">Error! </span>
</div>
<div>
<label for="email">Email <span>*</span></label>
<input type="text" id="email" name="email" required>
<span class="mf-error-message">Error! </span>
</div>
.... // some more fields
<input type="submit" id="submit" name="submit" value="Enter your Information">
</form>
The problem is that on iOS devices ( phone, tablet .. ) form it can be submitted without user to populate required fields.
Why is that? Is there a way to fix it on client side?
This should work. But it will be for all not only for iOS
<form action="mailer.php" method="post" id="myForm">
Then this
var form = document.getElementById('myForm');
form.noValidate = true;
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert('Error! You must fill all required fields.');
}
}, false);
As we have number of input fields and there are some fields as required example:
<input placeholder="Role" type="text" required/>
<span ng-show="Role" class="text-danger">Role is required.</span>
<input placeholder="Title" type="text" required/>
etc..
<button type="button" ngclick="Savereferences()">Save</button>
Now i want to validate this fields on click of Save button in angular js, Can any one help me out how to do this.
<input placeholder="Role" ng-model="Role" type="text" required/>
<span ng-show="RoleMsg" class="text-danger">Role is required.</span>
<input placeholder="Title" ng-model="Title" type="text" required/>
etc..
<button type="button" ngclick="Savereferences()">Save</button>
JS Code for validating Role
$scope.Savereferences=function(){
if($scope.Role){
$scope.RoleMsg=true;
}
}
You can do like this...using ng-required and form
<form role="form" id="form" name="form" class="form-horizontal">
<input placeholder="Role" id="role" name="role" type="text" ng-required="true"/>
<span ng-show="form.role.$error.required">Role is required.</span>
//Same as other field
<button type="button" ng-disabled="!form.$valid" ngclick="Savereferences()">Save</button>
</form>
I am using AngularJs and have inputs with predefined value from ng-repeat. I want resend those data value via ng-click function to treat data.
The problem the data is not submitted
<label>Price</label>
<input type="text" class="form-group form-control" ng-value=s.prix required="required" ng-model="prix" >
</div>
<div class="modal-footer">
<button type="submit" id='submit' ng-click="edit()" class="btn btn-primary" data-dismiss="modal">Save</button>
s.prix is a value of column in the table prix (ng-repeat="s in produit") if you know what i mean.
Use ng-repeat instead as model
Like this
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
Then pass object in edit.
Try like this
ng-click="edit(s)"
JS
$scope.edit=function(s){
console.log(s);
}
html:
<body ng-controller="myCtrl">
<label>Price</label>
<div ng-repeat="s in produit">
<input type="text" class="form-group form-control" required="required" ng-model="s.prix" >
<button type="submit" id='submit' ng-click="edit(s)" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</body>
controller:
myApp.controller('produitCtrl', ['$scope',function($scope){
$scope.produit = [{prix:'hello'}];
$scope.edit=function(s){
console.log(s);
}
}]);