2

フォームの検証に問題があります。

  • 検証でエラーが返されると、クロスイメージとメッセージを含むスパン要素が表示されます。これは期待どおりです。

  • ただし、検証が成功すると、チェックマーク画像を含む複数のスパン要素が隣り合って表示されます（申し訳ありませんが、私はここでは初心者なので、画像をアップロードできません）。

コード：

jQueryの検証：

$("#signupform").validate({...
    errorClass: "error",
    validClass: "valid",
    errorElement: "span",

    highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
    },

    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },

    success: function(label) {
        label.addClass('valid').removeClass('error');
    }
});​

HTMLフォーム：

                   ...          
<div class="field">
   <label for="email">Email:</label>
   <input type="text" id="email" name="email" />                    
   <span id="email_status"></span>  
</div>
<div class="field">
   <label for="username">Username:</label>
   <input type="text" id="username" name="username" />  
   <span id="username_status"></span>   
</div>
<div class="field">
   <label for="password">Password:</label>
   <input type="text" id="password" name="password" />                      
</div>
<div class="field">
   <label for="confirmPassword">Confirm password:</label>
   <input type="password" id="confirmPassword" name="confirmPassword" />                    
</div>
...

注：「email_status」と「username_status」は、ajaxの可用性検証に固有のものです。

CSS：

#signupform span{  
    width:auto;
    height:16px;
    padding-left:30px;  
    margin-left:10px; 
    display:inline-block;
    vertical-align:text-bottom;
    font-family: Avant Garde, Arial,sans-serif;
    font-size:12px;
    border:1px solid #000;
}


#signupform span.valid  {
  background:url("../images/tick.png") left center no-repeat;
}

#signupform  span.error{
  background:url("../images/error.png") left center no-repeat;
  color:#B94A48; 
}

何が問題なのですか？

4

1 に答える 1

1

success 関数にチェック条件を追加します。

success: function(label) {
    if(!label.hasClass('valid')){
        label.addClass('valid')
    }
    label.removeClass('error');
}

更新されたコード

$("#signupform").validate({
    rules: {
        password: "required"
    },
    messages: {
        password: {
            required: "Este campo es requerido."
        }
    },
    errorClass: "error",
    validClass: "valid",
    errorElement: "span",
    highlight: function(element, errorClass, validClass) {
        $('.field span').remove();
        $(element).addClass(errorClass).removeClass(validClass);
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    },
    success: function(label) {
        $('.field span:gt(0)').remove();
        var $label = $(label);
        if (!$label.hasClass('valid')) {
            $label.addClass('valid');
        }
        $label.removeClass('error');
    }
});​

フィドルをチェック

于 2012-11-29T20:36:16.637 に答える