2012-06-26 91 views
0

兩個代碼是相同的,只有一個是在母版頁中,另一個不是。jquery在aspx正常頁面中工作,但不在內容頁面

我只是想知道我需要的時候,我們轉換的頁面在jQuery函數調用到母版頁和嵌入

這裏workign意味着我可以看到在頁面和Javascrpt驗證CSS特效做什麼改變代碼得到所謂 這不是工作(內容頁)

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="JqueryTest.WebForm2" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
<%--<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/validationEngine.jquery.css")%>' type="text/css" /> 
<link rel="stylesheet" href='<%=Page.ResolveUrl("./JQuery/template.css")%>' type="text/css") /> 
<script src='<%=Page.ResolveUrl("./JQuery/jquery-1.6.min.js")%>' type="text/javascript"> 
    </script> 
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine-en.js")%>' type="text/javascript" 
    charset="utf-8"> 
    </script> 
<script src='<%=Page.ResolveUrl("./JQuery/jquery.validationEngine.js")%>' type="text/javascript" 
    charset="utf-8"> 
    </script>--%> 

    <link rel="stylesheet" href="./JQuery/validationEngine.jquery.css" 
    type="text/css" /> 
<link rel="stylesheet" href="./JQuery/template.css" type="text/css" /> 
<script src="./JQuery/jquery-1.6.min.js" type="text/javascript" > 
    </script> 
<script src="./JQuery/jquery.validationEngine-en.js" type="text/javascript" 
    charset="utf-8" > 
    </script> 
<script src="./JQuery/jquery.validationEngine.js" type="text/javascript" 
    charset="utf-8" > 
    </script> 

    <script> 
     jQuery(document).ready(function() { 
      // binds form submission and fields to the validation engine 
      jQuery("#formID").validationEngine(); 
     }); 


     function checkHELLO(field, rules, i, options) { 
      if (field.val() != "HELLO") { 
       // this allows to use i18 for the error msgs 
       return options.allrules.validate2fields.alertText; 
      } 
     } 
    </script> 


</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <p> 
     <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
      onclick="alert(&#39;is the form valid? &#39;+jQuery(&#39;#formID&#39;).validationEngine(&#39;validate&#39;))"> 
      Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
       onclick="jQuery(&#39;#sport&#39;).validationEngine(&#39;validate&#39;)">Validate 
       sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
        onclick="jQuery(&#39;#sport&#39;).validationEngine(&#39;hide&#39;)">Close favorite 
        sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
         onclick="jQuery(&#39;#formID&#39;).validationEngine(&#39;hide&#39;)">Close all prompts 
         on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
          onclick="jQuery(&#39;#formID&#39;).validationEngine(&#39;updatePromptsPosition&#39;)"> 
          Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
           onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;showPrompt&#39;, &#39;This is an example&#39;, &#39;pass&#39;)"> 
           Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
            onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;hide&#39;)">Close div prompt</a> 
     | <a href="http://www.position-relative.net/creation/formValidator/index.html">Back 
      to index</a> 
    </p> 
    <p> 
     This demonstration shows the different validators available 
     <br> 
    </p> 
    <div id="test" class="test" style="width: 150px;"> 
     This is a div element</div> 
    <form id="formID" class="formular" method="post"> 
    <fieldset> 
     <legend>Required! </legend> 
     <label> 
      <span>Field is required : </span> 
      <input value="" class="validate[required] text-input" type="text" name="req" id="req"> 
     </label> 
     <legend>Placeholder &amp; required </legend> 
     <label> 
      <span>Field is required : </span> 
      <input value="This is a placeholder" data-validation-placeholder="This is a placeholder" 
       class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder"> 
     </label> 
     <label> 
      <span>Favorite sport 1:</span> 
      <select name="sport" id="sport" class="validate[required]"> 
       <option value="">Choose a sport</option> 
       <option value="option1">Tennis</option> 
       <option value="option2">Football</option> 
       <option value="option3">Golf</option> 
      </select> 
     </label> 
     <label> 
      <span>Favorite sport 2:</span> 
      <select name="sport2" id="sport2" multiple="" class="validate[required]"> 
       <option value="">Choose a sport</option> 
       <option value="option1">Tennis</option> 
       <option value="option2">Football</option> 
       <option value="option3">Golf</option> 
      </select> 
     </label> 
     <br> 
     validate[required] 
    </fieldset> 
    <fieldset> 
     <legend>Custom </legend> 
     <label> 
      <p> 
       Comes with many predifined regex (phone, url, ip, email..etc)</p> 
      <a href="http://www.position-relative.net/creation/formValidator/demos/demoRegExp.html"> 
       [DEMO]</a> 
      <br> 
      <span>Enter a URL : </span> 
      <input value="http://" class="validate[required,custom[url]] text-input" type="text" 
       name="url" id="url"> 
      <br> 
      validate[required,custom[url]] 
     </label> 
    </fieldset> 

    <fieldset> 
     <legend>Function </legend> 
     <label> 
      <span>Write 'HELLO' : </span> 
      <input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text" 
       id="lastname" name="lastname"> 
      <br> 
      validate[required,funcCall[checkHELLO]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Past </legend> 
     <label> 
      Checks that the value is a date in the past 
      <br> 
      <span>Please enter a date ealier than 2010/01/01</span> 
      <input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input" 
       type="text" name="past" id="past"> 
      <br> 
      validate[custom[date],past[2010/01/01]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Future </legend> 
     <label> 
      Checks that the value is a date in the future 
      <br> 
      <span>Please enter a date older than today's date</span> 
      <input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text" 
       name="future" id="future"> 
      <br> 
      validate[custom[date],future[NOW]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Group required </legend> 
     <label> 
      Checks if at least one of the input is not empty. 
      <br> 
      <br> 
      <span>Please enter a credit card</span> 
     </label> 
     <input value="" class="validate[groupRequired[payments]] text-input" type="text" 
      name="creditcard1" id="creditcard1"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please enter a paypal acccount</label> 
     <input value="" class="validate[groupRequired[payments],custom[email]] text-input" 
      type="text" name="paypal" id="paypal"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please enter a bank account</label> 
     <input value="" class="validate[groupRequired[payments],custom[integer]] text-input" 
      type="text" name="bank" id="bank"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please choose from select</label> 
     <select class="validate[groupRequired[payments]] text-input" type="text" name="bank2" 
      id="bank2"> 
      <option value="">Choose a payment option</option> 
      <option value="Paypal">Paypal</option> 
      <option value="Bank">Bank account</option> 
     </select> 
    </fieldset> 
    <fieldset> 
     <legend>Date Range<br> 
     </legend> 
     <label> 
      Checks that the start date is before the end date Please enter an end date ealier 
      than the start date<br> 
      <br> 
      <label for="date1"> 
       Start Date : 
      </label> 
      <input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1"> 
     </label> 
     <label> 
      <label for="date2"> 
       End Date : 
      </label> 
      <input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2"> 
      <br> 
      validate[dateRange[grp1]]<br> 
      Note* Both fields must have the same name 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Date Time Range<br> 
     </legend> 
     <label> 
      Checks that the start date and time are before the end date and time Please enter 
      an end date ealier than the start date<br> 
      <br> 
      <label for="date1"> 
       Start Date Time: 
      </label> 
      <input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text" 
       id="datetime1"> 
     </label> 
     <label> 
      <label for="date2"> 
       End Date Time: 
      </label> 
      <input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text" 
       id="datetime2"> 
      <br> 
      validate[dateTimeRange[grp2]<br> 
      Note* Both fields must have the same name 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Credit Card </legend> 
     <label> 
      Checks that the credit card number is at least theoretically valid, according the 
      to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>, 
      but not whether the specific card number is active with a bank, etc. 
      <br> 
      <br> 
      Since credit cards are often presented in different formats, spaces and hyphens 
      (' ','-') are simply ignored. 
      <br> 
      <br> 
      Examples:<br> 
      <ul> 
       <li>4111 1111 1111 1111</li> 
       <li>3737-321345-610004</li> 
      </ul> 
      <a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm"> 
       More examples</a> 
      <br> 
      <input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2" 
       id="creditcard2"> 
      <br> 
      validate[required,creditCard] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Checkbox </legend> 
     <label> 
      Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html"> 
       [DEMO]</a> 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Ajax </legend> 
     <label> 
      Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html"> 
       [DEMO]</a> 
     </label> 
    </fieldset> 
    <input class="submit" type="submit" value="Validate &amp; Send the form!"><hr> 
    </form> 
</asp:Content> 

這是工作(普通ASPX頁面)

<!DOCTYPE html> 
<!-- saved from url=(0081)http://www.position-relative.net/creation/formValidator/demos/demoValidators.html --> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>JQuery Validation Engine</title> 
    <link rel="stylesheet" href="./JQuery Validation Engine_files/validationEngine.jquery.css" 
     type="text/css"> 
    <link rel="stylesheet" href="./JQuery Validation Engine_files/template.css" type="text/css"> 
    <script src="./JQuery Validation Engine_files/jquery-1.6.min.js" type="text/javascript"> 
    </script> 
    <script src="./JQuery Validation Engine_files/jquery.validationEngine-en.js" type="text/javascript" 
     charset="utf-8"> 
    </script> 
    <script src="./JQuery Validation Engine_files/jquery.validationEngine.js" type="text/javascript" 
     charset="utf-8"> 
    </script> 
    <script> 
     jQuery(document).ready(function() { 
      // binds form submission and fields to the validation engine 
      jQuery("#formID").validationEngine(); 
     }); 


     function checkHELLO(field, rules, i, options) { 
      if (field.val() != "HELLO") { 
       // this allows to use i18 for the error msgs 
       return options.allrules.validate2fields.alertText; 
      } 
     } 
    </script> 
</head> 
<body> 
    <p> 
     <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
      onclick="alert(&#39;is the form valid? &#39;+jQuery(&#39;#formID&#39;).validationEngine(&#39;validate&#39;))"> 
      Evaluate form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
       onclick="jQuery(&#39;#sport&#39;).validationEngine(&#39;validate&#39;)">Validate 
       sport1 select field</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
        onclick="jQuery(&#39;#sport&#39;).validationEngine(&#39;hide&#39;)">Close favorite 
        sport 1 prompt</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
         onclick="jQuery(&#39;#formID&#39;).validationEngine(&#39;hide&#39;)">Close all prompts 
         on form</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
          onclick="jQuery(&#39;#formID&#39;).validationEngine(&#39;updatePromptsPosition&#39;)"> 
          Update all prompts positions</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
           onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;showPrompt&#39;, &#39;This is an example&#39;, &#39;pass&#39;)"> 
           Build a prompt on a div</a> | <a href="http://www.position-relative.net/creation/formValidator/demos/demoValidators.html#" 
            onclick="jQuery(&#39;#test&#39;).validationEngine(&#39;hide&#39;)">Close div prompt</a> 
     | <a href="http://www.position-relative.net/creation/formValidator/index.html">Back 
      to index</a> 
    </p> 
    <p> 
     This demonstration shows the different validators available 
     <br> 
    </p> 
    <div id="test" class="test" style="width: 150px;"> 
     This is a div element</div> 
    <form id="formID" class="formular" method="post"> 
    <fieldset> 
     <legend>Required! </legend> 
     <label> 
      <span>Field is required : </span> 
      <input value="" class="validate[required] text-input" type="text" name="req" id="req"> 
     </label> 
     <legend>Placeholder &amp; required </legend> 
     <label> 
      <span>Field is required : </span> 
      <input value="This is a placeholder" data-validation-placeholder="This is a placeholder" 
       class="validate[required] text-input" type="text" name="reqplaceholder" id="reqplaceholder"> 
     </label> 
     <label> 
      <span>Favorite sport 1:</span> 
      <select name="sport" id="sport" class="validate[required]"> 
       <option value="">Choose a sport</option> 
       <option value="option1">Tennis</option> 
       <option value="option2">Football</option> 
       <option value="option3">Golf</option> 
      </select> 
     </label> 
     <label> 
      <span>Favorite sport 2:</span> 
      <select name="sport2" id="sport2" multiple="" class="validate[required]"> 
       <option value="">Choose a sport</option> 
       <option value="option1">Tennis</option> 
       <option value="option2">Football</option> 
       <option value="option3">Golf</option> 
      </select> 
     </label> 
     <br> 
     validate[required] 
    </fieldset> 

    <fieldset> 
     <legend>Equals </legend> 
     <label> 
      <span>Password : </span> 
      <input value="karnius" class="validate[required] text-input" type="password" name="password" 
       id="password"> 
     </label> 
     <label> 
      <span>Confirm password : </span> 
      <input value="kaniusBAD" class="validate[required,equals[password]] text-input" type="password" 
       name="password2" id="password2"> 
      <br> 
      validate[required,equals[password]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Function </legend> 
     <label> 
      <span>Write 'HELLO' : </span> 
      <input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text" 
       id="lastname" name="lastname"> 
      <br> 
      validate[required,funcCall[checkHELLO]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>MinSize </legend> 
     <label> 
      Minimum field size 
      <br> 
      <input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize" 
       id="minsize"> 
      <br> 
      validate[required,minSize[6]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>MaxSize </legend> 
     <label> 
      Maximum field size, optional 
      <br> 
      <input value="" class="validate[optional,maxSize[6]] text-input" type="text" 
       name="maxsize" id="maxsize"> 
      <br> 
      validate[maxSize[6]]<br> 
      note that the field is optional - it won't fail if it has no value 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Min </legend> 
     <label> 
      integer &gt;= -5 
      <br> 
      <input value="-7" class="validate[required,custom[integer],min[-5]] text-input" type="text" 
       name="min" id="min"> 
      <br> 
      validate[required,custom[integer],min[-5]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Max </legend> 
     <label> 
      integer ,50] 
      <br> 
      <input value="55" class="validate[required,custom[integer],max[50]] text-input" type="text" 
       name="max" id="max"> 
      <br> 
      validate[required,custom[integer],max[50]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Past </legend> 
     <label> 
      Checks that the value is a date in the past 
      <br> 
      <span>Please enter a date ealier than 2010/01/01</span> 
      <input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input" 
       type="text" name="past" id="past"> 
      <br> 
      validate[custom[date],past[2010/01/01]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Future </legend> 
     <label> 
      Checks that the value is a date in the future 
      <br> 
      <span>Please enter a date older than today's date</span> 
      <input value="2011-01-" class="validate[custom[date],future[NOW]] text-input" type="text" 
       name="future" id="future"> 
      <br> 
      validate[custom[date],future[NOW]] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Group required </legend> 
     <label> 
      Checks if at least one of the input is not empty. 
      <br> 
      <br> 
      <span>Please enter a credit card</span> 
     </label> 
     <input value="" class="validate[groupRequired[payments]] text-input" type="text" 
      name="creditcard1" id="creditcard1"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please enter a paypal acccount</label> 
     <input value="" class="validate[groupRequired[payments],custom[email]] text-input" 
      type="text" name="paypal" id="paypal"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please enter a bank account</label> 
     <input value="" class="validate[groupRequired[payments],custom[integer]] text-input" 
      type="text" name="bank" id="bank"> 
     <label> 
      <strong>OR</strong></label><br> 
     <label> 
      Please choose from select</label> 
     <select class="validate[groupRequired[payments]] text-input" type="text" name="bank2" 
      id="bank2"> 
      <option value="">Choose a payment option</option> 
      <option value="Paypal">Paypal</option> 
      <option value="Bank">Bank account</option> 
     </select> 
    </fieldset> 
    <fieldset> 
     <legend>Date Range<br> 
     </legend> 
     <label> 
      Checks that the start date is before the end date Please enter an end date ealier 
      than the start date<br> 
      <br> 
      <label for="date1"> 
       Start Date : 
      </label> 
      <input value="9/1/2009" class="validate[dateRange[grp1]]" type="text" id="date1"> 
     </label> 
     <label> 
      <label for="date2"> 
       End Date : 
      </label> 
      <input value="3/18/1985" class="validate[dateRange[grp1]]" type="text" id="date2"> 
      <br> 
      validate[dateRange[grp1]]<br> 
      Note* Both fields must have the same name 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Date Time Range<br> 
     </legend> 
     <label> 
      Checks that the start date and time are before the end date and time Please enter 
      an end date ealier than the start date<br> 
      <br> 
      <label for="date1"> 
       Start Date Time: 
      </label> 
      <input value="9/1/2009 9:30:00 PM" class="validate[dateTimeRange[grp2]]" type="text" 
       id="datetime1"> 
     </label> 
     <label> 
      <label for="date2"> 
       End Date Time: 
      </label> 
      <input value="9/1/2009 2:30:00 AM" class="validate[dateTimeRange[grp2]]" type="text" 
       id="datetime2"> 
      <br> 
      validate[dateTimeRange[grp2]<br> 
      Note* Both fields must have the same name 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Credit Card </legend> 
     <label> 
      Checks that the credit card number is at least theoretically valid, according the 
      to the <a href="http://en.wikipedia.org/wiki/Luhn_algorithm">Luhn checksum algorithm</a>, 
      but not whether the specific card number is active with a bank, etc. 
      <br> 
      <br> 
      Since credit cards are often presented in different formats, spaces and hyphens 
      (' ','-') are simply ignored. 
      <br> 
      <br> 
      Examples:<br> 
      <ul> 
       <li>4111 1111 1111 1111</li> 
       <li>3737-321345-610004</li> 
      </ul> 
      <a href="http://www.paypalobjects.com/en_US/vhelp/paypalmanager_help/credit_card_numbers.htm"> 
       More examples</a> 
      <br> 
      <input value="" class="validate[required,creditCard] text-input" type="text" name="creditcard2" 
       id="creditcard2"> 
      <br> 
      validate[required,creditCard] 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Checkbox </legend> 
     <label> 
      Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoCheckBox.html"> 
       [DEMO]</a> 
     </label> 
    </fieldset> 
    <fieldset> 
     <legend>Ajax </legend> 
     <label> 
      Check this <a href="http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html"> 
       [DEMO]</a> 
     </label> 
    </fieldset> 
    <input class="submit" type="submit" value="Validate &amp; Send the form!"><hr> 
    </form> 
</body> 
</html> 
+0

檢查'Jquery' JS文件是否下載到客戶端或不在內容頁面。 –

+0

如何檢查? – PeteEngineer

+0

@ user1482424 - 根據您的瀏覽器,您可以使用開發人員工具。在IE 7+中,你可以點擊'F12'來啓動它們。在Chrome中,它是「Ctrl + Shift + I」。在FireFox中它是'Ctrl + Shift + K' – Josh

回答

0

這只是一個不知道你的網站結構的預感,但Page.ResolveUrl正在等待一個虛擬路徑。你需要使你的URL相對。

Page.ResolveUrl("~/JQuery/jquery-1.6.min.js") 

這將呈現正確的URL,無論您的頁面從何處加載。

+1

我試過了..但它沒有解決問題 – PeteEngineer

+0

@ user1482424 - 你將不得不告訴我們實際的錯誤是什麼。在瀏覽器中打開開發者工具,看看出現了什麼錯誤。資源是否無法加載?有腳本錯誤嗎?您的瀏覽器會爲您提供所有這些信息。 – Josh

+0

沒有錯誤..當我使用內容頁面時,css沒有在頁面中加載,並且驗證不起作用,比如日期比較驗證..當我在內容頁面上時它不會觸發,否則它正在工作 – PeteEngineer

相關問題