Menu
My form is showing up as valid even though all of my input fields are blank. I have the required keyword in the input fields.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="/components/angular/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</head>
<body>
<main>
<div class="container">
<div class="row">
<section ng-controller="LogInController as loginCtrl">
<form name="signUpForm" action="/createuser" method="POST" novalidate>
<fieldset>
<div class="field input-field">
Email <br />
<input type="email" name="email" required />
</div>
<div class="field input-field">
Password <br />
<input type="password" name="password" required />
</div>
<div class="field input-field">
Confirm Password <br />
<input type="password" name="confirmation" required />
</div>
!! -- Form valid? {{signUpForm.$valid}} -- !!
<div class="actions">
<input type="submit" value="Sign Up" />
</div>
</fieldset>
</form>
</section>
</div>
</div>
</main>
</body>
</html>
Loading this in the browser results in !! -- Form valid? true -- !! I thought angular knows that the required tag makes a blank field invalid?
419
When the user changes the value in the watched field, the control is marked as "dirty" When the user blurs the form control element, the control is marked as "touched"
NgForm is used to create a top-level form group Instance, and it binds the form to the given form value. NgModule: Module used by NgForm is: FormsModule.
AngularJS adds CSS classes to forms and input fields depending on their states. The following classes are added to, or removed from, input fields: ng-untouched The field has not been touched yet. ng-touched The field has been touched.
You should place ng-model on each field to enable form on each field,
Unless you add ng-model & name with value your field will never considered as part of your form. And do change one thing create one parent variable such as form & add all the scope variables in it. like in controller do $scope.form = {}; & then on UI add all ng-model s to it like form.email, form.password & form.confirmation.
For more better form validation remove action & method attribute from a form & use ng-submit directive which will call one of controller method. & Do call post from that controller method by checking form is $valid or not.
Markup
<form name="signUpForm" ng-submit="submit(signUpForm, form)" novalidate>
<fieldset>
<div class="field input-field">
Email
<br />
<input type="email" name="email" ng-model="form.email" required />
</div>
<div class="field input-field">
Password
<br />
<input type="password" ng-model="form.password" name="password" required />
</div>
<div class="field input-field">
Confirm Password
<br />
<input type="password" ng-model="form.confirmation" name="confirmation" required />
</div>
!! -- Form valid? {{signUpForm.$valid}} -- !!
<div class="actions">
<input type="submit" value="Sign Up" />
</div>
</fieldset>
</form>
Controller
$scope.submit = function(form, formData) {
if (form.$valid) { //submit form if it is valid
$http.post('/url', {
data: formData
})
.success(function() {
//code here
})
.error(function() {
})
} else {
alert("Please fill all required fields")
}
}
Hope this has cleared your little concept about form, Thanks.
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
