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> 

여기 스크린 샷입니다.
감사합니다.

$(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" 
         } 
       } 
      }); 
}); 

그것도 올바른 구문인지 아닌지 모르겠어요 :

이것은 jQuery 코드입니다.

Answer 1

당신은 여기 fiddle

Answer 2

</input>을 제거하고 시작 태그를 인라인 태그로 만들 수 있습니까? like :

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

이 작업이 가능합니까? 당신이

$("#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 
    } 
    } 
}); 

jQuery를 유효성 검사에서 오류를 배치 할 위치