将 HTML 表单提交到带有 JS 验证的 PHP 文件

Question

我正在通过 HTML 表单将数据发送到 PHP 文件，以便将其插入到带有 SQL 脚本的数据库中， 使用 JavaScript 函数验证相同的表单。

这两个分别按预期工作， 但是当一起使用时-<form method="POST" action="myPHPFile.php" onsubmit="validationFunc(event)">- 只有验证功能有效，页面不会被重定向到 PHP 文件。

删除 JS 时（仅留下 <form method="POST" action="myPHPFile.php">） - 表单中的数据正确提交，页面按预期重定向到 PHP 文件。

如果输入无效，我需要有一些 JS 函数来停止， 如果输入数据有效，另一个继续并将输入数据发送到 PHP 文件。

示例代码：

function isInputChars(evt) {
  let ch = String.fromCharCode(evt.which);
  if (!(/[a-z,A-Z,-]/.test(ch))) {
    alert("Please only enter only characters")
    evt.preventDefault();
  }
}

function validateForm(event) {
  event.preventDefault();

  var validateFormInputs = [];
  var inputLength;

  StringInput = document.getElementById("city");
  StringInput = StringInput.value;
  inputLength = StringInput.length;
  if (inputLength < 2) {
    alert("City: Please enter at least 2 Characters")
    validateFormInputs.push(false);
  } else {
    validateFormInputs.push(true);
  }

  StringInput = document.getElementById("street");
  StringInput = StringInput.value;
  inputLength = StringInput.length;
  if (inputLength < 2) {
    alert("Street: Please enter at least 2 Characters")
    validateFormInputs.push(false);
  } else {
    validateFormInputs.push(true);
  }

  var x;
  for (var i = 0; i < 2; i++) {
    if (validateFormInputs[i] === false) {
      x = false;
      break;
    } else {
      x = true;
    }
  }

  if (x == true) {
    console.log("Data is sent to DB")
    someFunctionToContinueSendingTheData();
  } else {
    console.log("Data is INVALID")
    someFunctionToStop();
  }
}

<form name="myForm" method="POST" action="sendItem.php" onsubmit="validateForm(event)">
  <input id="city" name="city" type="text" class="form-control" onkeypress="isInputChars(event)" required>
  <input id="street" name="street" type="text" class="form-control" onkeypress="isInputChars(event)" required>
  <input type="submit" class="btn btn-primary btn-lg" value="Publish">
</form>

我很乐意在以下方面提供帮助：

1. 如何将输入数据重定向到 PHP 文件（不移除 JS 验证）
2. 如何实现JS函数发送数据到PHP/cancel。

谢谢！

Answer 1

按钮不是一个提交按钮，而是一个调用您的 javascript 函数的常规按钮。然后，在函数中进行所有验证......最后，您可以有一个条件语句来检查是否满足所有条件。如果是，则提交表格。 （为您的表单分配一个 ID）
看看这个伪代码 让我知道这是否有效或您需要进一步的指导

function validateForm(){
    ... conditional logic ...
    if(all conditions met){
        document.getElementById('form-id').submit();
    }
}

Answer 2

您需要使用 AJAX 向您的 PHP 服务器发送请求很简单 我将向您展示一个简单的示例 要将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法。 你可以使用POST或GET

GET 比POST 更简单、更快捷，可以在大多数情况下使用。 但是，在以下情况下始终使用 POST 请求：

1. 缓存文件不是一个选项（更新服务器上的文件或数据库）。
2. 向服务器发送大量数据（POST 没有大小限制）。
3. 发送用户输入（可能包含未知字符），POST 比 GET 更健壮和安全。

<script type="text/javascript">
    function myFunction() {
    var name = document.getElementById("name").value; // get the name
    var email = document.getElementById("email").value; // get the mail
    var xhttp = new XMLHttpRequest();
    var url = 'test.php'; // your php file
    xhttp.open('POST', url, true); // method =POST
    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  
      // send data
     var params="name="+name+"&email="+email;
        xhttp.onreadystatechange = function() {
        //Call a function when the state changes.
        if(xhttp.readyState == 4 && xhttp.status == 200) {
        alert(xhttp.responseText);
    }
}
        xhttp.send(params);
        }
</script>
<form name="myform" method="POST">
    <input type="text" name="name" id="name">
    <input type="mail" name="email" id="email">                 
    <input class="btn btn-success" type="button" name="conf" value="OK" onclick="myFunction()">
    <input class="btn btn-danger" type="reset" name="cancel" value="cancel">
</form>

Answer 3

您需要对代码进行一些更改：

第一：您可以在提交输入上设置验证功能。

<input type="submit" class="btn btn-primary btn-lg" value="Publish" onclick = "return validateForm();">

第二：你必须在验证函数中返回真或假。

 if (x == true) {
        console.log("Data is sent to DB");
        return true; //input data is valid!
        someFunctionToContinueSendingTheDate();
    } else {
        console.log("Data is INVALID")
        someFunctionToStop();
        return false; //input data is invalid!
    }

最后：你来了：

HTML：

<form name="myForm" method="POST" action="sendItem.php">
<input id="city" name="city" type="text" class="form-control" onkeypress="isInputChars(event)" required>
<input id="street" name="street" type="text" class="form-control" onkeypress="isInputChars(event)" required>
<input type="submit" class="btn btn-primary btn-lg" value="Publish" onclick="return validateForm();"></form>

JS：

<script>
function isInputChars(evt) {
    let ch = String.fromCharCode(evt.which);
    if (!(/[a-z,A-Z,-]/.test(ch))) {
        alert("Please only enter only characters")
        evt.preventDefault();
    }
}

function validateForm() {

    var validateFormInputs = [];
    var inputLength;

    StringInput = document.getElementById("city");
    StringInput = StringInput.value;
    inputLength = StringInput.length;
    if (inputLength < 2) {
        alert("City: Please enter at least 2 Characters")
        validateFormInputs.push(false);
    } else {
        validateFormInputs.push(true);
    }

    StringInput = document.getElementById("street");
    StringInput = StringInput.value;
    inputLength = StringInput.length;
    if (inputLength < 2) {
        alert("Street: Please enter at least 2 Characters")
        validateFormInputs.push(false);
    } else {
        validateFormInputs.push(true);
    }

    var x;
    for (var i = 0; i < 2; i++) {
        if (validateFormInputs[i] === false) {
            x = false;
            break;
        } else {
            x = true;
        }
    }

    if (x == true) {
        console.log("Data is sent to DB");
        return true;
        someFunctionToContinueSendingTheDate();
    } else {
        console.log("Data is INVALID")
        someFunctionToStop();
        return false;
    }
}</script>