简单的JavaScript验证不起作用？

Question

Not sure why this isn't working. 不知道为什么这不起作用。

<!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>

So it should change the color of the borders to red if the input is incorrect( or empty), and inform the user in a div. 因此，如果输入不正确（或为空），则应将边框的颜色更改为红色，并在div中通知用户。 For some reason, the code is always submitting without recognizing the errors. 由于某些原因，代码始终在提交时没有识别出错误。 Also I'm a beginner at JavaScript (and html) so if anyone has any input on improving this code it would be appreciated. 我也是JavaScript（和html）的初学者，因此，如果有人对改进此代码有任何投入，将不胜感激。

EDIT: Apologies. 编辑：道歉。 I uploaded the wrong version of the code the testval function was only there to check if the onsubmit was working correctly, and the validate function is now called onsubmit, which is where/when it should be but is not working. 我上载了错误版本的代码，testval函数仅在此处检查onsubmit是否正常工作，并且validate函数现在称为onsubmit，这是应该/何时应该起作用但不起作用的地方。

EDIT 2: Thank you for your help on the format and correct tag use. 编辑2：感谢您在格式和正确使用标签方面的帮助。 I have edited it as to your recommendations, however the actual validating (function) is still not working, despite the inclusion of quotation marks. 我已根据您的建议对其进行了编辑，但是尽管包含引号，但实际的验证（功能）仍无法正常工作。

references: 参考资料：

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

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

Answer 1

Look at your console errors. 查看您的控制台错误。

First is a typo in testVal - "retrun" instead of "return" . 首先是testVal中的错字- "retrun"而不是"return" 。

Next up, strings need to be quoted so x.style.borderColor = #FF0000; 接下来，需要用字符串将双引号引起来，所以x.style.borderColor = #FF0000; needs to be x.style.borderColor = "#FF0000"; 需要为x.style.borderColor = "#FF0000";

Beyond that, you don't actually seem to be calling validate() in the code provided. 除此之外，您似乎并没有在提供的代码中调用validate() 。 Also, look into using the placeholder attribute for input elements, or - possibly more appropriate - the label element, rather than your approach of putting the label inside the value of each input. 另外，请考虑将placeholder属性用于input元素，或者-可能更合适- label元素，而不是将标签放置在每个输入值内的方法。

Answer 2

You gave the same name x for JavaScript variables. 您为JavaScript变量指定了相同的名称x 。 I also fixed your form a little. 我也修复了您的表格。

Some suggestions: 一些建议：

The \\n in a.innerHTML += "Some string\\n" doesn't work. 该\\n在a.innerHTML += "Some string\\n"不起作用。 Use "<br />" instead 使用"<br />"代替
Different names for different variables please 请为不同的变量使用不同的名称
Use the placeholder attribute instead of value to suggest the user 使用placeholder属性而不是value来建议用户
Use the message variable to hold the error message instead of setting the innerHtml directly because Javascript uses Pass By Value (see reference ) 使用message变量来保存错误消息，而不是直接设置innerHtml ，因为Javascript使用“按值传递”（请参阅参考资料）
When you get more acquainted with Javascript, you would want to learn jQuery . 当您更熟悉Javascript时，您将想学习jQuery 。 It provides a great API for easier time coding as well as make Html traversal, event handling and Ajax much simpler. 它提供了一个出色的API，可以简化时间编码，并使Html遍历，事件处理和Ajax更加简单。 http://www.w3schools.com/jquery/default.asp is a great place to learn jQuery. http://www.w3schools.com/jquery/default.asp是学习jQuery的好地方。

Fixed Javascript and Html: 固定的Javascript和HTML：

 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; } }

 <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>

简单的JavaScript验证不起作用？

问题描述

2 个解决方案

解决方案1
4 2016-04-03 15:01:23

解决方案2
2 已采纳 2016-04-03 15:05:04

简单的JavaScript验证不起作用？

问题描述

2 个解决方案

解决方案1 4 2016-04-03 15:01:23

解决方案2 2 已采纳 2016-04-03 15:05:04

解决方案1
4 2016-04-03 15:01:23

解决方案2
2 已采纳 2016-04-03 15:05:04