0

Webページに検証メッセージを表示するのに苦労しています。クライアント側の検証を行い、無効な値でフィールドを強調表示するjavascript関数があります。フィールドを強調表示するだけでなく、方法がわからないメッセージをWebページに表示したいと思います。

これが私のjavascript関数です：

$(function () {

    $("#Save").click(Validate);

});

function Validate() {

var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();    

var requiredFields = { '#Code' : Code,
                         '#Description' : Description,
                         '#Status ' : Status };

    $.each(requiredFields, function (key, value) {
        if (value.length == 0) {
            invalidValues.push(key);
        }
        else { validValues.push(key); }
    });

        var invalidFields = invalidValues.toString();
        var validFields = validValues.toString();

    if (invalidValues.length > 0){
        $(invalidFields).addClass("highlighted");
        $(validFields).removeClass("highlighted");      
        return false;
    }
    $(validFields).removeClass("highlighted");
}

これが私のウェブページです：

<div>
    <table>
    <tr>
        <th>
            Code
        </th>
        <td>
           <input maxlength="4" id="Code" type="text"/>
        </td>
    </tr>
        <tr>
        <th>
            Description
        </th>
        <td>
            <input id="Description" type="text"/>
        </td>
    </tr>
        <tr>
        <th>
            Status
        </th>
        <td>
            <input id="Status" type="text"/>
        </td>
    </tr>    
    <tr>  
        <th>
    </th>      
        <td>
            <button id="Save" type="button">Save</button>
        </td>        
    </tr>
    </table>
</div>

ウェブページの下部に「次のコードに有効な値を入力してください」というメッセージを表示したいと思います。js関数「Validate」の変数「invalidValues」に無効な値を保存します。Webページでこれらの値にアクセスするにはどうすればよいですか？

また、検証を行うための最良の方法についていくつか質問がありますか？クライアント側とサーバー側？また、ポップアップ検証メッセージまたは強調表示されたメッセージをWebページに埋め込んで表示する方がよいでしょうか。

4

4 に答える 4

1

私はMVCに精通していないため、MVCに最初からあると仮定して、組み込みの検証（昔ながらのASP.Netのように）の使用方法について答えることができません。

その小さな免責事項は、以下のコードで必須フィールドのフォームを検証し、ユーザーのページにメッセージをスローする必要があります。

$(function () {
    var Validate = function Validate(e) {
        var allFieldsValid = false, // boolean flag to cache result
            invalidFields = [],     // array for selectors
            validFields = [],       // array for selectors
            requiredFields = [      // array of selectors to validate against
                "#Code",
                "#Description",
                "#Status"
            ],
            message = $('<span />').addClass('validation-message').text('* This is a required field.');
        $(requiredFields.join(', ')).each(function (i, elem) {
            //requiredFields.join(', ') should return "#Code, #Description, #Status"
            var field = $(elem)
                value = field.val();
            if (value.length === 0) {
                invalidFields.push(field.selector);
            } else {
                validFields.push(field.selector);
            }
        });
        allFieldsValid = invalidFields.length === 0;            // if there are no invalid fields, all fields must be valid
        $('span.validation-message').remove();                  // remove any previous validation messages
        $(validFields.join(', ')).removeClass("highlighted");   // remove class from all valid fields
        // add class to all invalid fields and append message
        $(invalidFields.join(', ')).addClass("highlighted").append(message.clone());
        if (!allFieldsValid) {
            e.preventDefault(); // invalid fields, prevent event from bubbling
        }
        return allFieldsValid;  // return result
    };
    $("#Save").click(Validate);
});

検証に関する他の質問に関しては：

  1. 検証を行うための最良の方法は何ですか？クライアント側とサーバー側？
  2. また、ポップアップ検証メッセージまたは強調表示されたメッセージをWebページに埋め込んで表示する方がよいでしょうか。

順番に：

  1. 対はありません。サーバー側、またはクライアント側とサーバー側の両方があります。これは、JavaScriptを有効にするためにユーザーに依存することはできず、したがって、クライアント側に依存して実行することはできないためです。クライアント側をプレフィルターのように考えてください。クライアント側の目的は、「事前チェック」を実行し、不要なデータが帯域幅を使い果たして（サーバーへの送信と「不良データ」応答）、サーバーで処理サイクルを使用しないようにすることです。クライアント側もサーバー側よりも応答性が高くなりますが（要求/応答がないため）、これは実際には、高遅延接続で認識されるパフォーマンスの問題にすぎません。サーバー側は常に実行されるため、検証は常にサーバーで開始する必要があります。

  2. これはユーザーの好みの問題です。個人的には、誰かが私にそうするように非常にうまく依頼しない限り、ポップアップをコーディングしません。これは主に、フォームからフォーカスが外れ、閉じるために余分な作業（通常はワンクリック）が必要になるためです。強調表示されたメッセージは、これらのいずれかを実行する必要はありません。一部の検証ルーチンは、最初の無効なフィールドに焦点を合わせるのに十分です。ページにそのためのスペースがある場合は、各フィールドの横にあるメッセージが便利で、非常に見栄えがします。ただし、ページ上のスペースが限られている場合、ほとんどの検証ルーチンはフィールドの横にアスタリスクを付け、ページ上の1つの場所にすべての個別の検証メッセージを表示します。

于 2013-01-10T19:40:08.707 に答える
1

HTMLにエラーメッセージのプレースホルダーを追加するだけです。例えば：

    <td>
        <input id="Description" type="text"/><span id="descriptionErrorPlaceholder" />
    </td>

次に、JavaScriptで、jQueryまたは通常のJavaScriptを使用して警告メッセージを追加します。

$("#descriptionErrorPlaceholder").text("Warning message");
于 2013-01-10T18:55:20.820 に答える
1

テーブルの後で、何も書かれていなくてもdivを保持できます。しかし、IDを使用します。

そして、検証した後、document.get（'div_id'）でそのdivにアクセスし、それに値を割り当てます。

これを使用すると、赤などの色で検証を表示することもできます。そして、このように表示することは、ポップアップよりも優れています。これは、ソフトウェアが登場したときに、クリックの数を最小限に抑える必要があるためです。

于 2013-01-10T18:59:38.047 に答える
1

すでにjQueryを使用している場合は、新しいプロジェクトを開始するたびにMicrosoft MVCアプリケーションに標準で付属しているため、jQueryValidationプラグインのユーザーの承認を得ることができる場合があります。そうは言っても、私はさまざまな政府のクライアントをサポートしているので、プラグインを承認するのがどれほど難しいかを認識しています。各入力要素にタグを追加し、そのスパンのクラスを変更して、入力ボックスを強調表示するときにすでに行っているのと同じように、表示および非表示にできるように見えます。

作業用マシンでこれをテストすることはできませんが、次のようになります。

$(function () {

    $("#Save").click(Validate);

});

function Validate() {

var invalidValues = [];
var validValues = [];
var Code = $("#Code").val();
var Description = $("#Description").val();
var Status = $("#Status ").val();    

var requiredFields = { '#Code' : Code,
                         '#Description' : Description,
                         '#Status ' : Status };

    $.each(requiredFields, function (key, value) {
        if (value.length == 0) {
            invalidValues.push(key);
        }
        else { validValues.push(key); }
    });

        var invalidFields = invalidValues.toString();
        var validFields = validValues.toString();

    if (invalidValues.length > 0){
        $(invalidFields).addClass("highlighted");
        $(validFields).removeClass("highlighted");  

        $(invalidFields + "Validator").addClass("showValidation");
        $(invalidFields + "Validator").removeClass("hideValidation");
        return false;
    }
    $(validFields).removeClass("highlighted");
    $(validFields + "Validator").removeClass("showValidation");
    $(invalidFields + "Validator").addClass("hideValidation");
}

HTMLで

<div>
    <table>
    <tr>
        <th>
            Code
        </th>
        <td>
           <input maxlength="4" id="Code" type="text"/><span id="CodeValidator" class="hideValidation" />
        </td>
    </tr>
        <tr>
        <th>
            Description
        </th>
        <td>
            <input id="Description" type="text"/><span id="DescriptionValidator" class="hideValidation" />
        </td>
    </tr>
        <tr>
        <th>
            Status
        </th>
        <td>
            <input id="Status" type="text"/><span id="StatusValidator" class="hideValidation" />
        </td>
    </tr>    
    <tr>  
        <th>
    </th>      
        <td>
            <button id="Save" type="button">Save</button>
        </td>        
    </tr>
    </table>
</div>
于 2013-01-10T19:16:13.023 に答える