한 번에 양식의 누락 된 필드에 대한 오류 메시지 표시

Question

많은 필드가있는 양식이 있습니다. 입력란 세부 정보를 입력하지 않고 제출 버튼을 누르면 필드 아래에 모든 입력란에 대한 오류 메시지가 한 번에 표시됩니다. 어떻게해야합니까? 지금은 경고를 사용하고 있지만 나는 그것을 원하지 않습니다. 아래는 검증을위한 코드입니다. 지금 당장 나는 reg와 차량 소유주라는 두 분야를 보여주고있다. 빨간색으로 오류 메시지를 다음과 같이 표시하고 싶습니다. Please enter registration number below the field. 양식을 제출할 때 컨트롤은 아래 코드가있는 함수로옵니다.

if(reg1 == "" || reg2 == "" || reg3 == "" || reg4 == "") 
{ 
    alert("Please Enter Proper Registration Number"); 
    return false; 
} 
else if(vRegisteredOwnerName == "") 
{ 
    //alert("Please enter registered owner's name"); 
    document.getElementById("vRegisteredOwnerName").style.borderColor="#FF0000" 

    return false; 
} 

Answer 1

1) 더 나은

<div id='errorMsg'></div> 

2) 대신 alert(), 당신은 위의 div 요소 내에 오류 메시지를 표시 할 수 있습니다와 같은 새로운 div 요소를 만듭니다.

document.getElementById("errorMsg").innerHTML 
        = "Please Enter Proper Registration Number"; 

여기는 짧은 fiddle이며 아래는 전체 코드입니다.

validate = function() { 
    reg = document.getElementById("reg").value; 
    vRegisteredOwnerName = document.getElementById("vRegisteredOwnerName").value; 
    errorModal = document.getElementById("errorMsg"); 

    if (reg == "") { 
     errorModal.innerHTML = "Please Enter Proper Registration Number";   
     if (vRegisteredOwnerName == "") { 
      //alert("Please enter registered owner's name"); 
      document.getElementById("vRegisteredOwnerName").style.borderColor = "red" 
      return false; 
     } 
    } 
} 

Answer 2

jQuery를 검증 데모 링크 :

http://jqueryvalidation.org/

이 플러그인은 JQuery와 초보자에 가장 적합합니다.