我正在设计一个允许个人资料注册的电子商店。我需要对注册表进行Javascript和PHP验证。(因此，当任何字段为空时，我需要收到一条弹出消息，让我知道哪个特定字段为空 + 在必填字段旁边的屏幕上显示一条视觉消息，以告知用户他们需要纠正问题的地方(
到目前为止，它不起作用，因为我的 JS 验证表单在提交时激活并且我的 PHP 正在操作。我意识到提交在操作之前激活，因此不允许"操作"通过。
我尝试将其从"操作"更改为"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;
}
}
<input type="text" name="firstName"required>你不需要任何JavaScript。
此外：
<form action="" method="post">
如果要发回当前页面，则无需指定action。如果您不小心，使用$_SERVER['PHP_SELF']可能是一个漏洞，如果您有"漂亮的 URL"，也会破坏它们。
正如@Niet The Dark Absol所说，您可以使用required但如果您坚持可以添加e.preventdefault以防止表单在出现错误时提交。如果我们能瞥见你的Javascript函数，我们可以适当地阐述。
您应该更改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(( 这是为了防止在出现错误时提交表单。