Demonstrating backend form validations.

add-students.html

<!-- ko ifnot: $parent.addStudentsModalEditingMode -->
<!-- ko ifnot: $parent.addStudentsShowExistingUsernameScreen -->
<h2 data-bind="string: 'confirm.new.students'" class="pull-left"></h2>
<div class="pull-right">
    <button class="btn"
            data-bind="string: 'add.students.validate.edits', click: function () { $parent.addStudentsValidateNames(true); },
                       enable:  ($parent.addStudentsHasPotentialErrors() || $parent.addStudentsHasErrors()) && !$parent.addStudentsEditingFields() && !$parent.addStudentsCheckingUsernames()"></button>
    <button class="btn"
            data-bind="string: $parent.addStudentsDuplicateUsernames().length ? 'save.and.continue' : 'save.and.close', click: function () { $parent.addStudentsSaveAndClose(false); }, enable: $parent.addStudentsSaveAndCloseEnabled()"></button>
</div>
<div class="student-names-validation">
    <p data-bind="string: ($parent.addStudentsMode() == 'needUsername') ? 'add.students.mode.need.username.confirm.instruction' : 'add.students.mode.have.username.confirm.instruction'"></p>
    <table class="alternative-rows">
        <thead>
        <tr>
            <!-- ko if: !$parent.addStudentsCheckingUsernames() && $parent.addStudentsNames().any(function (i) { return i.errors.length }) -->
            <th></th>
            <!-- /ko -->
            <th data-bind="string: 'first.name'"></th>
            <th data-bind="string: 'last.name'"></th>
            <th data-bind="string: 'username'"></th>
            <th data-bind="string: 'password'"></th>
            <th data-bind="string: 'add.students.error'"></th>
            <th data-bind="string: 'remove'"></th>
        </tr>
        </thead>
        <!-- ko ifnot: $parent.addStudentsCheckingUsernames() -->
        <tbody data-bind="foreach: $parent.addStudentsNames">
        <tr data-bind="css: { even: $index() % 2 }">
            <!-- ko if: hasErrors -->
            <td>
                <!-- ko if: errors.length -->
                <i class="icon icon-exclamation-sign error"></i>
                <!-- /ko -->
            </td>
            <!-- /ko -->
            <td data-bind="css: { error: errorFields.any('firstName'), info: warningFields.any('firstName') && !errorFields.length }" class="serif break-word">
                <div class="position-relative">
                    <!-- ko if: firstNameEditable() -->
                    <input class="compact-input" type="text"
                           data-bind="value: firstName, event: { blur: function () { if (firstName().compact()) { firstNameEditable(false); editing(false); } } },
                                      element: { callback: function (element) { $(element).focus(); } }" />
                    <!-- /ko -->
                    <!-- ko ifnot: firstNameEditable() -->
                    <span data-bind="text: firstName() || $root.strings('add.students.validate.empty'), click: function () { firstNameEditable(true); editing(true); invalidate(); }" class="editable-text"></span>
                    <!-- /ko -->
                </div>
            </td>
            <td data-bind="css: { error: errorFields.any('lastName'), info: warningFields.any('lastName') && !errorFields.length }" class="serif break-word">
                <div class="position-relative">
                    <!-- ko if: lastNameEditable() -->
                    <input class="compact-input" type="text"
                           data-bind="value: lastName, event: { blur: function () { if (lastName().compact()) { lastNameEditable(false); editing(false); } } },
                                      element: { callback: function (element) { $(element).focus(); } }" />
                    <!-- /ko -->
                    <!-- ko ifnot: lastNameEditable() -->
                    <span data-bind="text: lastName() || $root.strings('add.students.validate.empty'), click: function () { lastNameEditable(true); editing(true); invalidate();  }" class="editable-text"></span>
                    <!-- /ko -->
                </div>
            </td>
            <td data-bind="css: { error: errorFields.any('username'), info: warningFields.any('username') && !errorFields.length }" class="serif break-word">
                <!-- ko if: mode == 'haveUsername' -->
                <div class="position-relative">
                    <!-- ko if: usernameEditable() -->
                    <input class="compact-input" type="text"
                           data-bind="value: username, event: { blur: function () { if (username().compact()) { usernameEditable(false); editing(false); } } },
                                      element: { callback: function (element) { $(element).focus(); } }" />
                    <!-- /ko -->
                    <!-- ko ifnot: usernameEditable() -->
                    <span data-bind="text: username() || $root.strings('add.students.validate.empty'), click: function () { usernameEditable(true); editing(true); invalidate(); }" class="editable-text"></span>
                    <!-- /ko -->
                </div>
                <!-- /ko -->
                <!-- ko if: mode == 'needUsername' -->
                <span data-bind="text: username"></span>
                <!-- /ko -->
            </td>
            <td data-bind="css: { error: errorFields.any('password'), info: warningFields.any('password') && !errorFields.length }"
                class="serif break-word">
                <div class="position-relative">
                    <!-- ko if: passwordEditable() -->
                    <input class="compact-input" type="text"
                           data-bind="value: password, event: { blur: function () { if (password().compact()) { passwordEditable(false); editing(false); } } },
                                      element: { callback: function (element) { $(element).focus(); } }" />
                    <!-- /ko -->
                    <!-- ko ifnot: passwordEditable() -->
                    <span data-bind="text: password(), click: function () { passwordEditable(true); editing(true); invalidate(); }" class="editable-text"></span>
                    <!-- /ko -->
                </div>
            </td>
            <td>
                <!-- ko if: $data.errors && $data.errors.length -->
                <span data-bind="text: errors[0]" class="error"></span>
                <!-- /ko -->
                <!-- ko if:(!$data.errors || !$data.errors.length) && $data.warnings && $data.warnings.length -->
                <span data-bind="text: warnings[0]" class="info"></span>
                <!-- /ko -->
            </td>
            <td class="text-center">
                <a data-bind="click: function () { remove(); }" href="#">
                    <i class="icon-remove deactivate-icon"></i>
                </a>
            </td>
        </tr>
        </tbody>
        <!-- /ko -->
    </table>
    <!-- ko if: $parent.addStudentsCheckingUsernames()-->
    <div class="spinner-container text-center top-margin">
        <div class="icon icon-spinner icon-spin icon-large"></div>
    </div>
    <!-- /ko -->
</div>
<!-- ko ifnot: $parent.addingStudents() -->
<div class="clearfix">
    <a data-bind="click: function () { $parent.addStudentsEditNames(); $parent.addStudentsUpdateRawInput(); }" class="pull-left nav-link" href="#">
        <i class="icon-circle-arrow-left icon-large"></i>&nbsp;<span data-bind="string: 'navigation.back'"></span>
    </a>
</div>
<!-- /ko -->
<!-- /ko -->