javascript - 所有浏览器似乎都忽略 JavaScript 客户端表单验证规则

Question

我使用 JavaScript 来确保表单上的字段正确填写(具有正确信息类型的必填字段)，并且浏览器似乎会忽略我设置的规则并处理信息。

HTML

HTML



 <form id="course-form" name="courseForm" method="POST" onSubmit="return checkCourse()" action="#">
        <label for="courseName">Course Name: </label>
        <input type="text" id="course-name" name="courseName" placeholder="Course Name" required/><br/>
        <br>
        <label for="qualDesc">Description: </label><br/>
        <textarea name="qualDesc" class="boxsizingBorder" placehold
        <label for="entryReqs">Entry Requirements</label><br>
        <textarea name="entryReqs" class="boxsizingBorder" id="entry-reqs" placeholder="Previous Grades Required" required></textarea><br>
        <br>
        <label for="cost">Cost: &pound;</label>
        <input type="text" name="cost" id="courseCost" maxlength="6" size="5" required/><br>
        <br>
        <input type="submit" value="Add Course" />
</form>

JavaScript(放置在文档头部)

        <script>
        function checkCourse()
        {
            var date = new Date();
            var year = (date.getFullYear());            
            var courseName=document.forms["courseForm"]["courseName"].value;
            var courseDesc=document.forms["courseForm"]["qualDesc"].value;
            var courseYear=document.forms["courseForm"]["year"].value;
            var entryReqs=document.forms["courseForm"]["entryReqs"].value;
            var cost=document.forms["courseForm"]["cost"].value;

            if(courseName == "")
            {
                alert("Course name is a required field.");
                return false;
            }
            else if(courseDesc=="")
            {
                alert("The Course needs a description");
                return false;
            }
            else if(courseYear < year)
            {
                alert("The academic year for " + courseYear + " has already commenced. \n Please pick a later date);
                return false;
            }
            else if(entryReqs=="")
            {
                alert("You must enter some entry requirements");
                return false;
            }
            else if(isNaN(cost) || (cost==""))
            {
                alert("Cost is not a valid numerical figure");
            }

            alert("Course added sucessfully!");
            return true;

        }
    </script>   

**注意，我还尝试将 return true 部分放入 else 语句中，如下所示:

else
{
  alert("Course added sucessfully!");
  return true;
}

我错过了什么吗？谢谢

Answer 1

在下面的行中，您尝试获取输入的值，但您的表单不包含名为 year 的输入。这将导致 Javascript 错误，随后您的验证将被忽略，表单将继续提交

var courseYear=document.forms["courseForm"]["year"].value;

第二个问题是，如果成本验证失败，您不会返回 false(但这不是您的根本问题)。

另外，正如 juvian 指出的那样，您缺少以下警报的结束语:

alert("The academic year for " + courseYear + " has already commenced. \n Please pick a later date);