Question

我正在设计一个允许个人资料注册的电子商店。我需要同时拥有Javascript和amp;注册表单的PHP验证。（所以当任何字段为空时，我需要弹出一条消息，让我知道哪个特定字段为空+在所需字段旁边的屏幕上显示一条可视消息，告知用户他们需要纠正的位置问题）

到目前为止，它无法正常工作，因为我的JS验证表单激活onsubmit并且我的PHP正在运行。我意识到onsubmit在行动前激活，因此不允许“行动”通过。

我尝试将其从'action'更改为'onclick'，但是onsubmit也会先激活，并且不允许PHP工作。

这是我的表单代码（我只包含了名字部分所以它不会太长）

<form method="post" onclick="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" name="myForm" onsubmit="return validateForm()" style="border:1px solid #ccc">

  <label><b>First Name</b></label>
<input type="text" name="firstName" placeholder="">
  <?php echo $fnameErr;?>

<button type="submit" class="signupbtn" name="submit">Submit</button>

这是我的PHP代码：

 <?php

    $fnameErr = "";
    $fname = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
       if (empty($_POST["firstName"])) {
            $fnameErr = "Name is required";
             } 
         else {
            $fname = test_input($_POST["firstName"]);
              }
             }

      function test_input($data) {
          $data = trim($data);
          $data = stripslashes($data);
          $data = htmlspecialchars($data);
          return $data;
        }
  ?>

我知道PHP代码有效，因为如果我删除了JS验证，它会按预期工作。我很感激帮助。

如果我需要添加任何额外信息，请告诉我。此外，这不是我的第一站。我一直在谷歌搜索并试图弄清楚如何解决这个问题几个小时无济于事......

这是被调用的JS函数（也可以按预期工作）这也是仅包含名称的缩短版本，其余的工作方式相同，if语句更多：

   function validateForm() {
   "use strict";
var fn = document.forms.myForm.firstName.value;
var ln = document.forms.myForm.lastName.value;
var em = document.forms.myForm.email.value;
var phone = document.forms.myForm.phone.value;
var pass = document.forms.myForm.psw.value;
var pass2 = document.forms.myForm.psw2.value;
if (fn === "") {
    window.alert("First name must be filled out");
    return false;
  }
}

Answer 1

<input type="text" name="firstName" required>

您不需要任何JavaScript。

此外：

<form action="" method="post">

如果您要回发到当前页面，则无需指定action。如果您不小心，使用$_SERVER['PHP_SELF']可能是一个漏洞，如果您拥有它们，也会破坏“漂亮的网址”。

Answer 2

您应该更改onsubmit部分并删除onclick。此外，由于没有action，您的表单无效。

    
    document.getElementById('myForm').addEventListener('submit',validateForm);
    function validateForm(e) {
        "use strict";
        console.log(document.forms.myForm.firstName.value);
        var fn = document.forms.myForm.firstName.value;
        
        if (fn === "") {
            window.alert("First name must be filled out");
            e.preventDefault();
            return false;
        }
    }

<form action="https://stackoverflow.com/" method="post" id="myForm">
  <input type="text" name="firstName" >
  <input type="submit">
</form>

有几个错误...但主要是导致你的问题的是onsubmit =“return validateForm（）”。我还添加了e.preventDefault（），以防止在出现错误时提交表单。

Answer 3

正如@Niet The Dark Absol所说，您可以使用required，但如果您坚持要添加e.preventdefault以防止表单在发生错误时提交。如果我们可以一瞥您的Javascript函数，我们可以正确地进行详细说明。

想要PHP和＆amp; JS表单（空字段/密码匹配）验证？

3 个答案: