2014-04-16 5 views
-2

양식을 전자 메일로 보내려고했지만 이름 필드의 유효성을 검사하고 싶습니다 (아무 내용도 보내지 않으면) 유효성을 검사 한 다음 PHP 스크립트를 통해 끝낼 수 없습니다 올바르게 작동합니다. I have created a jsfiddle at the following link 누군가 도와 줄 수 있습니까? 당신의 바이올린에보내기 전에 양식을 확인해야합니다

Working fiddle

$(document).ready(function() { 
$('.form-horizontal').on('submit', function (e) { 

    e.preventDefault(); 
    var name = $('#name').val(); 
    if (!name) { 
     showError(); 
    } 
    else { 
     $('#contact-form').submit(); 
    } 

}); 

function showError() { 

    $('.tyler-error').show(); 
} 

}); 
+1

"작동하지 않습니다." 계속 ... – Bucket

+2

클라이언트 쪽 유효성 검사에 의존하지 마십시오. 여부에 관계 없이이 작동 여부, 당신은 여전히 ​​서버에서 유효성을 검사해야합니다. –

+4

바이올린에서 jquery 라이브러리를 선택하는 것을 잊었습니다. http://jsfiddle.net/4TuVU/4/ – karthikr

답변

3

, 당신은 라이브러리 드롭 다운에서 jQuery를 선택하지 않았습니다.

두 번째로 유효성 검사 오류가 있으면 preventDefault 대신 submit 처리기 내에서 양식을 제출하지 않아야합니다.

$('#contact-form')[0].submit(); 
// or 
$('#contact-form').get(0).submit(); 
여기

, [0] 또는 .get(0) 당신에게에게주고있다 : 당신이 정말로 그것이로 코드를 유지하려면

$('.form-horizontal').on('submit', function (e) { 
    var name = $('#name').val(); 
    if (!name) { 
     showError(); 
     e.preventDefault(); 
    } 
}); 

, 당신은 형태가 기능을 제출 호출 할 필요가 아닌 jQuery를 함수가 제출 jQuery 래퍼가없는 일반 JavaScript DOM 요소이며이 경우 submit()을 호출 할 수 있습니다.

1

HTML5는 입력 유효성 검사를 제공하므로 브라우저에 HTML5보기임을 알리도록 설정할 수 있습니다. 당신이 HTML5를 사용하려는 해달라고하면

//Set your doctype for HTML5. 
<!doctype html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <form id="the_form"> 
     //here html5 will not submit if the box is empty or does not meet the email 
     //addres format. 
     <input type="email" name="email" id="email" placeholder="Enter email.."> 
     <input type="submit" value="send"> 
    </form> 
</body> 
</html> 

은 또한 입력이 비어있는 경우 간단한 자바 스크립트 코드는 제출하지 않도록 만들 수 있습니다.

<html> 
<head> 
    <title></title> 
    <script type="text/javascript"> 
    window.onload = init(); 

    function init(){ 
     //get form. 
     var form = document.getElementById("the_form"); 

     form.onsubmit = email_validation; 
    } 

    function email_validation(){ 
     email = document.getElementById("email"); 

     if(email.value == ''){ 
      //return false to avoid submission. 

      return false; 
     } 
     else{ 
      //do whatever code. 
     } 
    } 
    </script> 
</head> 
<body> 
    <form id="the_form"> 
     <input type="text" name="email" id="email" placeholder="Enter email.."> 
     <input type="submit" value="send"> 
    </form> 
</body> 
</html> 

이렇게하면 전자 메일이 전송되기 전에 유효성이 검사됩니다.

관련 문제