Jqueryの動作を検証する

Question

私はJqueryの検証を使用して、ユーザーにフィードバックを与え、フォームに入力する詳細の有効性を確認します。しかし、Jqueryの検証が作成する動作をカスタマイズするのに問題があります。

私はこのような単純な形式があります：ユーザーが持つフィールドを記入すると

<form id="form1"> 
<label for="input1" /> 
<input name="input1" class="error"/><span class="errorIcon">Error</span> 
<p class="errorText">Error message</p> 
<input type="submit" /> 
</form> 

：ユーザーが、私はjQueryの出力にこのような何かを検証したい、無効な情報を入力すると

<form id="form1"> 
<label for="input1" /> 
<input name="input1" /> 
<input type="submit" /> 
</form> 

を有効な情報Jqueryが出力を検証する必要があります。

<form id="form1"> 
<label for="input1" /> 
<input name="input1" /><span class="successIcon">Success</span> 
<input type="submit" /> 
</form> 

私はp必要なルールとカスタム検証メッセージが正常に動作するようにするために、上記の動作を得るのに問題があります。

私は現在、これを持っている：

$('#form1').validate({ 
showErrors: function(errorMap, errorList) { 
if (errorList < 1) { 
    $('span.errorIcon').remove(); 
    $('p.errorText').remove(); 
    $('input.error').removeClass('error'); 
    $('select.error').removeClass('error'); 
    return; 
} 
$.each(errorList, function(index, error) { 
    if ($(error.element).siblings('.errorText').length === 0 && $(error.element).siblings('.errorIcon').length === 0) { 
    $(error.element).next('p.errorText').remove(); 
    $(error.element).addClass('error'); 
    $(error.element).after(
     $('<p/>') 
    .addClass('errorText') 
    .append(error.message) 
); 
    $(error.element).after(
     $('<span>There is an issue with this field</span>') 
    .addClass('errorIcon') 
    ); 
} 
}); 
}, 
//rules and messages defined here 
); 

したがって、上記の私は現在必要望むものを達成しないと、私はこの問題を複雑に上かもしれないようにそれも感じています。私はかなりJavascriptとJqueryで経験がありません。この並べ替えを得るためのガイダンスは高く評価されます。

乾杯

EDIT：

ここjsfiddleへのリンクです：サンプルフォームでhttp://jsfiddle.net/WJ9Vt/4/。

Answer 1

また、CSSファイルを投稿したり、jsfiddleを実行したりできますか？ はコンテンツがないか、またはdisplay:block;と特別なheightとwidthを設定している限り、何かを表示しないため、errorIconが表示されない可能性があります。