javascript - 使用 Javascript 验证输入表单

标签 javascript html

我做错了什么导致表单验证停止了吗?当未单击复选框时,我似乎无法验证它。

我们将不胜感激。

<html>
    <head>
    <script type="text/javascript">

    function validateTerms(){
         valid = true;
        if ( document.application-form.terms.checked == false ){
            alert ( "Please accept the terms" );
            valid = false;
        }
        return valid;
    }   
    </script>
    </head>

    <body>

       <form id="application-form" name="application-form" method="post" action=""><br />
       <p><input type="checkbox" name="terms" value="terms" /><b> I have read the <a href="terms.php">Terms</a> *</b>. </p>

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Submit Application" onsubmit="return validateTerms()">
        <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
        </form>
    </body>
    </html>

最佳答案

输入按钮没有onsubmit 事件,使用onclick 代替。还有其他问题,例如选择错误等,已解决。见下文

在这里查看工作演示 http://jsfiddle.net/ZHfX7/

<html>
    <head>

    </head>

    <body>

       <form id="application-form" name="application-form" method="post" action=""><br />
       <p><input type="checkbox" id="terms" name="terms" value="terms" /><b> I have read the <a href="terms.php">Terms</a> *</b>. </p>

         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Submit Application" onclick="return validateTerms()">
        <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
        </form>
    </body>
        <script type="text/javascript">

    function validateTerms(){
         valid = true;
        if ( !document.getElementById('terms').checked){
            alert ( "Please accept the terms" );
            valid = false;
        }
        return valid;
    }   
    </script>
    </html>

关于javascript - 使用 Javascript 验证输入表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7675518/

相关文章:

javascript - 循环遍历 react 中的项目数组

html - flexbox 中的 Overflow:auto 对于 display:block 和 display:flex 的 child 表现不同

HTML/CSS 这种在媒体查询中使用断点的概念不正确吗?

javascript - 单击获取元素 ID

javascript - 我在包含 HTML Javascript 时遇到问题

javascript - 允许用户调整页面上图像的大小

javascript - 外部 JS 文件无法识别 html 中的元素

html - 删除页面页脚会使页面变形。如何修复它?

jquery - SoundCloud 自定义播放器安装

jquery - 在 CSS 中淡出到另一个 Sprite 表位置的最简单方法