我对 JQuery 验证器有疑问。仅当我首先按下提交按钮时,验证开始才有效。但我只想在表单有效的情况下提交。而且我不知道为什么验证字段也会在它之后形成。请在 JS 代码中查看我的评论
<script src="/static/js/jquery.hint.js" type="text/javascript"></script>
<script src="/static/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/static/js/additional-methods.js" type="text/javascript"></script>
<script type="text/javascript">
function ValidateForm (e) {
//fix for hint
setTimeout(function()
{ $('input').focus(); },
500);
return $("#contactForm").valid(); //this should prevent call of click event but I don't know why form first time is valid always :(
}
jQuery(function ($) {
var container = $("div.container"), validator;
$(":input[data-hint-title]").hint();
// validate the form when it is submitted
validator = $("#contactForm").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: "li",
meta: "validate",
rules: {
firstname: "required",
lastname: "required",
address: "required",
city: "required",
zipcode: "required",
country: "required",
phone: "required",
email: {
required: true,
email: true
},
confirmEmail: {
required: true,
email: true,
equalTo: "#email"
},
message: {
required: true,
maxlength: 600
}
}
});
validator.resetForm();
});
</script>
这是 HTML 代码的剪切形式
<form id="contactForm" action="" method="POST" runat="server" ClientIDMode="Static">
<asp:ScriptManager EnablePartialRendering="true"
ID="ScriptManager1" runat="server"></asp:ScriptManager>
<fieldset>
<div class="row justify ibChildren">
<span>
<asp:TextBox runat="server" ID="firstname" data-hint-title="* first name" CssClass="required" ClientIDMode="Static" />
</span>
<span>
<asp:TextBox runat="server" ID="lastname" data-hint-title="* last name" CssClass="required" ClientIDMode="Static" />
</span>
</div>
<span>
<asp:TextBox runat="server" ID="country" data-hint-title="* country" CssClass="required" ClientIDMode="Static" />
<%--<input type="text" name="seach" value="" id="country" data-hint-title="Country" class="required" />--%></span>
</div >
<div class="row justify ibChildren">
<span>
<asp:TextBox runat="server" ID="phone" data-hint-title="* phone" CssClass="required" ClientIDMode="Static" />
<%--<input type="text" name="seach" value="" id="phone" data-hint-title="Phone" />--%></span>
<span>
<%-- <input type="text" name="seach" value="" id="email" data-hint-title="Email" class="required"
type="email" />--%>
<asp:TextBox runat="server" ID="email" data-hint-title="* email" CssClass="required" ClientIDMode="Static" />
</span>
</div>
<div class="row justify ibChildren">
<span>
<asp:TextBox runat="server" ID="productname" data-hint-title="product (name, shade, item #) other" ClientIDMode="Static" />
<%--<input type="text" name="seach" value="" id="productName" data-hint-title="Product Name" class="required" />--%></span>
<span>
<asp:TextBox runat="server" ID="confirmEmail" data-hint-title="* confirm email" CssClass="required" ClientIDMode="Static" />
<%--<input type="text" name="seach" value="" id="confirmEmail" data-hint-title="Confirm Email"
class="required" type="email" />--%></span>
</div>
<div class="row full">
<asp:TextBox runat="server" ID="message" TextMode="multiline" data-hint-title="* message" CssClass="required" ClientIDMode="Static" Columns="20" Rows="2" />
</div>
<div class="row submit">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
Processing ...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Label ID="lblStatus" runat="server" Text="" CssClass="requiredHint"></asp:Label>
<asp:Button id="sendMail" runat="server" Text="Submit" CssClass="submit" OnClick="Send_Click" OnClientClick="ValidateForm();" /></ContentTemplate>
</asp:UpdatePanel>
</div>
</fieldset>
<!-- our error container -->
<div class="container" >
<h4>There are serious errors in your form submission, please see below for details.</h4>
<ol>
<li><label for="<%= firstname.ClientID %>" class="error">Please enter your first name</label></li>
...........
<li><label for="<%= lastname.ClientID %>" class="error">Please enter your last name</label></li>
</ol>
</div>
</form>