Question

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

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

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

知道验证后如何插入？为什么它不适合我？

由于

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>

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

Answer 1

使用以下内容结束click处理函数

return false;

阻止提交按钮的默认操作。

Answer 2

使用提交按钮，当for无效时，您需要通过return false

阻止dfault操作

 <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>

顺便说一下，出于安全原因，以及有人禁用js的情况，你也应该在php中验证数据。

Answer 3

你也可以试试这个：点击这样调用此函数：

<button type="button"  class="btn btn-inverse"   name="submit" onClick="ajaxFormSubmit();">Test</button>

 function ajaxFormSubmit(){
    var voornaam = $('#voornaam').val();
        var achternaam = $('#achternaam').val();
        var telefoonnummer = $('#telefoonnummer').val();
        var email = $('#email').val();
        var atpos=email .indexOf("@");
    var dotpos=email .lastIndexOf(".");

    if(voornaam =="" || achternaam =="" || telefoonnummer =="" ||email ==""){
                  alert("message");       
          return false;
    }
    else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
    {
     alert("msg");
      return false;
    }

    jQuery.post("your data",function(r){
        if(r=="success"){

        }
    });

Answer 4

http://www.javascriptkit.com/javatutors/valid3.shtml

http://www.nairaland.com/216098/form-validation-tutorial-using-javascript

看看这些链接是否可以帮助你实际帮助我...

Answer 5

页面中可能存在JQuery冲突，只需在页面中添加一个jquery链接....尝试就像这样，

Jquery路径：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<强>表格

<form name="myform">
<input type"text" name="name">
<input type="submit" name="submit" id="submitbtn" value="Submit" />
</form>

正文标记下的JS脚本

<script>
$('#submitbtn').click(function(){
    //ajax code here
    return false;
})
</script>

上面的代码只是一个示例...像这样锻炼你的代码......

表单验证并提交ajax

5 个答案: