0

セマンティック UI 検証と Angular JS (パーシャルを使用) を使用してフォームを検証しようとしていますが、成功していません。

構造は次のとおりです。

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 &#124; ' + 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>

スクリプト宣言の最後の行に注意してください。

<script src="js/ui.js"></script>

このスクリプトでは、部分的なフォームの一部のデータを検証します。

ui.js

(function ($) {
    'use strict';
    $('.ui.form')
        .form({
            email: {
                identifier: 'email',
                rules: [
                    {
                        type: 'empty',
                        prompt: 'Email cannot be blank.'
                    }
                ]
            }
        }, {
            on: 'blur',
            inline: 'true'
        });
}(jQuery));

「識別子」属性は、フォームの入力からの id 属性を参照します。

add-user.html (部分)

<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>

この場合、「メール」入力のみを検証しています。

理論的には、これにより、送信ボタンを押した瞬間にフォームが検証されます (セマンティック UI マジック)。そのため、送信を押すと、空白の電子メール入力が赤く表示される必要があります。無効な入力を指しています。

問題は、ページ全体がレンダリングされる前に ui.js が実行されることです。これにより、.ui.form クラスが見つかりません。そして、魔法は起こりません。これは、パーシャル レンダリングに関するもの、またはそのようなものです。

誰かが私を助けることができますか？そして、私の英語をお詫び申し上げます。それは私の母国語ではありません。:)

4

0 に答える 0