在一個單獨的div jQuery驗證郵件

我有我的表單上的jQuery驗證插件。目前它以這種方式配置，因此它將邊框顏色添加到輸入。如果字段中有驗證失敗，則邊界變爲紅色，如果是正確的，則邊界變爲綠色。現在由於該設置，我禁用了顯示消息。在一個單獨的div jQuery驗證郵件

但我的需要是顯示在輸入字段下面的一個分隔的div中的所有消息。我不知道該怎麼做。

你可以看到當前形勢這裏：http://jsfiddle.net/dzorz/akLQR/

所以「名字」和「地方」是我的兩個字段的messages_container'是我的div中，我要顯示在腳本中定義的這兩個消息。

HTML：

<form class="form-horizontal" id="gold_form" method='post' action='/start_ajax/addgold/'> 
<fieldset> 
    <span class="label-f">Name</span> 
    <input type="text" class="span4" id="name" name="name"> 
    </br> 
    <span class="label-f">Place</span> 
    <input type="text" class="span4" id="place" name="place"> 
    </br> 
    <div class="messages_container"> 
    </div> 
    <button type="submit" id="submit_btn" class="btn btn-primary btn-large">Submit</button> 
</fieldset> 
</form>

腳本：

//validation 
$().ready(function() { 

       $("#gold_form").validate(
        { 
        rules:{ 
          name: "required", 
          place: "required" 
          }, 
        messages:{ 
         name: "Please input your name.", 
         place: "Please input your name.", 
        }, 
    errorPlacement: function(error, element) { 
     $(element).filter(':not(.valid)').addClass("invalid"); 
    }, 
    success: function(error) { 
     $("#gold_form").find('.valid').removeClass("invalid").addClass("success"); 
    }, 
        }); 
       });

CSS：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 


.invalid { 
border: 1px solid red !important; 
} 

.success{ 
border: 1px solid green !important; 
} 

.messages_container{ 
border: 1px solid; 
width:300px; 
height:150px; 
margin-left:37px; 
}

您可以派生或免費更新我的jsfiddle，什麼都只是爲了給我一些想法和解決方案。

來源

2013-06-21 dzordz

'error.insertAfter（$（ 'messages_container'））'errorPlacement是添加了行應該定義在哪裏插入錯誤 –

但這個不放置容器內的郵件比它之後，看到情況http://jsfiddle.net/dzorz/VQhKW/ – dzordz

'error.appendTo（$（'。messages_container'））' –

變化

$().ready(function() { 

    $("#gold_form").validate(
    { 
    rules:{ 
    name: "required", 
    place: "required" 
    }, 
    messages:{ 
    name: "Please input your name.", 
    place: "Please input your name.", 
    }, 
    errorPlacement: function(error, element) { 
    $(element).filter(':not(.valid)').addClass("invalid"); 
    }, 
    success: function(error) { 
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success"); 
    }, 
}); 
});

到

$().ready(function() { 

    $("#gold_form").validate(
    { 
    rules:{ 
    name: "required", 
    place: "required" 
    }, 
    messages:{ 
    name: "Please input your name.", 
    place: "Please input your name.", 
    }, 
    errorPlacement: function(error, element) { 
    $(element).filter(':not(.valid)').addClass("invalid"); 
    error.appendTo($('.message_container')) 
    }, 
    success: function(error) { 
    $("#gold_form").find('.valid').removeClass("invalid").addClass("success"); 
    }, 
}); 
});

通知在errorPlacement

Demo

來源

2013-06-21 09:51:18

在一個單獨的div jQuery驗證郵件

回答

相關問題