送信時の AngularJS フォーム検証: 登録例

AngularJS でのフォーム検証

フォームの検証 AngularJS では、フォームに入力されたデータが正しく完全であるかどうかを確認するプロセスです。ユーザーがフォームを送信すると、詳細がサーバーに送信される前に、まず検証が行われます。検証プロセスにより、入力フィールドの詳細が正しい方法で入力されていることを可能な限り確実にします。

実際の例として、このサイトに完全にアクセスする前に登録フォームを完了する必要があるサイトを想定してみましょう。登録ページには、ユーザー名、パスワード、電子メール ID などの入力フィールドがあります。

たとえば、メールIDは常に次の形式である必要があります。 ユーザー名@サイト.ドメイン; 誰かが電子メール ID にユーザー名だけを入力した場合、理想的には検証は失敗するはずです。したがって、検証では、詳細がサーバーに送信されてさらに処理される前に、これらの基本的なチェックを実行します。

HTML5を使用したフォーム検証

フォーム検証は、ユーザーが Web フォームに入力した情報をサーバーに送信する前に事前検証するプロセスです。クライアント側自体で情報を検証することをお勧めします。これは、入力した情報が間違っていた場合にユーザーに再度フォームを表示する必要がある場合のオーバーヘッドが軽減されるためです。

HTML5 で AngularJS フォーム検証をどのように実行できるかを見てみましょう。

この例では、ユーザーにユーザー名、パスワード、電子メール ID、年齢などの詳細を入力する必要がある簡単な登録フォームを 1 つ表示します。

フォームには、ユーザーが情報を適切な方法で入力していることを確認するための検証コントロールが含まれます。

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

コードの説明

テキスト入力タイプでは、「required」属性を使用しています。これは、フォームが送信されるときにテキストボックスを空にすることはできず、テキストボックスに何らかのテキストが存在している必要があることを意味します。
次の入力タイプはパスワードです。入力タイプはパスワードとしてマークされているため、ユーザーがフィールドにテキストを入力すると、そのテキストはマスクされます。
入力タイプが電子メールとして指定されているため、ボックス内のテキストはパターンと一致する必要があります。 名前@サイト.ドメイン.
入力タイプが数字としてマークされている場合、ユーザーがキーボードまたはアルファベットを使用して文字を入力しようとしても、テキストボックスには入力されません。

コードが正常に実行された場合、送信時に AngularJS フォーム検証のコードをブラウザーで実行すると、次の出力が表示されます。

出力

フォーム検証の動作を確認するには、画面に情報を入力せずに「送信」ボタンをクリックします。

送信ボタンをクリックすると、フィールドに入力する必要がある検証エラーを示すポップアップが表示されます。

そのため、必須としてマークされたコントロールの検証では、ユーザーがテキストフィールドに値を入力しないとエラーメッセージが表示されます。

ユーザーがパスワードコントロールに値を入力すると、入力された文字をマスクするために「*」記号が使用されていることがわかります。

次に、間違ったメール ID を入力して送信ボタンをクリックします。送信ボタンをクリックすると、フィールドに @ 記号が必要であることを示す検証エラーを示すポップアップが表示されます。

したがって、電子メールコントロールとしてマークされたコントロールの検証では、ユーザーがテキストフィールドに適切な電子メール ID を入力しなかった場合にエラーメッセージが表示されます。

最後に、年齢テキストコントロールに文字を入力しようとすると、画面上に入力されません。コントロールに数値が入力された場合にのみ、コントロールに値が設定されます。

$dirty、$valid、$invalid、$pristine を使用したフォーム検証

AngularJS 検証のために追加のプロパティを提供します。AngularJSは検証の目的でコントロールに次のプロパティを提供します。

$ダーティ – ユーザーがコントロールを操作しました
$有効 – フィールドの内容は有効です
$無効 – フィールドの内容が無効です
$原始的な – ユーザーはまだコントロールを操作していません

以下は、Angular 検証を実行するために従う必要がある手順です。

ステップ1） フォームを宣言するときに no validate プロパティを使用します。このプロパティは、検証が AngularJS によって行われることを HTML5 に伝えます。

ステップ2） フォームに名前が定義されていることを確認してください。これを行う理由は、Angular 検証を実行するときにフォーム名が使用されるためです。

ステップ3） 各コントロールにも名前が定義されていることを確認してください。これを行う理由は、Angular 検証を実行するときにコントロール名が使用されるためです。

ステップ4） NG-ショーコントロールの $dirty、$invalid、$valid プロパティをチェックするディレクティブ。

上記の手順を組み込んだ例を見てみましょう。

この例では、

ユーザーがテキストボックスにトピック名を入力する必要がある単純なテキストフィールドを作成します。これが行われないと、検証エラーがトリガーされ、ユーザーにエラーメッセージが表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

コードの説明

フォームに「myForm」という名前を付けていることに注意してください。これは、AngularJS 検証のためにフォーム上のコントロールにアクセスするときに必要です。
HTML フォームで AngularJS が検証を実行できるようにするために、「novalidate」プロパティを使用します。
ng-show ディレクティブを使用して、「$dirty」および「$invalid」プロパティをチェックしています。つまり、テキストボックスが変更されている場合は、「$dirty」プロパティの値が true になります。また、テキストボックスの値が null の場合は、「$invalid」プロパティが true になります。したがって、両方のプロパティが true の場合、コントロールの検証は失敗します。したがって、両方の値が true の場合、ng-show も true になり、赤色の文字を含む span コントロールが表示されます。
ここでは、コントロールに値を入力する必要があることを指定したため、true と評価される「$error」プロパティをチェックしています。このような場合、テキストボックスにデータが入力されていない span コントロールには、「ユーザー名が必要です」というテキストが表示されます。
テキストボックスコントロールの値が無効な場合は、ユーザーがフォームを送信できないように送信ボタンも無効にします。コントロールの「$dirty」および「$invalid」プロパティの条件値に基づいてこれを実行するには、コントロールの「ng-disabled」プロパティを使用します。
コントローラーでは、テキストボックスの初期値をテキスト「AngularJS」に設定しています。これは、フォームが最初に表示されたときにテキストボックスにデフォルト値を設定するために行われます。テキストボックスフィールドの検証がどのように行われるかがよくわかります。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

フォームが最初に表示されると、テキストボックスに「AngularJS」の値が表示され、「送信ボタン」が有効になります。コントロールからテキストを削除するとすぐに、検証エラーメッセージが有効になり、「送信」ボタンが無効になります。

上のスクリーンショットには XNUMX つのことが表示されます

送信ボタンが無効になっています
トピックテキストボックスにトピック名がありません。そのため、「ユーザー名が必要です」というエラーメッセージが表示されます。

AngularJS Auto Validate を使用したフォーム検証

AngularJS には、検証用のカスタムコードを記述することなく、フォーム上のすべてのコントロールを自動的に検証する機能があります。これは、「jcs-AutoValidate」というカスタムモジュールを含めることによって実行できます。

このモジュールを配置すると、検証を実行したりエラーメッセージを表示したりするための特別なコードを配置する必要はありません。これはすべて、JCS-AutoValidate 内のコードによって処理されます。

これを実現する方法の簡単な例を見てみましょう。

この例では、

必須フィールドであるテキストボックスコントロールを備えた単純なフォームを作成します。このコントロールに入力されていない場合は、エラーメッセージが表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

コードの説明

まず、すべての自動検証機能を備えた「jcs-auto-validate.js」スクリプトを含める必要があります。
「div タグ」を含む各要素が「form-group」クラスに配置されていることを確認する必要があります。
また、入力コントロールなどの各要素 (入力コントロール、スパンコントロール、div コントロールなどの HTML 要素) も form-group クラスに配置されていることを確認する必要があります。
AngularJS JS モジュールに jcs-autovalidate を含めます。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

デフォルトでは、コードを実行すると、HTML コードに従って上記のフォームが表示されます。

フォームを送信しようとすると、「このフィールドは必須です」というエラーメッセージがポップアップ表示されます。これらはすべて JCS-AutoValidate オプションによって行われます。

Ladda ボタンによるユーザーフィードバック

「ladda」ボタンは、ボタンの上部に構築された特別なフレームワークです。 Javaスクリプトボタンが押されたときにボタンに視覚効果を与えます。

したがって、ボタンに「ladda」属性が与えられて押されると、スピン効果が表示されます。また、追加の視覚効果を提供するためにボタンに使用できるさまざまなデータスタイルもあります。

「ladda」ボタンの動作を確認する方法の例を見てみましょう。ここでは、送信ボタンのある単純なフォームを見ていきます。ボタンを押すと、ボタンにスピンエフェクトが表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

コードの説明

弊社では「」を使用しております。NG-送信」ディレクティブを使用して、「submit」という関数を呼び出します。この関数は、送信ボタンの ladda 属性を変更するために使用されます。
ladda 属性は、ladda フレームワークの特別な属性です。コントロールにスピン効果を追加するのはこの属性です。 ladda 属性の値を変数送信に設定しています。
データスタイルプロパティも、ladda フレームワークによって提供される追加属性であり、送信ボタンに異なる視覚効果を追加するだけです。
ladda フレームワークが機能するには、「AngularJS-ladda」モジュールを AngularJS.JS アプリケーションに追加する必要があります。
最初に、「submitting」という変数の値を定義して false に設定します。この値は、送信ボタンの ladda 属性に設定されます。最初にこれを false に設定することで、現時点では送信ボタンに ladda 効果を持たせたくないことを示しています。
送信ボタンが押されたときに呼び出される関数を宣言しています。この関数では、「送信」を true に設定しています。これにより、送信ボタンに ladda 効果が適用されます。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

フォームが最初に表示されるときは、送信ボタンがシンプルな形で表示されます。

送信ボタンが押されると、コントローラー内の送信変数が true に設定されます。この値は、送信ボタンの「ladda」属性に渡され、ボタンのスピン効果を引き起こします。

製品概要

テキストボックス HTML コントロールの検証は、「required」属性を使用して実行できます。
HTML5 では、パスワード、電子メール、番号などの新しいコントロールが追加され、独自の検証セットが提供されます。
AngularJS のフォーム検証は、フォームコントロールの $dirty、$valid、$invalid、$pristine の値を調べることによって処理されます。
AngularJS アプリケーションの自動検証は、JCS-auto validate モジュールを使用して実現することもできます。
Ladda ボタンを Angular.js アプリケーションに追加すると、ボタンが押されたときの視覚的な感触が少し向上します。

AngularJS でのフォーム検証

HTML5を使用したフォーム検証

コードの説明

出力

関連記事

$dirty、$valid、$invalid、$pristine を使用したフォーム検証

コードの説明

出力

AngularJS Auto Validate を使用したフォーム検証

コードの説明

出力

Ladda ボタンによるユーザー フィードバック

コードの説明

出力

製品概要

ニュースレターに登録する

Ladda ボタンによるユーザーフィードバック