[英]Form validation in javaScript not working
I am trying to validate the form using javascript, but I'm unable to get correct output. 我正在尝试使用javascript验证表单,但无法获得正确的输出。 I have done everything correctly, but I don't know what the problem is with my code.
我已经正确地完成了所有操作,但是我不知道我的代码出了什么问题。 following is the program.
以下是程序。 Insert title here function formValid() {
在此处插入标题函数formValid(){
var fname=document.getElementsByName("fname").value;
var lname=document.getElementsByName("lname").value;
var uid=document.getElementsByName("uid").value;
var pass=document.getElementsByName("pass").value;
var ftype=document.getElementsByName("ftype").value;
var dep=document.getElementsByName("dep").value;
var mnum=document.getElementsByName("mnum").value;
var cpass=document.getElementsByName("cpass").value;
var email=document.getElementsByName("email").value;
if(fname==null && lname==null)
{
alert("Enter Your name ");
return false;
}
if(uid==null)
{
alert("Enter your user ID");
return false;
}
if(pass==null && cpass==null)
{
alert("Enter password");
return false;
}
if(pass!=cpass)
{
alert("Password doesnt match");
return false;
}
if(ftype==null)
{
alert("Select faculty type");
return false;
}
if(dep==null)
{
alert("select department ");
return false;
}
if(mnum==null)
{
alert("Enter your Mobile number");
return false;
}
if(email==null)
{
alert("Enter your email number");
return false;
}
}
</script>
<center>
<font size="6%" >Collage Managment System</font>
<hr width="90%">
<form action="Form" method="post" name="myForm" onsubmit="return formValid();">
<div id=container>
<table>
<tr><td>
First Name</td><td>:<input type="text" name="fname">
</td></tr>
<tr><td>
Last Name</td><td>:<input type="text" name="lname">
</td></tr>
<tr><td>
User ID</td><td>:<input type="text" name="uid">
</td></tr>
<tr><td>
Password</td><td>:<input type="password" name="pass">
</td></tr>
<tr><td>
Confirm Password</td><td>:<input type="password" name="cpass">
</td></tr>
<tr><td>
Faculty Type</td><td>:<select name="ftype">
<option>Select</option>
<option>HOD</option>
<option>Assistant Proffesor</option>
</select>
</td></tr>
<tr><td>
Deparment</td><td>:<select name="dep">
<option>Select</option>
<option>CSE</option>
<option>EC</option>
<option>ME</option>
<option>CIVIL</option>
</select>
</td></tr>
<tr><td>
Mobile Number</td><td>:<input type="text" name="mnum">
</td></tr>
<tr><td>
E-mail</td><td>:<input type="text" name="email">
</td></tr>
</table>
<input type="reset" value="reset"><input type="submit" value="Register" >
</div>
</form>
</center>
</body>
</html>
In the above code in javascript if the first condition is executed when the data is empty, but the problem is that when I enter something in the text box it is still showing the alert. 在上面的javascript代码中,如果在数据为空时执行第一个条件,但是问题是当我在文本框中输入内容时,它仍显示警报。 Check and tell me my mistake.... Thanks
检查并告诉我我的错误。
@Saleem You need following changes in your markup and script @Saleem您需要在标记和脚本中进行以下更改
fname will be nodeList Object since you are using getElementsByName use nodeList index to get value of individual node object or input text element in your case. 因为您使用的是getElementsByName,所以fname将是nodeList对象,在您的情况下,请使用nodeList索引获取单个节点对象或输入文本元素的值 。
var fname = document.getElementsByName("fname")[0].value;
Only you need to add fname == "" this will check value of text field or dropdown is blank or not in addition to fname == null 只有您需要添加fname ==“”,这将检查文本字段的值,或者除了fname == null之外,下拉列表是否为空
if ((fname == null || fname == "") && (lname == null || lname == "")) { alert("Enter Your name "); return false;
}
}
To get value of dropdown element you should adopt below changes to your script and html 为了获得dropdown元素的价值, 您应该对脚本和html进行以下更改
var ftype =document.getElementsByName("ftype")[0][document.getElementsByName("ftype")[0].selectedIndex].value;
Add option values for dropdown elements: 为下拉元素添加选项值 :
<select name="ftype"> <option value="">Select</option> <option value="HOD">HOD</option> <option value="Assistant Proffesor">Assistant Proffesor</option> </select>
<select name="dep"> <option value="">Select</option> <option value="CSE">CSE</option> <option value="EC">EC</option> <option value="ME">ME</option> <option value="CIVIL">CIVIL</option> </select>
See complete working example on JSFiddle http://jsfiddle.net/aaadesh/RaXZA/ 请参阅JSFiddle上的完整工作示例http://jsfiddle.net/aaadesh/RaXZA/
The getElementsByName()
function returns a NodeList object. getElementsByName()
函数返回一个NodeList对象。 You can't directly fetch the value from that object. 您不能直接从该对象获取值。 Instead:
代替:
var fname=document.getElementsByName("fname")[0].value;
If you're not 100% sure that the named elements exist, you want to make sure that the value returned — the NodeList, that is — really has one element in it: 如果您不是100%确定命名的元素存在,则要确保返回的值(即NodeList)中确实包含一个元素:
var list = document.getElementsByName("fname");
var fname = list.length == 1 ? list[0] : null;
getElementsByName Returns the array of elements whoose name is specified as argument
So you have to specify index to use the value. 因此,您必须指定索引才能使用该值。
For ex : 对于前:
var ele = document.getElementsByName("fname");
//ele[0] is the first element
// and its value is ele[0].value
However getElementsByName
may not be supported in older browsers 但是,旧版浏览器可能不支持
getElementsByName
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.