使用Javascript验证输入表单

时间:2011-10-06 14:10:41

标签: 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>

4 个答案:

答案 0 :(得分:1)

输入按钮没有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>

答案 1 :(得分:0)

onsubmit应该是 <form> 标记的一部分,而不是<input>

<form id="application-form" name="application-form" method="post" action="" onsubmit="return validateTerms();">

答案 2 :(得分:0)

由于连字符,您不能在application-form中使用document.application-form.terms.内联,因为它不是合法的js标识符。

给复选框一个ID;

<input type="checkbox" name="terms" value="terms" id="terms" />

然后用

引用它
if (document.getElementById("terms").checked = ....

或使用[]表示法;

document.forms['application-form'].terms ...

答案 3 :(得分:0)

申请表格不是有效名称
onsubmit在输入时无效,已移至表单

尝试 -

<html>
    <head>
        <script type="text/javascript">
        function validateTerms(){
            if (document.application.terms.checked){
                alert ( "Please accept the terms" );
                return false;
            }
            return true;
        }   
        </script>
    </head>
    <body>
      <form id="application" name="application" method="post" action="" onsubmit="return validateTerms()"><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" >
       <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')">
       </form>
    </body>
</html>