I find this example step-by-step form with bootstrap and angularjs
How can I validate the email before jump to step 2 ?? or block the step jump until the fields are full??
function RegisterCtrl($scope, $location) {
$scope.steps = [
'Step 1: Team Info',
'Step 2: Campaign Info',
'Step 3: Campaign Media'
];
....some code
First, define your model in your controller:
function RegisterCtrl($scope, $location) {
$scope.step1 = {
name: '',
email: '',
password: '',
passwordc: ''
};
//...
Bind it to your form fields:
<input type="text" id="inputEmail" ng-model="step1.email" placeholder="Email">
Next, do your validation inside gotoStep():
$scope.goToStep = function(index) {
if (!$scope.step1.email.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
return window.alert('Please specify a valid email');
}
//...
Obviously alert is not great so use jQuery to focus() and add the Bootstrap classes (control-group warning) to highlight the field.
You should use directives to test your form field vadility, e.g:
app.directive('email', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (viewValue && viewValue.match(/[a-z0-9\-_]+@[a-z0-9\-_]+\.[a-z0-9\-_]{2,}/)) {
// it is valid
ctrl.$setValidity('email', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('email', false);
return undefined;
}
});
}
};
});
In your html, you need to add the directive to your input field. You can show error messages if a field is not valid using the myForm.email.$error object:
<input type="text" name="email" id="inputEmail" placeholder="Email" ng-model="email" email required>
<span ng-show="myForm.email.$error.email" class="help-inline">Email invalid</span>
<span ng-show="myForm.email.$error.required" class="help-inline">Email required</span>
You can disable the next link until the form is valid by using myForm.$invalid on ng-class:
<li ng-class="{disabled: myForm.$invalid}" >
<a ng-model="next" ng-click="incrementStep(myForm)">Next Step →</a>
</li>
See example.
