양식이 유효하지 않은 경우에도 항상 제출

유효성 검사 후에 제출하는 양식 만 작성하려는 경우 (유효성 검사와 제출 모두 ajax 사용).양식이 유효하지 않은 경우에도 항상 제출

내가 지금 가지고있는 것부터는 항상 제출합니다. 필드가 올바르지 않지만 여전히 빈 필드를 데이터베이스에 삽입한다는 메시지를 표시합니다.

유효성 검사 후 삽입하는 방법에 대한 아이디어가 있으십니까?

감사

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 

<meta charset="utf-8"> 
<title>Form</title> 
</head> 
<script type="text/javascript" src="js/validate.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 


<body> 
<div id="wrap"> 
<table> 
<td> 
    <form name="form"> 
     <tr> 
     <p class="names">Voornaam:</p> <p><input type="text" name="voornaam" id="voornaam"></p> 
     </tr> 
     <tr> 
     <p class="names">Achternaam:</p> <p><input type="text" name="achternaam" id="achternaam"></p> 
     </tr> 
     <tr> 
     <p class="names">Telefoonnummer:</p> <p><input type="text" name="telefoonnummer" id="telefoonnummer"></p> 
     </tr> 
     <tr> 
     <p class="names">Emailadres:</p> <p><input type="text" name="email" id="email"></p> 
     </tr> 
     <tr> 
      <input class="knop" type="submit" name="insert" value="Opsturen" id="insert"> 
     </tr> 
    </form> 
</td> 
</table> 
<br> 
<div id="berichten"> 

</div> 

<script> 
var validator = new FormValidator('form', [{ 
    name: 'voornaam', 
    display: 'Voornaam',  
    rules: 'required' 
}, { 
    name: 'achternaam', 
    display: 'achternaam', 
    rules: 'required' 
},{ 
    name: 'telefoonnummer', 
    display: 'telefoon', 
    rules: 'required|numeric' 
},{ 
    name: 'email', 
    display: 'email', 
    rules: 'required|valid_email' 
}], function(errors, event) { 
    var berichten = document.getElementById('berichten'); 

    berichten.innerHTML = ''; 

    if (errors.length > 0) { 
     for (var i = 0, l = errors.length; i < l; i++) { 
      berichten.innerHTML += errors[i].message + '<br>'; 
     } 

    } 

}); 
</script> 
<script type="text/javascript"> 
    $(function(){ 
     $('#insert').click(function(){ 
      var voornaam = $('#voornaam').val(); 
      var achternaam = $('#achternaam').val(); 
      var telefoonnummer = $('#telefoonnummer').val(); 
      var email = $('#email').val(); 

      $.post('action.php',{action: "submit", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){ 
       $('#result').html(res); 
      }); 
      document.getElementById('berichten').innerHTML = 'Verstuurd!'; 
     }); 

    }); 
</script> 

</div> 
</body> 
</html>

출처

2014-01-13 Anonymous

은 제출 클릭의 기본 동작을 방지합니다. 그런 다음 FORM이 유효하면 수동으로 FORM을 제출하십시오. 그러나 내가 모르는 플러그인을 사용하면 더 도움이되지 않을 것입니다. –

정말로 JS를 사용하여 유효성을 검사해서는 안되며 ** 특히 데이터베이스 용도로 ** 특히 ** 사용해야합니다. JS를 사용하는 것 외에 서버 측 방법을 사용하십시오. –

그래, PHP로 더 쉽다는 것을 알고 있지만 새로 고치기를 원치 않으므로 아약스로 끝내야한다. –

http://api.jquery.com/event.preventdefault/

추가 : 클릭 기능 내에서

event.preventDefault();

$(function(){ 
    $('#insert').click(function(e){ 
     e.preventDefault();

출처

2014-01-13 09:45:03

추가 할 때 오류 메시지가 표시되지만 여전히 데이터베이스에 삽입됩니다. –

그 때문에, 당신의 submit 버튼을 우리가 자바 스크립트를 검증 할 경우에도 작동 오류가 있습니다.

양식을 제출하지 않으려면 함수에 return false을 추가해야합니다.

또한 오류 수를 고려해야합니다.

따라서, 업데이트 된 코드 :

<script type="text/javascript"> 
     $(function(){ 
      $('#insert').click(function(){ 
       var voornaam = $('#voornaam').val(); 
       var achternaam = $('#achternaam').val(); 
       var telefoonnummer = $('#telefoonnummer').val(); 
       var email = $('#email').val(); 


if (errors.length > 0) { 
      for (var i = 0, l = errors.length; i < l; i++) { 
       berichten.innerHTML += errors[i].message + '<br>'; 
    return false; 
      } 
}    $.post('action.php',{action: "submit", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){ 
        $('#result').html(res); 
       }); 
       document.getElementById('berichten').innerHTML = 'Verstuurd!'; 
     return false; 
      }); 

     }); 
    </script>

대신 형식을 사용

출처

2014-01-13 09:45:23 Pupil

추가 할 때 항상 양식을 제출합니다. –

그래서 클릭 기능에 오류 수를 추가합니까? –

= ..... 사용 유형은 "버튼"이 문서가 문제를 해결하는 것이라고 생각 = "제출"

출처

2014-01-13 09:45:58

변경하면 맹목적으로 제출됩니다. –

당신은 return false; 문을 사용한다

if (errors.length > 0) { 
    for (var i = 0, l = errors.length; i < l; i++) { 
    berichten.innerHTML += errors[i].message + '<br>'; 
    return false; 
}

출처

2014-01-13 09:46:50

여전히 양식을 제출합니다. 나는 그것이 유효성 검사 후에 제출하기를 원한다. –

양식이 유효하지 않은 경우에도 항상 제출

답변

관련 문제