我试图在form标记内输入两个输入，如果您将其中任何一个留空，则会显示错误消息。
我去了w3schools并尝试了他们的代码，但它不起作用。 （见下文）
HTML
<form name="myForm" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
的js
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
我从代码中删除了action="demo_form.asp"，因为我的老师告诉我
这是我的代码
HTML
<div class="loginShite">
<form name="username" onsubmit="return validateForm()" method="post">
<input type="text" name="username" placeholder="@Username" />
<input type="password" name="password" placeholder="Password" />
<br />
</form>
<div class="loginButton">
<a href="#homePage">
<input type ="button" value="login" />
</a>
</div>
</div>
的js
function validateForm() {
var x = document.forms["username"]["password"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
我非常感谢有人可以告诉我我做错了什么或指出我正确的方向来解决问题。
提前谢谢。
答案 0 :(得分：0)
您的按钮类型应为“submit”，并且应位于</form>标记内。
请参阅表单标记名称，并查看JavaScript如何从表单标记中获取值。
<强>更新
<!doctype html>
<html>
<script type="text/javascript">
function validateForm() {
var x = document.yourFormName.username.value;
var y = document.yourFormName.password.value;
if (x == "" || y == "" )
{
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="yourFormName" onsubmit="return validateForm(this.form)" method="post">
<input type="text" name="username" placeholder="@Username" />
<input type="password" name="password" placeholder="Password" />
<a href="#homePage"><input type ="submit" value="login" /></a>
</form>
</body>
</html>
答案 1 :(得分：0)
使用type="submit"代替使用type="button"，它可以正常使用
<head>
<script>
function validateForm() {
var x = document.forms["username"]["password"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<div class="loginShite">
<form name="username" onsubmit="return validateForm()" method="post">
<input type="text" name="username" placeholder="@Username" />
<input type="password" name="password" placeholder="Password" /> <br
/>
<div class="loginButton"><a href="#homePage">
<input type ="submit" value="login" /></a></div> </a></div>
</form>
</div>
</body>
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<script>
function validate(evt){
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode( key );
var regex = /[0-9]|\./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
}
}
function validateForm(){
var fname = document.getElementById("fname").value;
if(fname == ""){
alert("Please Enter first name");
return false;
}
var lname = document.getElementById("lname").value;
if(lname == ""){
alert("Please Enter last name");
return false;
}
var mnumber = document.getElementById("mnumber").value;
if(mnumber == ""){
alert("Please Enter Mobile no");
return false;
}
if((mnumber.length <10)){
alert("Please Enter 10 DIGIT mobile no");
return false;
}
if((mnumber.length >10)){
alert("Please Enter 10 DIGIT mobile no");
return false;
}
var message = document.getElementById("message").value;
if(message == ""){
alert("Please Enter Message");
return false;
}
}
</script>
</head>
<body>
<form onsubmit="return validateForm()" name="form" id="form" action="" method="post">
<input type="text" name="fname" id="fname" placeholder="fname" />
<br />
<input type="text" name="fname" id="lname" placeholder="lname" />
<br />
<input type="text" name="mnumber" id="mnumber" placeholder="mnumber" onkeypress="validate(event)" />
<br />
<input type="text" name="message" id="message" placeholder="message" />
<br />
<input type="submit" value="Submit">
</form>
</html>
</body>
答案 3 :(得分：0)
这就是我的做法。您需要确保按钮的输入类型为“提交”，否则表单不会将其视为触发提交。那么您需要使用||条件测试两个字段条件是否为空白。您可以通过添加trim（）方法来确保其安全性，以避免任何意外的空白被接受
这是HTML
<form onsubmit="return validate()" action="" class="form-group">
<div style="margin-top:2%">
<div class="col-md-4"> // bootstrap
<input type="text" id="uname" placeholder="user name"><br>
<input type="password" id="pass" placeholder="password"><br>
<input type="submit" class="btn btn-primary"><br><br>
<p id="demouname"></p>
<p id="succesuname"></p>
</div>
</div>
这是JS
function validate() {
var username = document.getElementById("uname");
var password = document.getElementById("pass");
if (username.value.trim() == "" || password.value.trim() == "") {
document.getElementById("demouname").style.display = "block";
document.getElementById("demouname").innerHTML = "No Empty Values Allowed";
return false;
} else {
document.getElementById("succesuname").style.display = "block";
document.getElementById("succesuname").innerHTML = "Success";
true;
}
}
和一些用于添加样式的基本CSS
#demouname {
display: none;
padding: 10px;
border: solid red 1px;
background-color: rgba(250, 232, 232, 0.2);
color: red;
border-radius: 5px;
-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
#succesuname {
display: none;
padding: 10px;
border: solid green 1px;
background-color: rgba(251, 252, 251, 0.521);
color: green;
border-radius: 5px;
-webkit-animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: shadow-drop-2-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
}
@-webkit-keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.35);
}
}
@keyframes shadow-drop-2-center {
0% {
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
100% {
-webkit-transform: translateZ(50px);
transform: translateZ(50px);
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}
}
答案 4 :(得分：0)
实际上，您要做的只是将required放在第一个input标记的末尾。例如：
<form>
<input type=“text” required>some text</input>
<!—-some other input—->
<input type=button>submit</input>
</form>
我认为应该可以。