Javascript 表单验证和提交ajax_Javascript_Php_Jquery_Ajax_Validation

Javascript 表单验证和提交ajax

javascript php jquery ajax validation

Javascript 表单验证和提交ajax,javascript,php,jquery,ajax,validation,Javascript,Php,Jquery,Ajax,Validation,我想使用ajax验证我的表单，验证后，使用ajax将其插入数据库使用此代码，它显示验证消息，但仍然插入我发现的问题是submit按钮有问题，如果我将其改为button而不是submit，它会插入未经验证的表单（甚至不会插入消息），当我将其改回submit时，它也会提交表单，但会显示验证消息知道如何在验证后插入吗？为什么它对我不起作用谢谢 index.php <!doctype html> <html> <head> &l

我想使用ajax验证我的表单，验证后，使用ajax将其插入数据库

使用此代码，它显示验证消息，但仍然插入

我发现的问题是submit按钮有问题，如果我将其改为button而不是submit，它会插入未经验证的表单（甚至不会插入消息），当我将其改回submit时，它也会提交表单，但会显示验证消息

知道如何在验证后插入吗？为什么它对我不起作用

谢谢

index.php
    <!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 is_valid = true;
    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) {
            is_valid  = false;
            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(){
                if(is_valid){
                var voornaam = $('#voornaam').val();
                var achternaam = $('#achternaam').val();
                var telefoonnummer = $('#telefoonnummer').val();
                var email = $('#email').val();

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

        });
    </script>

    </div>
    </body>

</html>

index.php
形式
Voornaam:

Achternaam:

Telefoonnummer:

电子邮件地址：



var为有效=真；
var validator=新的FormValidator（'form'[{
名称：“沃纳姆”，
显示：“Voornaam”，
规则：“必选”
}, {
名称：'achternaam'，
显示：“achternaam”，
规则：“必选”
},{
名称：“telefoonnummer”，
显示：“telefoon”，
规则：“必需|数字”
},{
名称：'电子邮件'，
显示：“电子邮件”，
规则：“必需|有效_电子邮件”
}]，函数（错误、事件）{
var berichten=document.getElementById（'berichten'）；
berichten.innerHTML=''；
如果（errors.length>0）{
is_valid=false；
对于（变量i=0，l=errors.length；i”；
}
}
});
$（函数（）{
$（'#insert'）。单击（函数（）{
如果（是否有效）{
var voornaam=$（'#voornaam'）.val（）；
var achternaam=$（'#achternaam'）.val（）；
var telefoonnummer=$（'#telefoonnummer'）.val（）；
var email=$（'#email'）.val（）；
$.post（'action.php'，{action:'button'，voornaam:voornaam，achternaam:achternaam，telefoonnummer:telefoonnummer，email:email}，函数（res）{
$（'#result'）.html（res）；
});
document.getElementById（'berichten'）。innerHTML='Verstuurd！'；
}
});
});

action.php

<?php
    //connectie
include ('connection.php');

    //als de knop is ingedrukt insert dan
    if($_POST['action'] == 'button'){

        $voornaam  = mysql_real_escape_string($_POST['voornaam']);
        $achternaam = mysql_real_escape_string($_POST['achternaam']);
        $email  = mysql_real_escape_string($_POST['email']);
        $telefoonnummer = mysql_real_escape_string($_POST['telefoonnummer']);

        $sql = "insert into 
           `form` (`id`,`voornaam`, `achternaam`, `email`, `telefoonnummer`) 
            values ('','".$voornaam."', '".$achternaam."', '".$email."', '".$telefoonnummer."')";
        $query = mysql_query($sql);
        if($query){
            echo "Toegevoegd!";
        }else {
            echo "Er is iets fout gegaan.";
        }
    }
?>

结束您的单击
处理程序函数：
return false;

要防止提交按钮的默认操作。
结束单击处理程序函数并执行以下操作：
return false;

要防止提交按钮的默认操作。
结束单击处理程序函数并执行以下操作：
return false;

要防止提交按钮的默认操作。
结束单击处理程序函数并执行以下操作：
return false;

阻止提交按钮的默认操作。
使用提交按钮，当for无效时，需要通过返回false来防止数据错误操作。

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

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

        });
    </script>


$（函数（）{
$（'#insert'）。单击（函数（）{
如果（是否有效）{
var voornaam=$（'#voornaam'）.val（）；
var achternaam=$（'#achternaam'）.val（）；
var telefoonnummer=$（'#telefoonnummer'）.val（）；
var email=$（'#email'）.val（）；
$.post（'action.php'，{action:'button'，voornaam:voornaam，achternaam:achternaam，telefoonnummer:telefoonnummer，email:email}，函数（res）{
$（'#result'）.html（res）；
});
document.getElementById（'berichten'）。innerHTML='Verstuurd！'；
}返回false；
});
});

另外，出于安全原因，如果有人禁用了js，您也应该在php中验证数据。
使用提交按钮，如果for无效，您需要通过返回false来防止数据错误操作
 <script type="text/javascript">
        $(function(){
            $('#insert').click(function(){
                if(is_valid){
                var voornaam = $('#voornaam').val();
                var achternaam = $('#achternaam').val();
                var telefoonnummer = $('#telefoonnummer').val();
                var email = $('#email').val();

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

        });
    </script>


$（函数（）{
$（'#insert'）。单击（函数（）{
如果（是否有效）{
var voornaam=$（'#voornaam'）.val（）；
var achternaam=$（'#achternaam'）.val（）；
var telefoonnummer=$（'#telefoonnummer'）.val（）；
var email=$（'#email'）.val（）；
$.post（'action.php'，{action:'button'，voornaam:voornaam，achternaam:achternaam，telefoonnummer:telefoonnummer，email:email}，函数（res）{
$（'#result'）.html（res）；
});
document.getElementById（'berichten'）。innerHTML='Verstuurd！'；
}返回false；
});
});

另外，出于安全原因，如果有人禁用了js，您也应该在php中验证数据。
使用提交按钮，如果for无效，您需要通过返回false来防止数据错误操作
 <script type="text/javascript">
        $(function(){
            $('#insert').click(function(){
                if(is_valid){
                var voornaam = $('#voornaam').val();
                var achternaam = $('#achternaam').val();
                var telefoonnummer = $('#telefoonnummer').val();
                var email = $('#email').val();

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

        });
    </script>


$（函数（）{
$（'#insert'）。单击（函数（）{
如果（是否有效）{
var voornaam=$（'#voornaam'）.val（）；
var achternaam=$（'#achternaam'）.val（）；
var telefoonnummer=$（'#telefoonnummer'）.val（）；
var email=$（'#email'）.val（）；
$.post（'action.php'，{action:'button'，voornaam:voornaam，achternaam:achternaam，telefoonnummer:telefoonnummer，email:email}，函数（res）{
$（'#result'）.html（res）；
});
document.getElementById（'berichten'）。innerHTML='Verstuurd！'；
}返回false；
});
});

另外，出于安全原因，如果有人禁用了js，您也应该在php中验证数据。
使用提交按钮，当for无效时，您需要通过retur防止数据错误操作