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: "button", voornaam:voornaam, achternaam:achternaam, telefoonnummer:telefoonnummer, email:email},function(res){
                $('#result').html(res);
            });
            document.getElementById('berichten').innerHTML = 'Verstuurd!';        
        });
    });
</script>

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

Answer 1

我认为如果没有错误，你应该在FormValidator回调中发送ajax调用。

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>';
        }

    } else {
        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!';   
    }
}

Answer 2

http://rickharrison.github.io/validate.js/

在formValidator之前添加is_valid = true：

var is_valid = true;
var validator = new FormValidator.....

在事件错误中，如果长度＆gt;则添加is_valid = false。 0：

function(errors, event) {

    var berichten = document.getElementById('berichten');

    berichten.innerHTML = '';

    if (errors.length > 0) {
        is_valid  = false;
    }

最后：

$('#insert').click(function(){
            if(is_valid){
               // is valid, do code here
            }      
        });

验证后运行ajax查询

2 个答案: