필드가 비어 있고 오류 메시지가 표시 될 때 제출하지 않기

Question

내 웹 사이트에 많은 양식이 있습니다. 나는에 jQuery를 사용하려면 :. 텍스트 필드 중 하나가 CSS와 빈 필드가

강조 비어있는 경우

• 표시 오류 메시지가
사용자가 그들을 채울 때까지 형태의
• 방지 제출

다른 모든 양식이 동일한 Jquery 스크립트에 연결되므로 내 jquery가 특정 양식에 대한 참조를 작성하지 않도록해야합니다 (그렇지 않으면 각 양식마다 다른 스크립트를 작성해야합니다) .

나는 그들이 비어 있는지 확인하고 제출에서 양식을 중지 event.preventDefault();를 사용 addClass을 필드를 강조하기 위해 입력 필드를 통해 루프에 each function하는 것이 작업을 수행하는 가장 좋은 방법을 생각했다.

각 기능은 작동하지만 preventdefault/addclass가 작동하지 않는 것 같습니다. 내가 뭘 잘못하고 있는지 잘 모르겠다. 내 코드는 다음과 같습니다. (JSFiddle 버전)

$(document).ready(function() { 

$('.names').submit(function(){ 
      $('.names input[type=text]').each(function(n,element){ 
      if ($(element).val()=='') { 
       event.preventDefault(); 
       alert('Some fields are blank (highlighted in red). Please fill them in'); 
       ($element).addClass("error"); 
       return false; 
      } 
      }); 
      return true; 
     }); 

}); 

어떻게 작동합니까? 또한 필드 자체가 아닌 입력 필드의 부모 <p> 태그에 오류 클래스를 적용 할 수 있습니까?

Answer 1

event은 정의되지 않습니다. 당신의 제출 - 콜백에서 매개 변수를 잡아 그에로 preventDefault를 호출 :

$(document).ready(function() { 
    $('.names').submit(function (e) { 
     $(this).find('input[type=text]').each(function (n, element) { 
      if ($(element).val() == '') { 
       e.preventDefault(); 
       alert('Some fields are blank (highlighted in red). Please fill them in'); 
       $(element).parent().addClass("error"); 

       return false; 
      } 
     }); 

     return true; 
    }); 
}); 

참고 것을 :

1. ($element)도 정의되지 않은, 당신은 $(element)을 의미했다.
2. 부모에게 오류 클래스를 추가하려면 $(element).parent()을 사용하십시오.
3. 여러 양식이있는 경우 작동하지 않을 수 있습니다. $('.names input[...]') 대신 $(this).find('input[...]')을 사용하십시오. 이렇게하면 제출하는 양식의 유효성을 검사 할 수 있습니다.
4. 여기에 working fiddle입니다.