Fatal编程技术网
  • javascript/
  • Javascript JS代码的一部分阻止表单提交和保存到数据库中

Javascript JS代码的一部分阻止表单提交和保存到数据库中

javascript jquery

Javascript JS代码的一部分阻止表单提交和保存到数据库中,javascript,jquery,Javascript,Jquery,我在第页有一个简单的表格 <form name="basicform" id="basicform" method="post" action="post.php" enctype="multipart/form-data" role="form"> <div class="panel panel-primary setup-content" id="step-1"> <div class="panel-heading">

我在第页有一个简单的表格

<form name="basicform" id="basicform" method="post" action="post.php" enctype="multipart/form-data" role="form">
    <div class="panel panel-primary setup-content" id="step-1">
        <div class="panel-heading">
             <h3 class="panel-title">Tell us about yourself</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label class="control-label">Your Name *</label>
                <input maxlength="100" type="text" name="entry_name" required="required" class="form-control" placeholder="" />
            </div>              
            <button class="btn btn-primary nextBtn pull-right open1" type="button">Next</button>
        </div>
    </div>

    <div class="panel panel-primary setup-content" id="step-2">
        <div class="panel-heading">
             <h3 class="panel-title">Final Step!</h3>
        </div>
        <div class="panel-body">
            <button class="btn btn-success pull-right open2" type="submit" name="add" id="add">I agree. I’m ready to get my itinerary!</button>
            <img src="assets/images/spinner.gif" alt="" id="loader" style="display: none; width:32px;height:32px;">

        </div>
    </div>
</form>
但如果我把它取下来，这部分就不起作用了

$(".open2").click(function() {
  if (v.form()) {
    $("#loader").show();
     setTimeout(function(){
       $("#basicform").html('<img src="assets/images/logo3.png" style="width:450px;height:250px;margin-left: 30%;"><h2>Awesome! </h2>');
     }, 1000);
    return false;
  }
});

$（“.open2”）。单击（函数（）{
if（v.form（））{
$（“#加载程序”）.show（）；
setTimeout（函数（）{
$（“#basicform”）.html（'Awesome！'）；
}, 1000);
返回false；
}
});
你能帮我吗？抱歉，我忘了提到，当我删除验证部分并单击“下一步”按钮时，我在控制台中收到此错误

未捕获引用错误：未定义v

这是因为这个
if（v.form（））
如果我删除
v.
只留下
form（）
仍然不起作用

这就是你的意思吗

var v=jQuery（#basicform”）.validate({
规则：{}，
错误元素：“span”，
errorClass:“帮助内联错误”，
});    
$（“.open1”）。单击（函数（）{
if（v.form（））{
$（“#步骤1”）。隐藏（“快速”）；
$（“第二步”）。显示（“慢”）；
}
});
$（“.open2”）。单击（函数（）{
if（v.form（））{
$（“#加载程序”）.show（）；
setTimeout（函数（）{
$（“#basicform”）.html（'Awesome！'）；
}, 1000);
返回false；
}
});

。隐藏{
显示：无；
}



跟我们说说你自己吧
你的名字*
下一个
最后一步！
我同意。我已经准备好了我的行程表！

这就是你的意思吗



var v=jQuery（#basicform”）.validate({
规则：{}，
错误元素：“span”，
errorClass:“帮助内联错误”，
});    
$（“.open1”）。单击（函数（）{
if（v.form（））{
$（“#步骤1”）。隐藏（“快速”）；
$（“第二步”）。显示（“慢”）；
}
});
$（“.open2”）。单击（函数（）{
if（v.form（））{
$（“#加载程序”）.show（）；
setTimeout（函数（）{
$（“#basicform”）.html（'Awesome！'）；
}, 1000);
返回false；
}
});

。隐藏{
显示：无；
}



跟我们说说你自己吧
你的名字*
下一个
最后一步！
我同意。我已经准备好了我的行程表！

好吧，我的做法不同。我希望这有帮助。下面是我的php：


 if ($app->nameLength($last_name) || $app->nameLength($first_name) || $app->nameLength($other_name) || $app->nameLength($ref_name)) {

    if ($app->nameValidation($last_name) || $app->nameValidation($first_name) || $app->nameValidation($other_name) || $app->nameValidation($ref_name)) {

        if ($app->emailValidation($email)) {

            $account->addUserEmail($email);

                if ($account->userExist($email)) {
                    $response['type'] = "error";
                    $response['msg'] = "The email address you have entered is already registered!";
                 }else{
                    if($userID = $account->create()) {
                        if ($member->newMember($userID)) {

                         $response['type'] = "success";

                        }

                    }
                }

            } else {
                $response['type'] ="error";
                $response['msg'] = 'Invalid email!, Please enter a valid Email';
            }

    } else {
        $response['type'] = "error";
        $response['msg'] = 'Name InValid, Please enter a valid Name';
    }
} else {
    $response['type'] = "error";
    $response['msg'] = 'Name must be more than 3 characters!';
}
}


header('Content-Type: application/json');

echo json_encode($response);


然后，当向ajax发送响应时，会发生以下情况：


 var v = $("#register-form").validate({

        rules: {
            last_name: {
                required: true,
                minlength: 3,
            },
            first_name: {
                required: true,
                minlength: 3,
            },
            other_name: {
                required: true
            },
            email: {
                required: true,
                email: true,
            },
            address: "required",
          },
        messages:
            {
                last_name: {
                    required: "Please enter your last name",
                    minlength: "LastName must be more than 2 characters!"
                },
                first_name: {
                    required: "Please enter your first name",
                    minlength: "FirstName must be more than 2 characters!"
                },
                other_name: "Please enter your other name",
                email: "Please enter a valid email",
                address: "Please enter your address",

            },
      //setting and styling errors
      errorElement: 'span',
      errorClass: 'invalid',
      errorPlacement: function(error, element) {
          if ( element.is(":radio"))
          {

              error.appendTo(element.parents('.custom-options'));
          }else if(element.is(":file")){
              error.insertAfter(".error-pd" );
          }
          else
          { // This is the default behavior
              return false;
          }
          // default
      },
        submitHandler: function () {
            //e.preventDefault();
            submitForm();
        }
    });

/* AJAX form submit function */
function submitForm(e){

   //e.preventDefault();

    var last_name = $("#last_name").val();
    var first_name = $("#first_name").val();
    var other_name = $("#other_name").val();
    var email = $("#email").val();
    var address = $("#address").val();



    var formData = {
        last_name: last_name,
        first_name: first_name,
        other_name: other_name,
        email: email,
        address: address,
        };

    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: formData,
        success: function (data) {

            if (data.type === "success"){
                //$("#register-form").html(data.msg);
                return true;
         }


            console.log(data.type);
            $("#register-form")[0].reset();

        },
         error: function (error) {
             console.log(error);
         }
    })

}

// Binding next button on first step - Multi-Step form
$(".open1").click(function () {
    if (v.form()) {
        $(".frm").hide("fast");
        $("#sf2").show("slow");
    }
});
//$('form').on('submit', function (e) {

$("#do_reg").click(function (event){
  //event.preventDefault();
    if (v.form()) {
        $("#loader").show();
        setTimeout(function () {
            $("#register-form").html('<h2>Thanks for your time.</h2>');

        }, 1000);
        //return false;
    }
});
// Binding back button on second step
$(".back2").click(function () {
    $(".frm").hide("fast");
    $("#sf1").show("slow");
});



var v=$（“#注册表表单”）。验证({
规则：{
姓氏：{
要求：正确，
最小长度：3，
},
姓名：{
要求：正确，
最小长度：3，
},
其他名称：{
必填项：true
},
电邮：{
要求：正确，
电子邮件：是的，
},
地址：“必填”，
},
信息：
{
姓氏：{
必填：“请输入您的姓氏”，
minlength:“LastName必须超过2个字符！”
},
姓名：{
必填：“请输入您的名字”，
minlength:“名字必须超过2个字符！”
},
其他名称：“请输入您的其他名称”，
电子邮件：“请输入有效的电子邮件”，
地址：“请输入您的地址”，
},
//设置和样式错误
errorElement:'span'，
errorClass:'无效'，
errorPlacement:函数（错误，元素）{
if（元素is（“：radio”））
{
error.appendTo（element.parents（'.customoptions'））；
}else if（element.is（“：file”））{
error.insertAfter（“.error pd”）；
}
其他的
{//这是默认行为
返回false；
}
//违约
},
submitHandler:函数（）{
//e、 预防默认值（）；
submitForm（）；
}
});
/*AJAX表单提交函数*/
函数提交形式（e）{
//e、 预防默认值（）；
var last_name=$（“#last_name”）.val（）；
var first_name=$（“#first_name”）.val（）；
var other_name=$（“#other_name”）.val（）；
var email=$（“#email”）.val（）；
var address=$（“#address”）.val（）；
var formData={
姓氏：姓氏，
名字：名字，
其他名称：其他名称，
电邮:电邮,，
地址:地址:，
};
$.ajax({
键入：“POST”，
url:'process.php'，
数据：formData，
成功：功能（数据）{
如果（data.type==“成功”）{
//$（“#注册表格”）.html（data.msg）；
返回true；
}
console.log（数据类型）；
$（“#注册表表单”）[0]。重置（）；
},
错误：函数（错误）{
console.log（错误）；
}
})
}
//第一步绑定下一步按钮-多步骤表单
$（“.open1”）。单击（函数（）{
if（v.form（））{
$（“.frm”）.hide（“fast”）；
$（#sf2”）。显示（“慢”）；
}
});
//$（'form'）。关于（'submit'，函数（e）{
$（“#do#u reg”）。单击（函数（事件）{
//event.preventDefault（）；
if（v.form（））{
$（“#加载程序”）.show（）；
setTimeout（函数（）{
$（“#注册表格”）.html（'谢谢您的时间'）；
}, 1000);
//返回false；
}
});
//第二步上的绑定返回按钮
$（“.back2”）。单击（函数（）{
$（“.frm”）.hide（“fast”）；
$（#sf1”）。显示（“慢”）；
});


因此，PHP的任何响应都在数据变量中，可以通过data.type访问该变量

然后我的html代码：


 <form id="register-form" name="register-form" action="<?php echo $app->h("process.php");?>" method="POST">

                                  <div id="sf1" class="frm">
                             <div id="reg-error" class="le-error"></div>
                        <div class="form-group">
                            <div class="row">
                            <!-- Adding Columns -->
                            <div class="col-md-6 col-xs-12">
                            <label>Personal Information</label>
                            <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
                            <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
                            <input type="text" class="form-control" id="other_name" name="other_name" placeholder="Other Names">
                            <input type="email" class="form-control" id="email" name="email" placeholder="E-mail">
                            <input type="text" class="form-control" id="address" name="address" placeholder="Address">
 <button class="btn btn-success open2" id="do_reg" name="submit" type="submit">Submit</button>



好吧，我的做法不同。我希望这能有所帮助。下面是我的php：


 if ($app->nameLength($last_name) || $app->nameLength($first_name) || $app->nameLength($other_name) || $app->nameLength($ref_name)) {

    if ($app->nameValidation($last_name) || $app->nameValidation($first_name) || $app->nameValidation($other_name) || $app->nameValidation($ref_name)) {

        if ($app->emailValidation($email)) {

            $account->addUserEmail($email);

                if ($account->userExist($email)) {
                    $response['type'] = "error";
                    $response['msg'] = "The email address you have entered is already registered!";
                 }else{
                    if($userID = $account->create()) {
                        if ($member->newMember($userID)) {

                         $response['type'] = "success";

                        }

                    }
                }

            } else {
                $response['type'] ="error";
                $response['msg'] = 'Invalid email!, Please enter a valid Email';
            }

    } else {
        $response['type'] = "error";
        $response['msg'] = 'Name InValid, Please enter a valid Name';
    }
} else {
    $response['type'] = "error";
    $response['msg'] = 'Name must be more than 3 characters!';
}
}


header('Content-Type: application/json');

echo json_encode($response);


然后，当向ajax发送响应时，会发生以下情况：


 var v = $("#register-form").validate({

        rules: {
            last_name: {
                required: true,
                minlength: 3,
            },
            first_name: {
                required: true,
                minlength: 3,
            },
            other_name: {
                required: true
            },
            email: {
                required: true,
                email: true,
            },
            address: "required",
          },
        messages:
            {
                last_name: {
                    required: "Please enter your last name",
                    minlength: "LastName must be more than 2 characters!"
                },
                first_name: {
                    required: "Please enter your first name",
                    minlength: "FirstName must be more than 2 characters!"
                },
                other_name: "Please enter your other name",
                email: "Please enter a valid email",
                address: "Please enter your address",

            },
      //setting and styling errors
      errorElement: 'span',
      errorClass: 'invalid',
      errorPlacement: function(error, element) {
          if ( element.is(":radio"))
          {

              error.appendTo(element.parents('.custom-options'));
          }else if(element.is(":file")){
              error.insertAfter(".error-pd" );
          }
          else
          { // This is the default behavior
              return false;
          }
          // default
      },
        submitHandler: function () {
            //e.preventDefault();
            submitForm();
        }
    });

/* AJAX form submit function */
function submitForm(e){

   //e.preventDefault();

    var last_name = $("#last_name").val();
    var first_name = $("#first_name").val();
    var other_name = $("#other_name").val();
    var email = $("#email").val();
    var address = $("#address").val();



    var formData = {
        last_name: last_name,
        first_name: first_name,
        other_name: other_name,
        email: email,
        address: address,
        };

    $.ajax({
        type: 'POST',
        url: 'process.php',
        data: formData,
        success: function (data) {

            if (data.type === "success"){
                //$("#register-form").html(data.msg);
                return true;
         }


            console.log(data.type);
            $("#register-form")[0].reset();

        },
         error: function (error) {
             console.log(error);
         }
    })

}

// Binding next button on first step - Multi-Step form
$(".open1").click(function () {
    if (v.form()) {
        $(".frm").hide("fast");
        $("#sf2").show("slow");
    }
});
//$('form').on('submit', function (e) {

$("#do_reg").click(function (event){
  //event.preventDefault();
    if (v.form()) {
        $("#loader").show();
        setTimeout(function () {
            $("#register-form").html('<h2>Thanks for your time.</h2>');

        }, 1000);
        //return false;
    }
});
// Binding back button on second step
$(".back2").click(function () {
    $(".frm").hide("fast");
    $("#sf1").show("slow");
});



v