表单验证后服务器端脚本无法正常工作

Question

hy! I have a signup form. I want to submit form using ajax after complete validation.I used jquery plugin for validation. But as soon as, i simply click on any field, the ajax request automatically sent to server and return a response before hitting submit button. Also, I am getting the "missing value" message. I do not know, where is the mistake. Help me !

Validation.js

$(document).ready(function() {

    $('#signup_form').formValidation({

        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            }
        })
        .on('success.form.bv', function(e) {
                $('#signup_form').data('formValidation').resetForm();

        });
});

form_signup.php

<script type="text/javascript">
$(document).ready(function (){
    $('#signup_form').submit(function(e){ e.preventDefault(); });
 $(function(){
        $("#signup_form").click(function(event){
            //event.preventDefault();

            $.ajax({
                    url:'form_process.php',
                    type:'POST',
                    data:$(this).serialize(),
                    success:function(result){
                       alert(result);

                    }

            });
        });
    });
    });

form_process.php

<?php
print_r($_POST);
require_once './functions/functions.php';

if(isset($_POST['FirstName']))
{
     echo $firstName = $_POST['FirstName'];
   }
else{ echo ("missing value!");}

Answer 1

your were calling ajax on form click inside form submit ?? , you need to call it on form submit instead !

 $(document).ready(function(){
  $('#signup_form').submit(function(e){
        e.preventDefault();
        $.ajax({
                url:'form_process.php',
                type:'POST',
                data: $('#signup_form').serialize(),
                success:function(result){
                   alert(result);

                }

           });
    });
 });

try this way...

Hope it helps