2012-09-27 40 views
0

我有一個JQuery驗證器的問題。如果我先按提交按鈕,驗證開始工作。但是,如果表單有效,我想提交。而且我不知道爲什麼驗證字段也會在後面形成。請參閱我的JS代碼註釋JQuery驗證程序在第一次提交後工作 - asp .net

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

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

的HTML代碼切形式是否有任何理由,你爲什麼沒有使用ASP.NET驗證器? – Jupaol

+0

我不喜歡它們,它們不像我那麼靈活和沉重 –

+0

有一個'CustomValidator',您可以使用它來編寫自定義驗證邏輯。關於你的代碼的主要問題是你需要複製你的驗證邏輯(在JavaScript和服務器級別) – Jupaol

回答

0

變化

OnClientClick="ValidateForm();" 

通過

OnClientClick="return ValidateForm();" 
+0

對不起,但這不是案例 –

+0

@cleric:「ValidateForm」第一次返回true嗎? –

+0

是的,第二次假的情況下形式無效 –

相關問題