使用表单验证隐藏和显示Div

时间:2012-06-25 22:13:37

标签: javascript jquery html css

提交后,我试图隐藏“测验”并显示“谢谢”。一切正常,直到我添加了一个JavaScript表单验证代码,现在它只是重新加载第一个div“欢迎”我想在提交时添加“#thanks”来解决问题,但事实并非如此。然后尝试在表单验证中添加“if true”语句,最终打破了表单验证。我正在使用jquery.validate来验证我的表单。使用当前代码,它跳过验证,只显示“谢谢”如果有人有任何建议,将不胜感激。

    <div id="quiz">
        <form class="cmxform" id="commentForm" method="get" action="" onSubmit="showHide(); return false;">
             <label for="cname">Name</label>
             <input id="cname" name="name" size="20" class="required" minlength="2" />
           </p>
           <p>
             <label for="ccompany">Company Title</label>
             <input id="ccompany" name="company" size="20"  class="required company" minlength="2" />
           </p>
           <p>
             <label for="cnumber">Phone Number</label>
             <input id="cnumber" name="number" size="20"  class="required number" />
           </p>
           <p>
             <label for="cemail">Email</label>
             <input id="cemail" name="email" size="20"  class="required email" />
         <p></p>   
    <input class="submit" type="submit" value="Submit" align="center"/>
    </form>
    </div> 

  <div id="thanks"><h2>Thank you.</h2>
You will receive an email momentarily
</div>

   <script>
$("#begin").click(function(){
    $("#quiz").show();
    $("#welcome").hide();    
});
 function showHide(){
    $("#thanks").show();
    $("#quiz").hide();    
};

</script>

1 个答案:

答案 0 :(得分:1)

我只能说你做错了....虽然你正在做的表单验证可以工作但是有很多好的表单验证jquery插件可以简化你的生活并添加更丰富的用户经验。 jquery.validate可能是使用最广泛的库,非常值得使用。