运行基于 PHP 验证和表单提交的 JavaScript 函数

Question

我已经使用 PHP 进行了 php 验证和表单设置。因此，如果有人忘记了用户名，验证将添加到错误数组中，并在提交时显示在页面上。现在，我不想为错误显示一些文本（用户名不能为空），我只希望输入框以红色突出显示，我知道它需要 JavaScript。我在正确运行这个 JavaScript 函数时遇到了一些问题。下面是代码。

JavaScript：

<script type="text/javascript">
function myFunction() {
document.getElementById("usernameformitem").className = "formerror";
}
</script>

PHP：

if (isset($_POST['submit'])) {

$required_fields = array("username");

function validate_presences($required_fields) {
global $errors;

foreach($required_fields as $field) {
    //the $value is now the un/pw without whitespaces 
    $value = trim($_POST[$field]);
    //if the value does not exist/is blank
    if (!has_presence($value)) {
        //remember field is really un or pw
        $errors[$field] = fieldname_as_text($field) . " can't be blank";
        echo "<script>";
        echo "myFunction();";
        echo "</script>";
    }
  }
}


validate_presences($required_fields);

HTML：

<form action="new_user4.php" method="post">
<div id="usernameformitem">
  <p>Username:
    <input type="text" name="username" value="" />
 </p>
 </div>

  <input type="submit" name="submit" value="Create User" />
</form>

提前致谢！

Answer 1

在调用函数之前确保div存在，例如在div之后回显脚本或使用

window.onload=function() { if (myFunction) myFunction(); }

FIDDLE

但是为什么还要提交表单呢？

window.onload=function() { 
  document.getElementById("form1").onsubmit=function() {
    if (this.username.value="") {
      myFunction();
      return false; // stop submission
    }
    return true;
  }
  <?PHP if (!has_presence($value)) { ....  ?>
  if (myFunction) myFunction();
  <?PHP } ?>
}

PS：永远不要调用表单元素name="submit" - 它会阻止你通过脚本提交

Answer 2

在php的if提交区域下面，我附和了

echo "<script type=\"text/javascript\">";
echo "function myFunction() {";
echo "document.getElementById(\"usernameformitem\").className =    \"formerror2\";";
echo "}";
echo "</script>";  

然后，在我试图影响的 div 下的 HTML 中，我输入：

<script>
    window.onload=function() { if (myFunction) myFunction(); }
 </script>

我遇到的唯一问题是必须在内部设置样式。我不确定如何从我的外部 CSS 中提取它。

非常感谢 mplungjan！