1

私はここにあるデモjquery検証プラグインを達成しようとしています。しかし、私が解決したいのは、ページの読み込み後に[送信]をクリックすると、プラグインに十字記号付きの検証メッセージが表示されることです。また、何かを入力すると、メッセージがチェックマーク画像に変わります。ただし、テキストを再度削除すると、検証メッセージが表示されますが、クロスイメージではなくチェックマークが表示されます。私のウェブサイトでこれを修正したい：

クライアント側の検証にjquery.validateを使用しています。検証のメッセージとともに右と十字のアイコンを表示するために、私はicomoonsアイコンセット（cssアプローチ）を使用しています。以下にHTMLとJSスクリプトを追加しました。エラー配置を使用してデフォルトのコンテナを変更しようとしましたが、テキストボックスに何かを入力してから再度削除しても、アイコンを十字から右に変更しても変更されません。メッセージは表示されますが、アイコンは変わりません。

また、jquery.validateを記述して、ここで行っているアイコンアプローチを実現するためのより効率的な方法を学びたいと思います。

ここのHTMLセクション：

 <!-- First step - form section starts here -->
         <form class="form-horizontal" id="sampleForm">
            <div class="control-group">
              <label class="control-label" for="firstName">First Name:</label>
              <div class="controls">
                <input type="text" id="firstName" name="firstName" placeholder="Peter">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <label class="control-label" for="lastName">Last Name:</label>
              <div class="controls">
                <input type="text" id="lastName" name="lastName" placeholder="Parker">
                <div class="errormsgwrapper">
                 <span data-icon="&#xe000;" class="right hidden" aria-hidden="true"></span>
                 <span data-icon="&#xe003;" class="wrong hidden" aria-hidden="true"></span>
                 <div class="errormessage"></div>
                 </div> 
              </div>
            </div>
            <div class="control-group">
              <div class="controls pull-right">
                <button type="submit" class="btn">Next &raquo;</button>
              </div>
            </div>
        </form>
        <hr>
        <!-- /form -->

検証スクリプト：

$().ready(function() {

// validate signup form on keyup and submit

    $("#sampleForm").validate({

        rules: {
            firstName: "required",
            lastName: "required"
        },
        highlight: function(label) {
    $(label)
        .closest('.control-group').removeClass('success').addClass('error');
    $('label.error').removeClass('checked');
  },
  success: function(label) {
    label.parents(".errormsgwrapper").children('.wrong').addClass('hidden');
    label.parents(".errormsgwrapper").children('.right').removeClass('hidden');
    label.closest('.control-group').addClass('success');

  },
        messages: {
            firstName: {
                    required: "asdfds"
                },
            lastName: "Please enter your lastname"
        },
         errorPlacement: function(error, element) {
            var errormsgwrapper = element.next(".errormsgwrapper");

                errormsgwrapper.children("span.right").addClass('hidden');
                errormsgwrapper.children("span.wrong").removeClass('hidden');
                error.appendTo(errormsgwrapper.children(".errormessage"));

         }

    });

    });
4

1 に答える 1

1

解決策はここ にあります私は解決策を見つけました、そしてまた以下のサンプルコードを含みます。ハイライト/アンハイライトを使用してそれを実現できます。要素のクラスが有効からエラーに変わっても起動しないエラー配置を試していました!! 以下のjsコードに示すように、クラスまたはhtml要素を使用して、ハイライトとアンハイライトを使用して表示/非表示にすることができます...

<div id="signupwrap">
        <form id="signupform" autocomplete="off" method="get" action="">
        <div class="question">
            <label for="firstname">First Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="firstname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
        <br /><br />
        <div class="question">
            <label for="lastname">Last Name:</label>
        </div>
        <div class="answer">
        <input type="text" name="lastname" />
        <div class="errormessagewrapper">
            <span aria-hidden="true" class=""></span>
        </div>
        </div>
         <br /><br />

            <input id="signupsubmit" name="signup" type="submit" value="Signup" />


          </table>
      </form>
  </div>

検証メッセージで表示したいアイコンや画像に適切なスタイルを与えるために、そのスパンタグを含めました。JSコードは以下のとおりです。

$(document).ready(function() {
// validate signup form on keyup and submit
var validator = $("#signupform").validate({

    rules: {
        firstname: "required",
        lastname: "required"
    },
    messages: {
        firstname: "Enter your firstname",
        lastname: "Enter your lastname"
    },

    errorPlacement: function(error, element) {
            error.appendTo(element.next('.errormessagewrapper').children());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
        alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {

    },
    highlight: function(element, errorClass, validClass) {


   $(element).next('.errormessagewrapper').children('span').addClass("icon-cancel").removeClass("icon-checkmark");

  },
  unhighlight: function(element, errorClass, validClass) {
     $(element).next('.errormessagewrapper').children('span').removeClass("icon-cancel").addClass("icon-checkmark");

  }
    });



});
于 2012-12-12T20:57:46.760 に答える