Question

我在将jquery表单验证脚本实现到我的联系我们表单时遇到了一些问题。这是表单的HTML代码和javascript表单验证，我在这里使用Jquery验证1.13.1 [url] http://jqueryvalidation.org/[/url]，当我点击提交按钮时没有任何反应，它甚至没有显示验证消息喜欢它。目前表单有点粗糙，但我现在想要实现的只是表单验证。如果有人可以帮忙，我将不胜感激。感谢

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>contact us</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png"/>
<link href="style/global.css" rel="stylesheet" type="text/css" />
<link href="style/default/layout.css" rel="stylesheet" type="text/css" />
<link href="style/default/home.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/screen.css">
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script language="javascript" type="text/javascript" src="js/gcws.js"></script>
<script language="javascript" type="text/javascript" src="js/flashobject.js"></script>
<script language="javascript" type="text/javascript" src="js/default/home.js"></script>
<script language="javascript" type="text/javascript" src="js/customTracking.js"></script>
<script>
    $.validator.setDefaults({
        submitHandler: function() {
            alert("submitted!");
        }
    });

    $().ready(function() {
        // validate the comment form when it is submitted
        $("#commentForm").validate();

        // validate signup form on keyup and submit
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: "Please enter your firstname",
                lastname: "Please enter your lastname",
                username: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                },
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                },
                confirm_password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                },
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function() {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });

        //code to hide topic selection, disable for demo
        var newsletter = $("#newsletter");
        // newsletter topics are optional, hide at first
        var inital = newsletter.is(":checked");
        var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
        var topicInputs = topics.find("input").attr("disabled", !inital);
        // show when newsletter is checked
        newsletter.click(function() {
            topics[this.checked ? "removeClass" : "addClass"]("gray");
            topicInputs.attr("disabled", !this.checked);
        });
    });
    </script>
<style type="text/css">
div#container
{
    width: 800px;
    height: 1200px;
    margin-top: 0px;
    margin-left: 0px;
    text-align: left;
}
</style>
<style type="text/css">
body
{  
   background-color: #FFFFFF;
   color: #000000;

}
</style>
<style type="text/css">
a:active
{
   color: #0000FF;
}
a:hover
{
   color: #E49282;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
   img { behavior: url("pngfix.htc"); }
</style>
<![endif]-->
</head>
<body>
<div id="container">
<form class="cmxform" id="commentForm" method="get" action="">
  <div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:97px; width:969px; height:853px; text-align:left; z-index:1;">
  <img src="images/bg2_01.jpg" alt="" width="817" border="0" align="top" id="" style="width:969px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:493px; top:950px; width:969px; height:256px; text-align:left; z-index:2;">
<img src="images/bv01003_01_01_01.png" id="" alt="" align="top" border="0" style="width:969px;height:245px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1196px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>

<div id="bv_" style="margin:0; padding:0; position:absolute; left:1247px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1299px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
  <h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1352px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:1407px; top:67px; width:46px; height:18px; text-align:left; z-index:18;">
<h4><b>HOME</b></h4></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:494px; top:97px; width:197px; height:853px; text-align:left; z-index:10;">
  <img src="images/leftbar.jpg" id="" alt="" align="top" border="0" style="width:197px;height:853px;"></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:501px; top:116px; width:132px; height:130px; text-align:left; z-index:32;">
<h1>Quick links</h1>
<h3><li style="list-style-type: none;">About us</li>
<li style="list-style-type: none;">Careers</li></a>
<li style="list-style-type: none;">Mission Statement</li>

</h3></div>
<div id="bv_" style="margin:0; padding:0; position:absolute; left:708px; top:113px; width:695px; height:827px; text-align:left; z-index:13;">
  <h1><b>Contact Us</b></h1><br>
  <h3><br>
<p>
<b>General Enquiry</b>: <br>
<b>Help</b>
:<br>
<b>Request quote</b>
: <br>
</h3>
<input type="text" id="firstname" style="position:absolute; left:10px; top:258px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:2" name="firstname" value="">
<div id="bv_Text2" style="margin:0; padding:0; position:absolute; left:10px; top:238px; width:71px; height:16px; text-align:left; z-index:3;">
<font style="font-size:13px" color="#000000" face="Arial">First Name</font></div>
<input type="text" id="Editbox2" style="position:absolute; left:10px; top:311px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:4" name="Lastname" value="">
<div id="bv_Text3" style="margin:0; padding:0; position:absolute; left:10px; top:287px; width:71px; height:16px; text-align:left; z-index:5;">
<font style="font-size:13px" color="#000000" face="Arial">Last Name</font></div>
<div id="bv_Text4" style="margin:0; padding:0; position:absolute; left:10px; top:342px; width:71px; height:16px; text-align:left; z-index:6;">
<font style="font-size:13px" color="#000000" face="Arial">Email</font></div>
<input type="text" id="Editbox3" style="position:absolute; left:10px; top:362px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:7" name="Email" value="">
<div id="bv_Text5" style="margin:0; padding:0; position:absolute; left:10px; top:397px; width:158px; height:16px; text-align:left; z-index:8;">
<font style="font-size:13px" color="#000000" face="Arial">Telephone number</font></div>
<input type="text" id="Editbox4" style="position:absolute; left:10px; top:419px; width:277px; height:21px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:9" name="Telephone" value="">
<div id="bv_Text6" style="margin:0; padding:0; position:absolute; left:10px; top:452px; width:254px; height:16px; text-align:left; z-index:10;">
<font style="font-size:13px" color="#000000" face="Arial">What is your question or topic regarding?*</font></div>
<div style="position:absolute; left:10px; top:475px; width:270px; height:24px; border:1px #C0C0C0 solid; z-index:11">
<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;">
<select id="topic" name="topic" title="Please select a topic" required>
                        <option></option>
                        <option>topic1</option>
                        <option>topic2</option>
                        <option>topic3</option>
</select>
</div>
<textarea name="TextArea1" id="TextArea1" style="position:absolute; left:10px; top:530px; width:271px; height:148px; border:1px #C0C0C0 solid; font-family:Calibri; font-size:16px; z-index:12" rows="6" cols="29"></textarea>
<div id="bv_Text7" style="margin:0; padding:0; position:absolute; left:10px; top:505px; width:254px; height:16px; text-align:left; z-index:13;">
<font style="font-size:13px" color="#000000" face="Arial">Please tell us what's on your mind:*</font></div>
<input type="submit" id="submit" name="Button1" value="Submit" style="position:absolute; left:208px; top:700px; width:75px; height:24px; font-family:Arial; font-size:13px; z-index:14">
</form>
</body>
</html>

Answer 1

首先：请清理你的代码！所有内联样式都很难确定什么是重要的。除其他外，你似乎在一个选择中有一个选择（但你只关闭其中一个）：

<select name="Combobox1" size="1" id="Combobox1" style="width:100%; height:100%; border-width:0px; font-family:'Calibri'; font-size:10px;">
<select id="topic" name="topic" title="Please select a topic" required>
    <option></option>
    <option>topic1</option>
    <option>topic2</option>
    <option>topic3</option>
</select>

然后其他问题包括您正在验证您尚未定义任何规则的表单（ID = commentForm）：

$("#commentForm").validate();

因此表格不知道哪些字段是必需的。（确定了具有ID＆＃34; signupForm＆＃34;的表单的规则，但根本没有这样的表单出现在您的代码中......）

我已经清理了一些HTML代码（只是表单）：

<form class="cmxform" id="commentForm" method="get" action="">

    <p>First Name</p>
    <input type="text" id="firstname" name="firstname" value="" />

    <p>Last Name</p>
    <input type="text" id="Editbox2" name="lastname" value="" />

    <p>Email</p>
    <input type="text" id="Editbox3" name="email" value="" />

    <p>Telephone number</p>
    <input type="text" id="Editbox4" name="telephone" value="" />

    <p>What is your question or topic regarding?*</p>
    <select id="topic" name="topic" title="Please select a topic">
        <option></option>
        <option>topic1</option>
        <option>topic2</option>
        <option>topic3</option>
    </select>


    <p>Please tell us what's on your mind:*</p>
    <textarea name="onyourmind" id="TextArea1" rows="6" cols="29"></textarea>

    <input type="submit" id="submit" name="Button1" value="Submit" />
</form>

然后关于脚本，在＆＃34;规则＆＃34; （见下文）您需要使用表单元素的名称（而不是ID或其他内容）：

$("#commentForm").validate({
    rules: {
        firstname: "required",
        lastname: "required",
        email: {
            required: true,
            email: true
        },
        telephone: "required",
        topic: {
            required: true
        },
        onyourmind: "required"
        },
        messages: {
            firstname: "Please enter your first name",
            lastname: "Please enter your last name",
            email: "Please enter a valid email address",
            telephone: "Please enter your phone number",
            topic: "Please choose a topic",
            onyourmind: "Please tell us what's on your mind"
        }
    });
});

（当然＆＃34;规则＆＃34;可以而且应该调整，具体取决于提交表单所需的表单元素。）

这是一个包含上述代码的小提琴：http://jsfiddle.net/Niffler/n7750jkt/
在这里我不会更改您的HTML代码（错误选择除外）：http://jsfiddle.net/Niffler/xt6jaaen/

jquery验证问题：表单验证不起作用

1 个答案: