检查javascript中的空表单元素

Question

我在做一个简单的客户端自我评分测验。

我问6个问题，我想提醒用户他们的分数（保持简单）。如果他们将答案留空，则会显示警报。

我是新来的JavaScript，并不真正知道如何检查个别表单元素，看看他们是否是空的。我也有让我的代码运行的问题。

JS

编辑

function grade() { 
    var score = 0; 
    var elt = document.quiz; 

    // Check to see if no questions were left unanswered. 
    if elt.question1.value.length == 0 || elt.question2.value.length == 0 || 
     elt.question3.value.length == 0 || elt.question4.value.length == 0 || 
     elt.question5.value.length == 0 || elt.question6.value.length == 0 
     { 
     alert ("Whoops, you're missing an answer!") 
    } 

    if (elt.question1[1].checked) { 
     score += 1; 
    } 
    if (elt.question2[0].checked) { 
     score += 1; 
    } 
    if (elt.question3[0].checked == false && elt.question3[1].checked && 
     elt.question3[2].checked == false && elt.question3[3].checked == false) { 
     score += 1; 
    } 
    if (elt.question4[0].checked == false && elt.question4[1].checked == false && 
     elt.question4[2].checked == false && elt.question4[3].checked) { 
     score += 1; 
    } 
    elt.question5 = elt.question5.toLowerCase() 
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) { 
     score += 1; 
    } 
    elt.question6 = elt.question6.toLowerCase() 
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) { 
     score += 1; 
    } 

    score = score/6 * 100; 
    score = score.toFixed(2); 
    alert("You scored " + score + "%"); 

    return false; // Return true if you want the form to submit on validation/grade 
} 

Answer 1

您的标记一个一些显著错误：

1. 请勿缠绕在每一个问题上form元素。这些都应该在一个form元素中。 （此外，每个问题都在OL中，以便对系列问题进行编号。）
2. 您没有正确关闭所有label's，因此当您点击它们时选择了其他元素（尝试第3个问题，第一个问题复选框）。
3. 您需要在窗体的submit处理程序grade()功能，它需要onsubmit="return grade()"，与grade()返回false当它不“通”，防止表单提交*。

*注意，我的grade()函数总是return false在本例中设置为。您需要添加逻辑以允许表单提交。

至于使用Javascript ...

您需要elt变量等于你document.quiz（注意，我改变了主form有在您的标记一个name="quiz"）。你可以使用indexOf()而不是正则表达式，如果你只是想做一个简单的检查（虽然正则表达式可以检查age作为一个单词）。

如果您只是想确保文本输入不为空，您可以使用el.value.length != 0或el.value != ''。

另外，看着你的评分代码，如果你只想选择一个，你可以使用收音机，除非你想让参加测验的人不知道是否有一个或多个是有效的答案。但收音机只允许您选择一个值。

HTML

<h3> Self-Grading Astronomy Quiz </h3> 
<form action="" name="quiz" onsubmit="return grade();"> 
<p>1. According to Kepler the orbit of the earth is a circle with the sun at the center.</p> 
<p> 
    <label><input type="radio" name="question1" value="true" /> True </label> 
    <label><input type="radio" name="question1" value="false" /> False </label> 
</p> 
<p>2. Ancient astronomers did consider the heliocentric model of the solar system but rejected it because they could not detect parallax.</p> 
<p> 
    <label><input type="radio" name="question2" value="true" /> True </label> 
    <label><input type="radio" name="question2" value="false" /> False </label> 
</p> 
<p>3. The total amount of energy that a star emits is directly related to its:</p> 
<p> 
    <label><input type="checkbox" name="question3" value="1" /> a) surface gravity and magnetic field </label><br/> 
    <label><input type="checkbox" name="question3" value="2" /> b) radius and temperature </label><br/> 
    <label><input type="checkbox" name="question3" value="3" /> c) pressure and volume </label><br/> 
    <label><input type="checkbox" name="question3" value="4" /> d) location and velocity </label> 
</p> 
<p>4. Stars that live the longest have:</p> 
<p> 
    <label><input type="checkbox" name="question4" value="1" /> a) high mass </label><br/> 
    <label><input type="checkbox" name="question4" value="2" /> b) high temperature </label><br/> 
    <label><input type="checkbox" name="question4" value="3" /> c) lots of hydrogen </label><br/> 
    <label><input type="checkbox" name="question4" value="4" /> d) small mass </label> 
</p> 
<p>5. A collection of a hundred billion stars, gas, and dust is called a __________.</p> 
<p> 
    <input type='text' id='question5' /> 
</p> 
<p>6. The inverse of the Hubble's constant is a measure of the __________ of the universe.</p> 
<p> 
    <input type='text' id='question6' /> 
</p> 
<p> 
    <input type='button' onclick='grade()' value='Grade' /> 
</p> 
</form> 

的Javascript

function grade() { 
    //**Would I do something like this? 
    //if(elem.value.length == 0){ 
    // alert("Whoops, looks like you didn't answer a question.")} 
    var score = 0; 
    var elt = document.quiz; 

    if (elt.question1[1].checked) { 
     score += 1; 
    } 
    if (elt.question2[0].checked) { 
     score += 1; 
    } 
    if (elt.question3[0].checked == false && elt.question3[1].checked && elt.question3[2].checked == false && elt.question3[3].checked == false) { 
     score += 1; 
    } 
    if (elt.question4[0].checked == false && elt.question4[1].checked == false && elt.question4[2].checked == false && elt.question4[3].checked) { 
     score += 1; 
    } 
    if (elt.question5.value != '' && elt.question5.value.indexOf('galaxy') != -1) { 
     score += 1; 
    } 
    if (elt.question5.value != '' && elt.question6.value.indexOf('age') != -1) { 
     score += 1; 
    } 

    score = score/6 * 100; 
    score = score.toFixed(2); 
    alert("You scored " + score + "%"); 

    return false; // Return true if you want the form to submit on validation/grade 
} 

http://jsfiddle.net/BeD3Z/10/

Answer 2

检查各个表单元素，看看他们是否是空

你只值比较空字符串：

if(elt.question6.value == '') { 
    alert('Unanswered'); 
} 

Answer 3

你可以使用jquerys内置的验证http://docs.jquery.com/Plugins/validation。它内置了检查所需功能的功能，并在空白字段下方显示错误消息。