Question

我已经找到了如何获取警报框但它似乎跳过了我的其他验证，这是检查其他领域，等等，任何想法也是为什么它滑雪？这真的很有帮助！我是Javascript和HTML的新手，所以你能解释一下，谢谢

<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
    var result = true;
    var msg = "";
    if (document.ExamEntry.name.value == "") {
        msg += "You must enter your name \n";
        document.ExamEntry.name.focus();
        document.getElementById('name').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.subject.value == "") {
        msg += "You must enter the subject \n";
        document.ExamEntry.subject.focus();
        document.getElementById('subject').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.Exam_Number.value == "") {
        msg += "You must enter the exam Number \n";
        document.ExamEntry.subject.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    if (document.ExamEntry.Exam_Number.value.length != 4) {
        msg += "You must enter at least Four Numbers in the Exam Number \n";
        document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    var Number = document.ExamEntry.Exam_Number.value
    if (isNaN(document.ExamEntry.Exam_Number.value)) {
        msg += "You must enter at least four numeric characters in the Exam Number feild \n";
        document.ExamEntry.Exam_Number.focus();
        document.getElementById('Exam_Number').style.color = "red";
        //result = false;
    }
    var checked = null;
    var inputs = document.getElementsByName('Exam_Type');
    for (var i = 0; i < inputs.length; i++) {
        if (!checked) {
            checked = inputs[i];
        }
    }
    if (checked == null) {
        msg += "Anything for now /n";

    } else {
        return confirm('You have chosen ' + checked.value + ' is this correct?');
    }
    if (msg == "") {
        return result;
    } {
        alert(msg)
        return false;
    }
}
</script>
</head>  
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>

<table><form action="">

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>

and here is a jsfiddle

Answer 1

变化：

var inputs = document.getElementsByName('Exam_Type');

到

var inputs = document.getElementsByName('examtype');

您似乎为无线电元素选择了错误的名称。

Answer 2

您的for循环正在错误地检查单选按钮。

代码：

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
        checked = inputs[i];
    }
}

请在http://jsfiddle.net/sDLV4/2/

找到工作小提琴

Answer 3

我在这里更改了代码，请检查......

请在这里找到工作小提琴

http：//jsfiddle.net/sDLV4/3/

Answer 4

使用HTML5约束验证，可以删除大部分代码，请参阅下面的修订版。除了Juergen Riemer指出的错误单选按钮组名称外，您的代码还存在以下问题：

更好地使用HTML5 DOCTYPE声明，请参阅下面的
而不是<script language="javascript" type="text/javascript">只使用<script>。 script元素没有language属性，默认情况下type属性的值为“text / javascript”。
不要在window对象上定义验证函数，而应定义为全局函数（如下所示），或者最好作为命名空间对象的成员。
而不是将表单的name属性设置为“ExamEntry”，而是设置其id属性并引用变量形式，如var examForm = document.forms["ExamEntry"];
您的HTML代码格式不正确，因为在第79行的表格表格中，您使用另一个表单元素启动另一个表格元素，这两个表单元素都没有结束标记。
此外，我们最好使用CSS来表示表单布局，而不是表格。

在下面的修订版中，我使用Pure CSS样式表来设置样式表单，并在某些元素中使用相应的class值。

有关一般约束验证和HTML5约束验证功能的更多信息，请参阅此tutorial。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Exam entry</title>
 <link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
  var result = true;
  var msg = "";
  var checked = null;
  var examForm = document.forms['ExamEntry'];
  var inputs = examForm.examtype;

  for (var i = 0; i < inputs.length; i++) {
    if (!checked) {
      checked = inputs[i];
    }
  }
  if (!checked) {
    msg += "Anything for now /n";
  } else {
    return confirm('You have chosen ' + checked.value + ' is this correct?');
  }
  if (msg == "") {
    return result;
  } else {
    alert(msg)
    return false;
  }
}
</script>
</head>  
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry"  class="pure-form pure-form-aligned" method="post" action="success.html">
  <div class="pure-control-group">
    <label for="exNo">Exam Number:</label>
    <input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
  </div>
  <div class="pure-control-group">
    <label>Exam type:</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
    <label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
  </div>
  <div class="pure-controls">
    <button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
    <button type="reset" class="pure-button">Reset</button>
  </div>
</form>
</body>
</html>

验证不适用于Javascript

4 个答案: