Форма всегда отправляется, даже если она не подтверждена

Я хочу создать форму, которая будет отправляться после проверки (используя 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 проще, но я не хочу, чтобы он обновлялся, поэтому это нужно делать с помощью ajax. –

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

добавить:

event.preventDefault();

В вашей функции мыши.

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

источник

2014-01-13 09:45:03

Показывает сообщения об ошибках, когда я добавляю это, но он по-прежнему вставляет в базу данных. –

Его потому, что ваша кнопка submit работает, даже если мы имеем JavaScript валидаций есть ошибки.

Вы должны добавить 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

Это все еще отправляет форму. Я хочу, чтобы он отправил после проверки. –

Форма всегда отправляется, даже если она не подтверждена

ответ

Смежные вопросы