jQueryデフォルトの検証エラーが入力ボックス内に表示される

Question

このフォームがあります。フォームにjQuery検証プラグインを追加しましたが、検証エラーが発生するたびに入力ボックス内に表示されます。ここにhtmlコードスニペットがあります。

メールの下にエラーが表示されます。パスワードのボックスのように表示されます。 <div id="emailInputGroup">は問題を引き起こしていますが、削除するとinput-group-addonが失われます。ここで

<div id="loginFormGroup" class="form-group"> 
    <label for="emailLabel" style="color:white"><strong>Email ID</strong></label> 
    <div id="emailInputGroup" class="input-group"> 
    <input name="email" type="email" class="form-control" placeholder="abc" autofocus></input> 
    <span class="input-group-addon">@abc.org</span> 
    </div> 
</div> 
<div class="form-group"> 
    <label for="passwordLabel" style="color:white"><strong>Password</strong></label> 
    <input name="password" type="password" class="form-control" placeholder="password" /> 
</div> 

はスクリーンショットです：

私はウェブ開発の初心者だけど、些細な問題であるように思われる場合は親切に私と一緒にクマ。
ありがとうございます。

これは、jQueryのコードです：

$(document).ready(function(){ 
    $.validator.addMethod("customValidator", function(value, element) { 
    return /^[a-zA-Z]+$/.test(value); 
}, 'No special char2'); 

    $("#signIn").click(function(){ 
      $("#loginForm").valid(); //default 
    }); 

    $("#loginForm").validate({ 
       rules: { 
         email: { 
            required: true, 
            minLength: 3, 
            maxLength: 10, 
            customValidator: true 
         }, 
         password: { 
            required: true, 
            minLength: 4, 
            maxLength: 32 
         } 
       }, 
       message: { 
         email: { 
            required: "email can't be empty", 
            minLength: "At least 3 email characters.", 
            maxLength: "At most 10 email characters." 

         }, 
         password: { 
            required: "password can't be empty", 
            minLenght: "At least 4 password characters", 
            maxLength: "At most 32 password characters" 
         } 
       } 
      }); 
}); 

それも文法的に正しいかどうかはわかりません。

Answer 1

あなたはjQueryの検証では、あなたのエラーを配置したい場所をカスタマイズするerrorPlacementを使用することができます

$("#loginForm").validate({ 
    rules: { 
     .......... 
    }, 
    message: { 
     .......... 
    }, 
    errorPlacement: function(error, element) { 
    // if the element is email, then append the error to its parent. 
    // which means the error will be rendered below the span 
    if (element.attr("name") == "email") { 
     error.appendTo(element.closest('div')); 
    } else { 
     error.insertAfter(element); // this is the default behaviour 
    } 
    } 
}); 

ここでは、このための任意の理由がdownvotedさfiddle

Answer 2

</input>を削除してオープニングタグをインラインタグにすることはできますか？ like：

<input name="email" type="email" class="form-control" placeholder="abc" autofocus/> 

これは機能しますか？