jQuery PHP表单提交错误

时间:2016-07-07 15:29:33

标签: javascript php jquery ajax forms

我正在尝试使用jquery和ajax提交表单。基本上,问题是:

1.POST请求未被发送

2.未验证的表格数据

3.表单在第二次点击提交按钮时没有获取数据

对于第一个问题,一旦删除验证部分,就会发送POST请求。但是,我不知道为什么下面提到的代码不起作用。

我不知道为什么存在第二个问题。我已经一次又一次地改变了代码的结构,但是没有验证数据。我已经单独测试了这些函数并且它们有效,但是当按下提交按钮时它们不起作用,即应该发送post数据的if条件返回false(转到else),即使在if条件内的测试时也是如此这是真的。

我怀疑第三个问题可能是由于第一个问题。我不太确定。

预先包含的

脚本是jquery.min.js 1.11.1,twitter bootstraps.min.js

 <!DOCTYPE HTML>
    <html>
    <head>
    <title>Live info a Sports Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta property="og:title" content="Vide" />
    <meta name="keywords" content="Live info Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
    Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />

    </head> 


    <?php 

        session_start();
        include 'db.php'; 
        if(isloggedin() == 0) {
            include 'header.php';

         ?>

                <br><br>
    <form id="formdata">        
    <div class="contact signup-body">
                    <div class="login-body">
                        <div class="login-heading">
                            <h3>Sign up</h3>
                        </div>
                        <div class="login-info">
                                <input type="text" class="user" id="name" name="name" placeholder="Name" >
                            <div id="namem" style='text-align:center;color:red;'></div>

                                <input type="text" class="user" id="email" name="email" placeholder="Email">
                            <div id="emailm" style='text-align:center;color:red;'></div>

                                <input type="text" class="user" id="mobile" name="mobile" placeholder="Phone">
                            <div id="mobilem" style='text-align:center;color:red;'></div>

                                <input type="password" id="password" name="password" class="lock" placeholder="Password">
                            <div id ="passm" style='text-align:center;color:red;'></div>

                            <input type="password" id="repassword" name="repassword" class="lock" placeholder="Confirm Password"                            >
                                <div id = "repassm" style='text-align:center;color:red;'></div>

                                <input type="submit" id="signin" name="signin" value="Sign up">
                                <div class="signup-text">
                                    <a href="#"  data-toggle="modal" data-target="#myModal">Already have an account? Login here.</a>
                                </div>
                        </div>
                    </div>

                    <!-- Modal -->

                    <!-- // Modal -->
                </div>
    </form>
                <!-- //contact -->
            </div>


     <script src="js/jquery-1.11.1.min.js"></script>
    <script>
      $(document).ready(function(){ 

          $('#signin').click(function(event){
           event.preventDefault();
           var name = $('#name').val();
         var email = $('#email').val();
         var mobile = $('#mobile').val();
         var password = $('#password').val();
         var repassword = $('#repassword').val();

        var email_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        var mob_fil = /^[0-9]{10}$/i;
        var string = /^[ a-zA-Z]+$/;
        var pass = /^[a-zA-Z0-9_\.\-\@\!]*$/;


              if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){

              if (!email_filter.test(email)) {$('#emailm').html('Please provide a valid email address');}

        if (!mob_fil.test(mobile)) {$('#mobilem').html('Please enter a 10 digit number');}

        if (!string.test(name))  {$('#namem').html('Please enter only alphabets');}

        if (!pass.test(password)) {$('#passm').html('Only alphabets,digits and special characters allowed in password');}

        if(password.length<3) {$('#passm').html('please enter a bigger password');}

        if (password!=repassword) {$('#repassm').html('Password and Confirm password do not match');}
               }

            if((email_filter.test(email)==true) && (mob_fil.test(mobile)==true) && (string.test(name)==true) && pass.test(password) && (password.length>3) && (password=repassword))
                                {
                        var dataString = $('#formdata').serializeArray();

                                $.ajax({
                                        type: "POST",
                                        url: "register.php",
                                        data: dataString,
                                        dataType:"text",
                                        contentType: 'application/x-www-form-urlencoded',
                                        cache: false,
                                        success: function(result){
                                        var data="";
                                        $("#message").html('success');
                                        $("#name").val('');
                                        $("#email").val('');
                                        $("#mobile").val('');
                                        $("#password").val('');
                                        $("#repassword").val('');
                                        },
                                        error: function(error){console.log(error);}
                                });   
                            }
              else {$('#repassm').html("your form is not valid");}

          });

      });
    </script>

        <?php include 'login_modal.php';session_destroy();}
              else {  $url = 'index.php'; echo '<META HTTP-EQUIV=REFRESH CONTENT="0; '.$url.'">';} ?>



          <!-- main content end-->
    </div>
    </div>
    </div>
    <?php include 'footer.php' ?>
    </section>
    </body>
    </html>

我发布了a question previously并发现验证部分是错误的。

此外,控制台不会显示jQuery错误。

2 个答案:

答案 0 :(得分:2)

我建议的第一件事是不要在JQuery中进行验证。将数据发送到PHP并在那里进行检查。

其次,你在这里遇到了拼写错误:event.prevetnDefault();

第三,你没有对register.php

返回的结果做任何事情
success: function(result){
  var data="";
  $("#message").html('success');
  $("#name").val('');
  $("#email").val('');
  $("#mobile").val('');
  $("#password").val('');
  $("#repassword").val('');
  console.log(result); // Check the result in console
},

第四,您在删除验证时提到它有效。一次删除一步验证,直到找出导致问题的那一步。但就像我说的那样,你应该用PHP进行验证。

编辑:我可能错了,但我想也许这条线需要重写:

if (!(name == '' || email == '' || mobile== '' || password == '' || repassword == '')){

if (name != '' && email != '' && mobile != '' && password != '' && repassword != '') {

答案 1 :(得分:-1)

您可以使用普通按钮而不是提交按钮,然后像这样添加返回false:

if(mobile != ''){
    if (!mob_fil.test(mobile)){
    $('#mobilem').text('Please enter a 10 digit number');
    return false;
    } 
}