Javascript form validation dom selector

Question

我在将名为"color"的文本输入字段链接到条件语句时遇到问题。这是我的香草JS代码。

function validateForm(form) {
var x = document.forms["myForm"]["color"].value;
if (x === "red") {
alert("Guess again!");
return false;
}
}

这是 HTML 表单。

<form name: "myForm" action="http://www.severien.com/grit/formecho.php" target="_blank" method="POST" onsubmit="return validateForm(this)">
<fieldset>
<legend>Personal Info:</legend>
First Name:
<br><input class="input" type="text" name="firstname" required min="2" maxlength="20"><br> Last Name:
<br><input class="input" type="text" name="lastname" required min="2" maxlength="20"><br> Color:
<br><input class="input" type="text" name="color" maxlength="20"> <br><b>
Money</b> in my pocket:<br> <input type="number" name="money" required max="1000000"><br>
<input type="submit" value="Submit">
</fieldset>
</form>

Answer 1

您的form的name属性输入错误，它必须name="myForm"，而不是name: "myForm"。

function validateForm(form) {
var x = document.forms["myForm"]["color"].value;
if (x === "red") {
alert("Guess again!");
return false;
}
}

<form name="myForm" action="http://www.severien.com/grit/formecho.php" target="_blank" method="POST" onsubmit="return validateForm(this)">
<fieldset>
<legend>Personal Info:</legend>
First Name:
<br><input class="input" type="text" name="firstname" required min="2" maxlength="20"><br> Last Name:
<br><input class="input" type="text" name="lastname" required min="2" maxlength="20"><br> Color:
<br><input class="input" type="text" name="color" maxlength="20"> <br><b>
Money</b> in my pocket:<br> <input type="number" name="money" required max="1000000"><br>
<input type="submit" value="Submit">
</fieldset>
</form>