Question

不确定为什么这不起作用。

<!DOCTYPE html>

<html>
<head>
    <title>Player 1</title>
    <link rel="stylesheet" type="text/css" href="playerOne.css">
</head>
<body>
    <div id="heading">
        <h>Player 1</h> 
    </div>
    <form name="playerInfo" onsubmit="return validate()" method="post">
    <hr>
        <fieldset>
            <legend>Personal information:</legend>
            <label id="inPID">Player ID:</label>
            <br>
            <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus >
            <br>
            <br>
            <label id="inFN">First name:</label>
            <br>
            <input type="text" name="firstname" class="input" id="fname" placeholder="First name" >
            <br>
            <br>
            <label id="inLN">Last name:</label>
            <br>
            <input type="text" name="lastname" class="input" id="sname" placeholder="Last name" >
            <br>
            <br>
            <label id="inEA">Email address:</label>
            <br>
            <input type="text" name="email" class="input" id="email" placeholder="Email address">
            <br>
            <br>
            <label id="inPW">Password:</label>
            <br>
            <input type="password" name="password" class="input" id="pass" >
            <br>
            <br>
            <input type="submit" value="Validate" class="input" id="validate" >

        </fieldset>
    <hr>
    </form>
    <div id="error"></div>

    <script>
    function testVal(){
        return false;
    }


    function validate() {
        var message;
        var test = true;
        message = document.getElementById("error");
        message.innerHTML += "";

        var x = document.getElementById("id");
        if(x.value == ""|| x.value == null||x.value== "Player ID") {
            x.style.backgroundColor = "#FF0000";
            message.innerHTML += "Player ID is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("fname");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "First name is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("sname");
        if(x.value == "") {
            x.style.borderColor ="#FF0000";
            message.innerHTML += "Surname is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("email");
        if(x.value == "") {
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Email is missing\n";
            test = false;
        }else{

        }
        var x = document.getElementById("pass");
        if(x.value == ""){
            x.style.borderColor = "#FF0000";
            message.innerHTML += "Password is missing\n";
            test = false;
        }else{

        }
        return test;
    }
    </script>

</body>

因此，如果输入不正确（或为空），它应该将边框的颜色更改为红色，并在div中通知用户。出于某种原因，代码始终在不识别错误的情况下提交。我也是JavaScript（和html）的初学者，所以如果有人对改进这段代码有任何意见，我们将不胜感激。

编辑：道歉。我上传了错误版本的代码，testval函数只在那里检查onsubmit是否正常工作，现在调用的函数是onsubmit，这是应该在哪里/何时但是不起作用。

编辑2：感谢您对格式和正确使用标签的帮助。我已根据您的建议对其进行了编辑，但实际的验证（功能）仍然无效，尽管包含了引号。

的引用：

http://www.w3schools.com/js/js_validation.asp

http://www.tutorialspoint.com/javascript/javascript_form_validations.htm

Answer 1

查看您的控制台错误。

首先是testVal中的拼写错误 - "retrun"而不是"return"。

接下来，需要引用字符串，因此x.style.borderColor = #FF0000;需要x.style.borderColor = "#FF0000";

除此之外，您实际上似乎并未在提供的代码中调用validate()。另外，请考虑使用placeholder元素的input属性，或者 - 可能更合适 - label元素，而不是将标签放在每个输入的值中。< / p>

Answer 2

您为JavaScript变量指定了相同的名称x。我还修改了你的表格。

一些建议：

\n中的a.innerHTML += "Some string\n"无效。请改用"<br />"
请提供不同变量的不同名称
使用placeholder属性代替value来建议用户
使用message变量来保存错误消息，而不是直接设置innerHtml，因为Javascript使用Pass By Value（请参阅reference）
当您越来越熟悉Javascript时，您会想要学习jQuery。它提供了一个很好的API，可以更轻松地编写时间，并使Html遍历，事件处理和Ajax更加简单。 http://www.w3schools.com/jquery/default.asp是学习jQuery的好地方。

修正了Javascript和Html：

＆＃13;

function validate() {
  var message = "";
  var test = true;

  var id = document.getElementById("id");
  if (id.value == "" || id.value == null) {
    id.style.backgroundColor = "#FF0000";
    message += "Player ID is missing<br />";
    test = false;
  } else {

  }
  var fname = document.getElementById("fname");
  if (fname.value == "" || fname.value == null) {
    fname.style.borderColor = "#FF0000";
    message += "First name is missing<br />";
    test = false;
  } else {

  }
  var sname = document.getElementById("sname");
  if (sname.value == "" || sname.value == null) {
    sname.style.borderColor = "#FF0000";
    message += "Surname is missing<br />";
    test = false;
  } else {

  }
  var email = document.getElementById("email");
  if (email.value == "" || email.value == null) {
    email.style.borderColor = "#FF0000";
    message += "Email is missing<br />";
    test = false;
  } else {

  }
  var x = document.getElementById("pass");
  if (x.value == "" || x.value == null) {
    x.style.borderColor = "#FF0000";
    message += "Password is missing<br />";
    test = false;
  } else {

  }
  if (test == true) {
    document.alert("OK");
    // document.getElementById("frmPlay").submit();
  } else {
    document.getElementById("error").innerHtml = message;
  }
}

＆＃13;

<form name="playerInfo" onsubmit="validate()" method="post" id="frmPlay">
  <hr>
  <fieldset>
    <legend>Personal information:</legend>
    <label>Player ID:</label>
    <br>
    <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus>
    <br>
    <br>
    <label>First name:</label>
    <br>
    <input type="text" name="firstname" class="input" id="fname" placeholder="First name">
    <br>
    <br>
    <label>Last name:</label>
    <br>
    <input type="text" name="lastname" class="input" id="sname" placeholder="Last name">
    <br>
    <br>
    <label>Email address:</label>
    <br>
    <input type="text" name="email" class="input" id="email" placeholder="Email address">
    <br>
    <br>
    <label>Password:</label>
    <br>
    <input type="password" name="password" class="input" id="pass">
    <br>
    <br>
    <input type="submit" value="Validate" class="input" id="validate">

  </fieldset>
  <hr>
</form>

<div id="error"></div>

＆＃13;

简单的JavaScript验证不起作用？

2 个答案: