2

Validate.Jsを使用して、jQuery を使用して HTML フォームを検証します。完全に機能します。ただし、各フィールドの横にエラーを表示する必要があります。代わりに、ページの上部にすべてのエラーの概要が表示されます。

HTML:

<div class="success_box">All of the fields were successfully validated!</div>
<div class="error_box"></div>

    <form name="example_form">
    <label for="req">Required field:</label>
    <label for="alphanumeric">Alphanumeric field:</label>
    <div id="AlphaNumeric"></div>

    <input name="req" id="req" />
    <input name="alphanumeric" id="alphanumeric" />

    <label for="password">Password:</label>
    <label for="password_confirm">Password Confirmation (match password):</label>

    <input name="password" id="password" type="password" />
    <input name="password_confirm" id="password_confirm" type="password" />

    <label for="email">Email:</label>
    <label for="minlength">Min length field (min. 8 chars):</label>

    <input name="email" id="email" />
    <input name="minlength" id="minlength" />

    <label for="tos_checkbox">Required checkbox (example: Terms of Service)</label>
    <input name="tos_checkbox" id="tos_checkbox" type="checkbox" />

    <button class="button gray" type="submit" name="submit">Submit</button>
</form>

JavaScript:

    new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
    }, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
    }, {
    name: 'password',
    rules: 'required'
    }, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
    }, {
    name: 'email',
    rules: 'valid_email'
    }, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
    }, {
    name: 'tos_checkbox',
    display: 'terms of service',
    rules: 'required'
    }], function(errors, event) {
    var SELECTOR_ERRORS = $('.error_box'),
        SELECTOR_SUCCESS = $('.success_box');

    if (errors.length > 0) {
        SELECTOR_ERRORS.empty();

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            SELECTOR_ERRORS.append(errors[i].message + '<br />');
        }

        SELECTOR_SUCCESS.css({ display: 'none' });
        SELECTOR_ERRORS.fadeIn(200);
    } else {
        SELECTOR_ERRORS.css({ display: 'none' });
        SELECTOR_SUCCESS.fadeIn(200);
    }

    if (event && event.preventDefault) {
        event.preventDefault();
    } else if (event) {
        event.returnValue = false;
    }
    });

表示スタイルを変更する方法はありますか? そして、これを行うことができるより良いスクリプトはありますか?

4

1 に答える 1

1

引用: 「しかし、各フィールドの横にエラーを表示する必要があります。代わりに、ページの上部にすべてのエラーの概要が表示されます。 ... ... 表示スタイルを変更する方法はありますか?」

いいえ。 ドキュメントによると、エラー メッセージの配置方法に関するオプションはリストされていません。

プラグインの説明には「CodeIgniter フォーム検証 API からモデル化された」と書かれているため、CodeIgniter 検証と同様に、フォームの上の単一の要約ボックスにエラー メッセージを表示することが重要であることがわかります。各フィールドの横に個々のエラー メッセージが必要な場合は、間違ったプラグインを選択しただけです。

引用：「...そして、これを行うことができるより良いスクリプトはありますか?」

はい。jQuery Validate プラグインは、jQuery チームの誰かによって開発されました。巨大なサポート基盤と多数のオプションがあります。

「プラグインは、jQuery チームのメンバーであり、jQuery UI チームの主任開発者であり、QUnit のメンテナーである Jörn Zaefferer によって作成および保守されています。2006 年の jQuery の初期に開始され、それ以来更新および改善されています。 "

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://docs.jquery.com/Plugins/Validation/

デフォルトでは、エラーは各フィールドの「横」に表示されます。

デモを参照してください: http://jsfiddle.net/UGyXP/

jQuery:

$(document).ready(function() {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                minlength: 5
            },
            field2: {
                required: true,
                email: true
            }
        }
    });

});

HTML:

<form id="myform">  
     <input type="text" name="field1" />
     <input type="text" name="field2" />
     <input type="submit" />
</form>
于 2013-02-03T16:45:38.620 に答える