【问题标题】:jQuery PHP form submission bugjQuery PHP 表单提交错误
【发布时间】:2016-11-10 00:16:30
【问题描述】:

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

1.POST请求未发送

2.表单数据未验证

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

对于第一个问题,一旦我删除了验证部分,就会发送一个 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 错误。

【问题讨论】:

  • 您是否考虑过使用 jQuery 验证并将提交放入 submitHandler? jqueryvalidation.org/validate
  • 您可能需要session_start(),然后再将任何内容输出到屏幕上(高于&lt;!DOCTYPE ... - 否则它将无法设置会话cookie。
  • 没有。老实说,我是一个初学者,更喜欢使用我能理解的函数,而不是库。但我对替代品持开放态度。任何能解决这个问题的东西对我来说都是巨大的。@Rasclatt
  • 就我而言,我希望我的表单数据在一个会话中被接收、验证和提交,然后会话被销毁。我将在顶部移动 session_start() 位,但我不认为该部分会导致错误@CD001

标签: javascript php jquery ajax forms


【解决方案1】:

我建议的第一件事是不要在 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 != '') {

【讨论】:

  • 同意。客户端验证非常便于用户使用,但它不能保护服务器端免受无效数据的影响,因为恶意用户总是可以绕过或修改它。如果您重视数据库的完整性,请先进行服务器端验证。一旦工作正常,请担心客户端。正如另一位评论者所建议的那样,我也会使用 jQuery 验证插件。这很容易,可能会为您节省很多时间
  • @awl19 谢谢!由于您的编辑,我的表格现在正在工作。此外,事实证明我已经为自定义部门编辑了 bootstrap.min.js。但是,我仍然无法在第二次单击提交按钮时获取数据。我将您的答案标记为已接受并将其发布为另一个问题
【解决方案2】:

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

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

【讨论】:

  • 你能解释一下吗?那部分要添加到html中吗?还是在提交函数里面没问题?
  • 这不是问题。 event.preventDefault() 已经阻止了表单的默认提交;问题似乎是验证代码没有按预期工作。
猜你喜欢
  • 2019-03-12
  • 2014-05-25
  • 1970-01-01
  • 1970-01-01
  • 2015-04-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多