Question

我想构建一个只在验证后提交的表单（使用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>

Answer 1

这是因为，即使我们的javascript验证有误，您的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>

Answer 2

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

添加：

event.preventDefault();

在点击功能中。

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

Answer 3

而不是使用type =“submit”使用type =“button”我认为这将解决您的问题.....

Answer 4

您应该使用return false;声明

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

即使未经过验证，表单也会始终提交

4 个答案: