提交表单时如果有错误则停止刷新，如果没有错误则刷新

Question

我有 2 个表单登录和注册写在同一个 index.php 上，它们根据用户需要切换。登录表单在您打开 index.php 时出现，而注册表单是隐藏的，只有在您打开时才会出现点击此处注册链接。

现在我的问题是，如果在注册时出现任何错误（验证、数据库错误），那么页面会在明显单击提交按钮时刷新并返回到我的登录表单，该表单会在您打开/刷新 index.php.Again 时出现我必须点击此处的注册链接才能解决错误。

我只想在出现错误时停留在注册表单上，这意味着我不希望在单击提交时刷新页面，但希望出现错误并在那里解决它们。

$.ajax({
           type: "POST",
           url: "phpindex.php",
           data: $("#signUpForm").serialize(),
           success:function(data)
           {
            if ("#error".val(data)) 
            {
                e.preventDefault();
            }

           }
           
         });

         });

My validation and database code is written in phpindex.php

***************signup form************************

<form method="post" id="signUpForm">
    <div class="container" id="signupContainer">
    <h1>Sign Up</h1>

    <div id="error"><?php if ($error!="") {
    echo '<div class="alert alert-danger" role="alert">'.$error.'</div>';
    
} ?></div>
  
  <div class="form-group row">
    <label  class="col-sm-2 form-control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="name" placeholder="Your name">
      <span class="fa fa-user"></span>
    </div>
  </div>

   <div class="form-group row">
    <label class="col-sm-2 form-control-label">Address1</label>
    <div class="col-sm-10">
      <input type="text" id="address1" class="form-control" name="address1" placeholder="Home address">
      <span class="fa fa-map-marker"></span>
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 form-control-label">Address2</label>
    <div class="col-sm-10">
      <input type="text" id="address2" class="form-control" name="address2" placeholder="City,Pincode....">
      <span class="fa fa-map-marker"></span>
    </div>
  </div>
   
 <div class="form-group row">
    <label class="col-sm-2 form-control-label">Email</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" name="email" placeholder="Email Address">
      <span class="fa fa-envelope"></span>
    </div>
  </div>

  <div class="form-group row">
    <label  class="col-sm-2 form-control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" name="password" placeholder="Password">
      <span class="fa fa-key"></span>
    </div>
  </div>

  
  <div class="form-group row">
    <div class="col-sm-offset-5 col-sm-10">
      <input type="submit" id = "submit1"class="btn btn-success btn-lg" value="Sign In" name="submit">
    </div>
  </div>

<p><a class="toggleForms">Back to Log in</a></p>



  </div>
</form>

***************login form*****************
<form method="post" id="logInForm">
    <div class="container" id="logInContainer">
    <h1>Log In</h1>
    <div id="success"><?php if ($success!="") {
    echo '<div class="alert alert-success" role="alert">'.$success.'</div>';
    
} ?></div>
  <div class="form-group row">
    <label class="col-sm-3 form-control-label">Emai</label>
    <div class="col-sm-8">
      <input type="email" class="form-control"  placeholder="Email" name="email">
      <span class="fa fa-envelope"></span>
    </div>
  </div>
  <div class="form-group row">
    <label class="col-sm-3 form-control-label">Password</label>
    <div class="col-sm-8">
      <input type="password" class="form-control" placeholder="Password" name="password">
      <span class="fa fa-key"></span>
    </div>
  </div>
  
  <div class="form-group row">
    <div class="col-sm-offset-4 col-sm-10">
    <input type="hidden" name="signUp" value="0">
      <input type="submit" id = "submit2" class="btn btn-success btn-lg" value="Log In" name="submit">
    </div>
  </div>

  <p><a class="toggleForms">Sign Up Here</a></p>

  </div>
</form>

Answer 1

首先，您提交的代码中有很多错误。我相信它们主要是由于笨拙的复制和粘贴，但我认为你的代码中只有一个，它是“#error”缺少的 jQuery 参考。

"#error".val(data)

我想你想写这样的东西

$("#error").val(data)

这个错误会阻止“preventDefault”的发生。

其次，我想知道这些表单的提交处理程序在哪里以及它的外观。如果你没有，那么有你的答案。你只是没有捕捉到提交事件。

最后，我会考虑调用，而不是 preventDefault：

return false

请参阅此主题以了解原因 event.preventDefault() vs. return false