Question

我有一个工作表单验证脚本，但是当我添加了一个ajax脚本，该脚本在没有刷新的情况下使用表单插入数据时，验证脚本停止工作。

通常情况下，脚本会停止提交表单，因为出现了错误，但现在即使表单字段中没有任何内容，它也会一直提交。

所以查询在脚本停止之前发生，有没有办法在验证后运行查询？

我的索引页面：

<meta charset="utf-8">
<title>Form</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/validate.min.js"></script>
<script type="text/javascript">
    $(function(){
        //insert record
        $('#insert').click(function(){
            var voornaam = $('#voornaam').val();
            var achternaam = $('#achternaam').val();
            var telefoonnummer = $('#telefoonnummer').val();
            var email = $('#email').val();

            //syntax - $.post('filename', {data}, function(response){});
            $.post('action.php',{action: "submit", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });
            document.getElementById('berichten').innerHTML = 'Verstuurd!';        
        });
    });
</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="button" name="submit" 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) {
    /*cache DOM node*/
    var berichten = document.getElementById('berichten');

    /*reset html content*/
    berichten.innerHTML = '';

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

    }

});
</script>
</div>
</body>
</html>

我的操作页面：

<?php
    //connect to db
include ('connection.php');

    //if insert key is pressed then do insertion
    if($_POST['action'] == 'submit'){

        $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.";
        }
    }
?>

Answer 1

 if (errors.length > 0) {
   for (var i = 0, l = errors.length; i < l; i++) {
      berichten.innerHTML += errors[i].message + '<br>';
   }//end for each
  }else{
       AjaxInsert(); // add validation code here or convert your click event into function
  }

  function AjaxInsert(){
        var voornaam = $('#voornaam').val();
        var achternaam = $('#achternaam').val();
        var telefoonnummer = $('#telefoonnummer').val();
        var email = $('#email').val();

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

添加ajax插入后，验证脚本停止工作

1 个答案: