Question

所以基本上我需要验证一个有几种不同元素类型的表单。我需要检查文本框是否输入了值，如果下拉框中选择了一个值等等。在我确定它们是否执行之后，我需要在缺少值的文本字段旁边显示一个红色星号，或者下拉框旁边没有选中值的星号。例如，我简要介绍了我所说的内容。我认为当我的循环到达无线电时会出现问题？非常感谢任何指导！

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>
<style type="text/css">

    .error {
    display: inline;
    color: red;
    }
    </style>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName('p');

function validate()
{

var errorMess = document.getElementById('errFname');

for (i=1;i<5;i++) 
{
var form1 = document.forms['webForm'].elements[i];
var errPar = paragraphs[i-1];
if (!form1.value) 
{
errPar.innerHTML = "Required";
}
else 
{
errPar.innerHTML = "";
form1.value.trim()
}
}
return false;
}

</script>

</head>

<body>
<form name="webForm" action="#" onSubmit="validate()">
<fieldset>
<legend>Legend2</legend>
    input1:<input id="txt1" name="txt1" type="text"/><p class="error"></p>
    input2:<input id="txt2" name="txtl2" id="txtlname" type="text"/><p class="error"></p>
</fieldset>

<fieldset>
<legend>Legend1</legend>
    <input name="radio1" type="radio">radio1
    <input name="radio2" type="radio">radio2<br>      
    input3:<input id="txt3" name="txt1" type="text"><p class="error"></p>
    input4:<input id="txt4" name="txt4" type="text"><p class="error"></p>
</fieldset>
<input name="submit" type="submit">
</form>
</body>
</html>

Answer 1

我对您的代码进行了一些更改，主要用于演示目的。如果您愿意保留它，那也很好。看看我的概念。好像你忘记把你的单选按钮放在一个组中了。

这里是我演示的小提琴（强烈建议您将来使用它来提问） http://jsfiddle.net/pMUX3/2/

function validate() {
var paragraphs = document.getElementsByTagName('p');
var inputs = document.getElementsByTagName('input');
var txtcounter = 0;
var rcounter = 0;
for (i = 0; i < inputs.length; i++) {        
    //for text field
    if (inputs[i].type != null && inputs[i].type == "text") {
        if (inputs[i].value == null || inputs[i].value.trim() == "") {
            paragraphs[(txtcounter<2?txtcounter:txtcounter+2)].innerHTML = "Required";
        } else {
            paragraphs[(txtcounter<2?txtcounter:txtcounter+2)].innerHTML = "";
        }
        txtcounter++;
    }

    //for radio button
    if (inputs[i].type != null && inputs[i].type == "radio") {
        if (!inputs[i].checked) {
            paragraphs[rcounter+2].innerHTML = "Required";
        } else {
            paragraphs[rcounter+2].innerHTML = "";
        }
        rcounter++;
    }
}
}

根据需要使用循环和标签元素验证表单

1 个答案: