Question

我正在尝试使用jquery和ajax提交表单。过去2天我一直在这里，但我不知道为什么这不起作用。基本上，问题是：

发送请求而非发布
表单数据未经过验证
按下提交按钮后，表单会重置。

对于第一个问题，我也试过使用$ .post（），但这也不起作用。我尝试使用dataType：＆＃39; text＆＃39;，它也没有用。另外，正如@AnilPanwar所指出的那样，我使用的是#formdata而不是这个，它既不起作用

我不知道为什么存在第二个问题。我已经一次又一次地改变了代码的结构，但是没有验证数据。我已经单独测试了这些函数并且它们有效，但是当按下提交按钮时它们不起作用，即应该发送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.prevetnDefault();
       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>

另外，使用控制台没有显示js错误。单击提交时，页面将发送GET请求，并在URL中显示字段值。

以下是我拍摄的表单

提交表单后控制台的快照： a snapshot of the console after submitting the form

提交表单后的请求快照： a snapshot of the requests after submitting the form

正如@ADyson指出的那样，输入到表单中的数据没有被存储。我在submit函数中移动了变量声明来解决这个问题。这确实解决了第3个问题。但是现在，当我第二次按下提交按钮时，我无法将数据输入到我的脚本中。我已将编辑后的代码放入问题中。

Answer 1

您可以在进行ajax调用之前提交表单（以常规方式完全刷新）。这就是你看到GET请求的原因。这是因为您的按钮是input[type="submit"]。此类按钮的默认行为是在单击时提交它所在的表单。

解决方案：

首先，将event.preventDefault();移至点击事件的第一行。这将停止表单提交的发生。目前预防过程发生得太晚（当表格无效时根本不会发生）。

其次，如评论中所述，将$("#this").serializeArray();替换为$("#formdata").serializeArray();。在点击事件的上下文中，$(this)表示点击的按钮，而不是整个表单。

第三，移动

       var name = $('#name').val();
 var email = $('#email').val();
 var mobile = $('#mobile').val();
 var password = $('#password').val();
 var repassword = $('#repassword').val();

在您的点击事件中。否则验证可能会失败，因为当前加载页面时会填充这些变量，而不是在用户提交时填充。如果您在提交时使用这些变量来检查数据的有效性，则不会考虑用户在字段中输入的内容。

最后，完全删除event.unbind();。 Unbind适用于元素，而不适用于事件。我不认为这个命令实际上做了什么坏事，但最好删除多余/错误的代码。有关如何使用此方法，请参阅http://api.jquery.com/unbind/。

Jquery表单验证和提交

1 个答案: