Question

我正在尝试使用jquery验证表单，但验证函数没有被执行。我可以不在表单标记中指定onsubmit事件，因为无论如何我们使用validate函数验证代码？

<html>
<head>      
    <title>UI Design Assignment</title>
<style>
        #header{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            text-align : center;
            color : white;
            box-shadow : 0 0 25px #5555FF;
        }
        #imagediv{
            height: 80%;
            width : 15%;
            padding-top : 50px;
            padding-left : 85px;
            -webkit-transform: rotate(-30deg);
            float : left;               
        }           
        #registrationdiv{
            width : 65%;
            height: 80%;                
            font-family : Calibri;
            font-size : 20px;
            border-radius : 2;
            float : left;
        }
        #registrationtable{
            position : relative;
            margin : 18px;
            align : center;
            background-color : #AAA;
            overflow-y : scroll;
            box-shadow : 0 0 17px gray;
            border-radius : 5%;
        }
        #footer{
            background-color : #5555FF;
            width : 100%;
            height: 8%;
            color : white;
            text-align : center;                
            margin : 0px auto 0px auto;
            padding : 2px;
            box-shadow : 0 0 25px #5555FF;
            clear : both;
        }

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        $(document).ready(function(){       

                        // Events

            $( "img[name=registrationimg]" ).mouseenter(function() {
                $( this ).fadeOut( 1000 );
            });
            $( "img[name=registrationimg]" ).mouseleave(function() {
                $( this ).fadeIn( 1000 );
            });
            $("input[name=Reset]").click(function(){    
                    $("h1").css({                           
                        "left": "500px",
                        "-webkit-transform":"rotate(360deg)",
                        "-webkit-transition": "3s"
                    });
            });             
            $("h1").hover(
                    function(){
                        $(this).css({"color":"#000"});
                    },
                    function(){
                        $(this).css({"color":"#FFF"});
                    }
            );              
            $("input").focusin(function(){
                    $(this).css({"color":"#fb7200"});
            });
            $("input").focusout(function(){
                    $(this).css({"color":"black"});
            });                     

                // Validations
            $("#registrationform").validate({               
                rules : {
                        email : required,
                        password : required,
                        repassword : required,
                        firstname: required,
                        country : required,
                        dob : required,
                        accept : required                       
                },
                messages : {
                    email : "Please fill your email id"
                }
            });

        });

        function submitform(){

            if(document.getElementById("iaccept").checked==false){
                alert("You cannot go ahead without accepting the terms and conditions.");
            }
            else{
                alert("Registration completed.");
            }
        }   

        function resetform(){
            window.reset();
        }
    </script>
</head>
<body>
    <div id="header">           
        <h1>USER REGISTRATION</h1>
    </div>
    <div id="imagediv">
        <img name="registrationimg" src="registration.jpg"/>
    </div>
    <div id="registrationdiv"><center>      
    <form id="registrationform"  onsubmit="submitform()">
        <table id="registrationtable" cellspacing="10">
            <tr><td>Email <font color="red">*</font> : </td><td><input type="email" name="email" placeholder="vallabh@harbingergroup.com"></td></tr>
            <tr><td>Password <font color="red">*</font> : </td><td><input type="password"></td></tr>
            <tr><td>Confirm Password <font color="red">*</font> : </td><td><input type="password" name="repassword"></td></tr>
            <tr><td>First Name <font color="red">*</font> : </td><td><input type="text" placeholder="Vallabh" name="firstname"></td></tr>
            <tr><td>Last Name : </td><td><input type="text"></td></tr>
            <tr><td>Address : </td><td><input type="text"></td></tr>
            <tr><td>City : </td><td><input type="text" ></td></tr>
            <tr><td>State : </td><td><input type="text" ></td></tr>
            <tr><td>Country : <font color="red">*</font></td><td><input type="text" placeholder="India" name="country"></td></tr>
            <tr><td>Phone : </td><td><input type="tel" ></td></tr>
            <tr><td>Zipcode : </td><td><input type="number" ></td></tr>
            <tr><td>Date of Birth <font color="red">*</font> : </td><td><input type="date" name="dob"></td></tr>
            <tr><td colspan="2">By submitting, I agree that all information entered was done accurately & truthfully.</td></tr>
            <tr><td>I accept <input type="checkbox" name="accept" id="iaccept"></td></tr>
            <tr><td><input type="submit" name="Submit"></td><td><input type="reset" name="Reset"></td></tr>
        </table>
    </form></center>
    </div>
    <center></center>
    <div id="footer">Copyright &copy; <a href="https://harbingergroup.com"><font color="#00F"><b>Harbinger Group</b></font></a>
</div>
</body>
</html>

Answer 1

使用作为validate（）调用的参数给出的额外函数替换onsubmit回调：

$("#myform").validate({
   submitHandler: function(form) {
      // some other code
      // maybe disabling submit button
      // then:
      form.submit();
   }
});

验证函数没有在jquery中执行

1 个答案: