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

时间:2015-07-05 15:25:50

标签: javascript php css

我已经使用PHP进行了php验证和表单设置。因此,如果有人忘记用户名,验证将添加到errors数组并在提交时显示在页面上。现在,我没有为错误显示一些文本(用户名不能为空),我只想让输入框以红色突出显示,我知道需要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>

提前致谢!

2 个答案:

答案 0 :(得分:0)

在调用函数之前确保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" - 它会阻止您通过脚本提交

答案 1 :(得分:0)

在php的if submit区域下,我回应

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!