I'm trying to make a form, so far so good except the validation isn't lighting up when ever I purposely let it blank or put a space. I put "required" in the HTML which does a portion of what I wanted it to do. Here's the javascript function:
我正在尝试制作一个表格,到目前为止一直很好,除非验证没有点亮,因为我故意让它空白或放置一个空格。我在HTML中添加了“required”,这是我想要它做的一部分。这是javascript函数:
function validateForm() {
var x = document.forms["form"]["fname"].value;
var a = document.forms["form"]["lname"].value;
var b = document.forms["form"]["abbr"].value;
var c = document.forms["form"]["city"].value;
var d = document.forms["form"]["prov"].value;
var e = document.forms["form"]["postal"].value;
var f = document.forms["form"]["phoneNum"].value;
var g = document.forms["form"]["cellphone"].value;
var h = document.forms["form"]["email"].value;
var i = document.forms["form"]["dob"].value;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
if (c == null || c == "") {
document.getElementById("hidecity").hidden=false;
if (c == null || c == "") {
document.getElementById("hidecity").hidden=false;
if (d == null || d == "") {
document.getElementById("hideprov").hidden=false;
if (e == null || e == "") {
document.getElementById("hidepost").hidden=false;
if (f == null || f == "") {
document.getElementById("hidephone").hidden=false;
if (g == null || g == "") {
document.getElementById("hidecell").hidden=false;
if (h == null || h == "") {
document.getElementById("hideemail").hidden=false;
if (i == null || i == "") {
document.getElementById("hidedob").hidden=false;
}
}
}
}
}
}
}
}
}
return false;
}
And here's the HTML
这是HTML
<form name="form" action="form.php" method="POST" onsubmit="return validateForm()">
<font color="red" id="hidestar" hidden=true>*</font>Name: <input type="text" name="fname" required>
<font color="red" id="hidelast" hidden=true>*</font>Last Name: <input type="text" name="lname" required><br><br>
<font color="red" id="hideaddr" hidden=true>*</font>Address: <input type="text" name="addr" required><br><br>
<font color="red" id="hidescity" hidden=true>*</font>City: <input type="text" name="city" required>
<font color="red" id="hideprov" hidden=true>*</font>Prov: <input type="text" name="prov" required><br><br>
<font color="red" id="hidepost" hidden=true>*</font>Postal Code: <input type="text" name="postal" required><br><br>
<font color="red" id="hidephone" hidden=true>*</font>Phone Number: <input type="text" name="phoneNum" required>
<font color="red" id="hidecell" hidden=true>*</font>Cell Number: <input type="text" name="Cellphone" required><br><br>
<font color="red" id="hideemail" hidden=true>*</font>Email: <input type="text" name="email" required><br><br>
<font color="red" id="hidedob" hidden=true>*</font>DoB: <input type="text" id="newsl" name="dob" required><br/><br/>
<font color="red" id="hidenews" hidden=true>*</font>Newsletter: yes: <input type="radio" id="newsl" name="newsletter" value="1">
no: <input type="radio" id="newsl" name="newsletter" value="0"><br><br>
<font color="red" id="hidevol" hidden=true>*</font>Volunteer:yes: <input type="radio" id="voll" name="volunteer" value="1">
no: <input type="radio" id="voll" name="volunteer" value="0"><br><br>
<font color="red" id="hidecrim" hidden=true>*</font>Criminal Record: yes: <input type="radio" id="criml" name="criminalrecord" value="1">
no: <input type="radio" id="criml" name="criminalrecord" value="0"><br><br>
<input type="submit" name="submit">
2 个解决方案
#1
0
I made a fast example how your code could look.
我快速举例说明了代码的外观。
https://jsfiddle.net/8kn2hgtz/
- formatted your html
- the asteriks is now css
- the validation is annotation is way simpler
It can be improved and extended, and jQuery would also provide you some methods that seem to simplify some tasks, ...
but for a first impression i decided to stay with some simple lines of code (pure html, js and css)
它可以改进和扩展,jQuery也会为你提供一些似乎简化某些任务的方法,但是对于第一印象我决定留下一些简单的代码行(纯html,js和css)
Your code doesn't contain some real validation; so I didn't implement one either.
Search on google or on * for some libraries that make your life simple at this task.
您的代码不包含一些真正的验证;所以我也没有实现。在谷歌或*上搜索一些使您的生活变得简单的库。
#2
0
Working with the code you've got, you should un-nest all all the if statements so that they all get executed.
使用您已获得的代码,您应该取消所有if语句的嵌套,以便它们都被执行。
Then, you should keep track of the overall result - you could mess about with AND's and OR's but the simplest is to have one boolean which gets modified as you go along, e.g.
然后,你应该跟踪整体结果 - 你可能会混淆AND和OR,但最简单的是有一个布尔值,随着你的进行修改,例如
var isValid = true;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
isValid = false;
}
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
isValid = false;
}
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
isValid = false;
}
...
and so on until the end where you simply return isValid.
依此类推,直到你只需返回isValid。
#1
0
I made a fast example how your code could look.
我快速举例说明了代码的外观。
https://jsfiddle.net/8kn2hgtz/
- formatted your html
- the asteriks is now css
- the validation is annotation is way simpler
It can be improved and extended, and jQuery would also provide you some methods that seem to simplify some tasks, ...
but for a first impression i decided to stay with some simple lines of code (pure html, js and css)
它可以改进和扩展,jQuery也会为你提供一些似乎简化某些任务的方法,但是对于第一印象我决定留下一些简单的代码行(纯html,js和css)
Your code doesn't contain some real validation; so I didn't implement one either.
Search on google or on * for some libraries that make your life simple at this task.
您的代码不包含一些真正的验证;所以我也没有实现。在谷歌或*上搜索一些使您的生活变得简单的库。
#2
0
Working with the code you've got, you should un-nest all all the if statements so that they all get executed.
使用您已获得的代码,您应该取消所有if语句的嵌套,以便它们都被执行。
Then, you should keep track of the overall result - you could mess about with AND's and OR's but the simplest is to have one boolean which gets modified as you go along, e.g.
然后,你应该跟踪整体结果 - 你可能会混淆AND和OR,但最简单的是有一个布尔值,随着你的进行修改,例如
var isValid = true;
if (x == null || x == " ") {
document.getElementById("hidestar").hidden=false;
isValid = false;
}
if (a == null || a == "") {
document.getElementById("hidelast").hidden=false;
isValid = false;
}
if (b == null || b == "") {
document.getElementById("hideaddr").hidden=false;
isValid = false;
}
...
and so on until the end where you simply return isValid.
依此类推,直到你只需返回isValid。