I'm trying to validate a form using Semantic UI validations and Angular JS (using partials), but I'm not getting any success.
The structure follows:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title ng-bind="'Users | ' + title">Users</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/semantic.min.css"/>
</head>
<body>
<div ng-view></div>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/semantic.min.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/ui.js"></script>
</body>
</html>
Take note in the last line of script declarations.
<script src="js/ui.js"></script>
In this script I validate some data of a form that is in a partial.
ui.js
(function ($) {
'use strict';
$('.ui.form')
.form({
email: {
identifier: 'email',
rules: [
{
type: 'empty',
prompt: 'Email cannot be blank.'
}
]
}
}, {
on: 'blur',
inline: 'true'
});
}(jQuery));
The 'identifier' attributes references the id attributes from the inputs of my form.
add-user.html (the partial)
<div class="container">
<h2 class="ui header">Add new user</h2>
<div class="ui form segment">
<div class="field">
<label for="userid">ID</label>
<div class="ui left labeled input">
<input type="text" id="userid" disabled="true" placeholder="User ID" ng-model="user.userid" />
</div>
</div>
<div class="field">
<label for="email">Email</label>
<div class="ui left labeled icon input">
<input type="email" id="email" placeholder="Email" ng-model="user.email" />
<i class="mail icon"></i>
<div class="ui corner label">
<i class="icon asterisk"></i>
</div>
</div>
</div>
<button class="ui blue submit button">Submit</button>
</div>
<br>
<a href="#/users">Back to home</a> |
<a href="#/users/new">New</a>
</div>
In this case I'm validating the 'email' input, only.
Theoretically, this will make the form to be validated in the moment when I push the Submit button (Semantic UI magic). So, when I push the submit, the blank e-mail input must be colored in red. Pointing the input that is invalid.
The problem is that the ui.js is executed before the entire page is rendered. This makes the .ui.form class to be not found. And then, the magic doesn't happens. This can be something with the partials rendering, or something like that.
Can someone help me? And apologize my english. It's not my native lang. :)
