2

フロントエンドに表示されるワードプレスのプラグインでフォームを作成しています。JQuery検証方法を使用すると、各エラーを各フィールドの下に正確に配置するのに問題があります。

だから、これは私のスクリプトです：

function validate_init() { ?>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('#form_register').validate({
            rules: {
                ragsoc: {
                    required: true,
                    minlength: 2
                },

                piva: {
                    required: true,
                    digits: true,
                },

                gruppo: {
                    required: true,
                },
            },

            messages: {
                ragsoc: "Inserire la ragione sociale.",
                piva: "Solo numeri accettati.",
                gruppo: "inserire un valore.",
            },
            errorElement: "div",
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
        });
    });
</script>
    <?php }
    add_action('wp_footer', 'validate_init', 999);

これが私のフォームです：

<?php echo '<form id="form_register" method="post" action="'.$pluginfolder.'/submit.php">'; ?>
  <table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td colspan="3"><label for="ragsoc">Ragione sociale *</label>
      <input type="text" name="ragsoc" id="long" /></td>
    </tr>
    <tr>
      <td><label for="piva">Partita Iva *</label>
      <input type="text" name="piva" id="tris" /></td>
      <td><label for="codfisc">Codice Fiscale</label>
      <input type="text" name="codfisc" id="tris" /></td>
      <td><label for="gruppo">Gruppo</label>
      <input type="text" name="gruppo" id="tris" /></td>
    </tr>
    <tr>
        <td>
            <label for="codice">Codice</label>
            <input type="text" name="codice" id="tris" />
        </td>
        <td>
            <label for="insegna">Insegna *</label>
            <select id="tris" name="insegna">
                <option value=""><em>Scegli...</em></option>
                <option value="option_1">option_1</option>
                <option value="option_2">option_2</option>
            </select>
        </td>
        <td>
            <label for="rapporto">Rapporto *</label>
            <select id="tris" name="rapporto">
                <option value=""><em>Scegli...</em></option>
                <option value="option_1">option_1</option>
                <option value="option_2">option_2</option>
                <option value="option_3">option_3</option>                
            </select>
        </td>
    </tr>
    <tr>
      <td colspan="2"><input type="submit" name="button" id="button" value="Invia" />
      <input type="reset" name="button2" id="button2" value="Cancella" />
    </tr>
  </table>
  </form>

最後に、これは私のcssです：

div.error{
color: #f33;
padding: 0;
margin: 2px 0 0 0;
font-size: 0.7em;
padding-left: 18px;
background-image: url('error.png');
background-position: 0 0;
background-repeat: no-repeat; }

すべて正常に動作していますが、次の画像のようにエラーが重なっている 3 つの列フィールドのエラー メッセージの位置が正しくありません。

http://i.stack.imgur.com/HzshN.jpg

この効果を得るにはどうすればよいですか (Photoshop で変更):

http://i.stack.imgur.com/Q3MiU.jpg

前もって感謝します。

4

2 に答える 2

4

エラー配置コードに問題はありません。問題の大部分は、無効な HTML とルールの欠落が原因でした。(私はレイアウトに atableを使用しませんform... そのようなレイアウトを行うためのより良い、より現代的な方法があります。 )

根本原因:

1)id="tris"無効な HTML であり、コードを壊す複数の要素を 繰り返しました。が重複する要素idは無視されます。class代わりに使用してください。

2) これら 4 つの追加フィールドのルールを定義できませんでした。もちろん、エラーはどこにも表示されません。

修正することをお勧めします:

3) 末尾のコンマをすべて削除します。これは古いバージョンの Internet Explorer のコードを壊すだけですが、末尾のコンマを残すのはずさんなコーディング方法です。

4)の最後に最後の</td>タグがあり ませんでした。<tr></tr>table

5)が唯一のコードであるerrorPlacement場合、カスタム コールバック関数 を指定する必要はありません。error.insertAfter(element)これはプラグインのデフォルト コードにすぎないため、errorPlacementプラグイン オプションから削除してもかまいません。

実際のデモ: http://jsfiddle.net/9bRXd/

jQuery(document).ready(function ($) {

    $('#form_register').validate({
        rules: {
            ragsoc: {
                required: true,
                minlength: 2
            },
            piva: {
                required: true,
                digits: true
            },
            codfisc: {
                required: true
            },
            gruppo: {
                required: true
            },
            insegna: {
                required: true
            },
            rapporto: {
                required: true
            }
        },
        errorElement: "div",
        messages: {
            ragsoc: "Inserire la ragione sociale.",
            piva: "Solo numeri accettati.",
            gruppo: "inserire un valore."
        }
    });

});
于 2013-02-26T22:25:23.610 に答える
1

jsFiddle に例を投稿すると理解しやすくなりますが、コードを見るだけでこれをお勧めします。

errorPlacement: function(error, element) 
                {
                  error.insertAfter(element);

                  // Use jQuery UI's position function to get placement correct
                  error.position ( {
                                     my: 'left top',
                                     at: 'left bottom',
                                     of: element
                                   } );
                }

これは、jQuery UI と jQuery Validation プラグインがあることを前提としています。エラーの CSS をいじって、思いどおりに見えるようにする必要がある場合があります。

位置の API は次のとおりです: http://api.jqueryui.com/position/

于 2013-02-26T19:07:39.223 に答える