Validate input form with Javascript_问答_开发者

开发者 https://www.devze.com 2023-04-11 18:25 出处：网络

Is there something I\'m doing wrong that stops the form validating? I can\'t seem to get it to validate when the checkbox is not clicked.

相关专题：javascript

Is there something I'm doing wrong that stops the form validating? I can't seem to get it to validate when the checkbox is not clicked.

Your help will be appreciated.

<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=开发者_StackOverflow社区"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>

Input button doesn't have onsubmit event, use onclick instead. There were also other problems such as bad selection etc. , which are solved. See below

See a working demo here 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>

The onsubmit should be part of the <form> tag, not <input>.

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

You cannot use application-form inline in your document.application-form.terms. as its not a legal js identifier due to the hyphen.

Either give the checkbox an ID;

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

then reference it with

if (document.getElementById("terms").checked = ....

or use [] notation;

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

application-form is not a valid name
onsubmit is not valid on input, moved to form

try -

<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>