HTML表单必填字段
[英]HTML Form required fields
问题描述
I have this JS Code: 
我有这个JS代码：
function validateForm() {
var x=document.forms["myForm"]["name"].value;
if (x==null || x=="")
{
alert("Name must be filled out");
return false;
}
var y=document.forms["myForm"]["password"].value;
if (y==null || y=="") {
alert("Password name must be filled out");
return false;
}
}
and this HTML: 和这个HTML：
<form action="page.php" method="post">
Name*: <input type="text" name="name"> <br>
Password*: <input type="password" name="password"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>
How can i make my javascript code work on all forms where input class="required" 如何在输入class="required"所有表单上使用我的javascript代码
3 个解决方案
解决方案1
1 2014-07-06 20:25:58
I fixed your html code and it validates before moving onto the PHP page 我修复了您的html代码，并在进入PHP页面之前进行了验证
you had a bug in your form - you forgot to add the form name "myform" so it wasnt getting the values until i added this because the javascript didnt know where to get the value from and i added a value named "good" which if it is false, everything else is false and it doesnt return values to the php server 您的表单中有一个错误-您忘记添加表单名称“ myform”，因此直到我添加此表单之前它都没有获取值，因为javascript不知道从何处获取该值，并且我添加了一个名为“ good”的值，如果这是错误的，其他所有内容都是错误的，并且不会将值返回到php服务器
Hope this helps 希望这可以帮助
<html>
<head>
<script type="text/javascript">
function validate_Form() {
var x=document.forms["myForm"]["name"].value;
var good = new Boolean(true);
if (x==null || x=="")
{
alert("Name must be filled out");
good = false;
}
var y=document.forms["myForm"]["password"].value;
if (y==null || y=="")
{
alert("Password name must be filled out");
good = false;
}
return good
}
</script>
</head>
<body>
<form name="myForm" action="page.php" method="post" onsubmit="return validate_Form()">
Name*: <input type="text" name="name"> <br>
Password*: <input type="password" name="password"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
解决方案2
0 2014-07-06 15:28:46
This would work for you. 这将为您工作。 You would need to change name_id and password_id to your id's for those elements. 您需要将name_id和password_id更改为这些元素的ID。 Than you can get the classname and check to see if it equals required. 然后您可以获得类名，然后检查它是否等于要求。
function validateForm() {
var name = document.getElementById('name_id').className;
var x = document.forms["myForm"]["name"].value;
if (name == "required") {
if (x == null || x == "")
{
alert("Name must be filled out");
return false;
}
}
var password = document.getElementById('password_id').className;
var y = document.forms["myForm"]["password"].value;
if (password == "required") {
if (y == null || y == "") {
alert("Password name must be filled out");
return false;
}
}
}
The way to do it all by class would be something like this: 按类完成所有操作的方法如下：
<script>
function validateForm() {
var x = document.getElementsByClassName('required');
for(var i = 0; i < x.length; i++){
if (x[i].value == null || x[i].value == "")
{
alert("Field must be filled out");
return false;
}
}
}
</script>
<form>
Name*: <input type="text" name="name" class="required"> <br>
Password*: <input type="password" name="password" class="required"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit" onclick="validateForm();return false;">
</form>
解决方案3
0 2014-07-06 15:29:01
Try this: 尝试这个：
function CheckRequired(){
var AllInputs = document.getElementsByTagName('input');
for(var i = 0; i < AllInputs.length; i++){
if (AllInputs[i].getAttribute('class') === 'required' && AllInputs[i].Value = "")
{
return false;
alert('Please fill out all required fields');
}
}
}
<form method="POST">
<input type="submit" value="Submit" onclick="return CheckRequired();">
</form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.