2012-08-14 62 views
-1

我在使用JQuery进行表单验证时遇到了问题。Jquery表单验证:不显示的解释性段落

我的代码应该显示一个段落,它解释页面加载时页面顶部的必填字段。这段没有显示出来。

这是我的完整文件:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="form_jquery.aspx.cs" 
Inherits="form_jquery" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 

     <head runat="server"> 
      <title></title> 
      <link rel="Stylesheet" href="form.css" type="text/css" media="screen" 
      /> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 

      </script> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        var requiredFlag = ' * '; 
        var requiredKey = $('input.required:first').next('span').text(); 
        requiredKey = requiredFlag + requiredKey.replace(/^\((.+)\)$/, "$1"); 
        var conditionalFlag = ' ** '; 
        var conditionalKey = $('input.conditional:first').next('span').text(); 
        conditionalKey = conditionalFlag + conditionalKey.replace(/\((.+)\)/, "$1"); 
        $('form :input').filter('.required').next('span').text(requiredFlag).end().prev('label').addClass('req-label'); 
        $('form :input').filter('.conditional').next('span').text(conditionalFlag); 
        $('<p></p>').addClass('field-keys').append(requiredKey + '<br />').append(conditionalKey).insertBefore('#contact'); 
       }); 
      </script> 
     </head> 

     <body> 
      <form id="form1" runat="server"> 
       <div> 
        <fieldset> 
         <legend>Personal Info</legend> 
         <ol> 
          <li> 
           <label for="first-name">First Name</label> 
           <input class="required" type="text" name="first-name" 
           id="first-name" /> 
           <span>(required)</span> 
          </li> 
          <li> 
           <label for="last-name">Last Name</label> 
           <input class="required" type="text" name="last-name" 
           id="last-name" /> 
           <span>(required)</span> 
          </li> 
          <li>How would you like to be contacted? (choose at least one method) 
           <ul> 
            <li> 
             <label for="by-email"> 
              <input type="checkbox" name="by-contact-type" value="E-mail" id="by-email" 
              />by E-Mail</label> 
             <input class="conditional" type="text" name="email" id="email" 
             /> 
             <span>(required when corresponding checkbox checked)</span> 
            </li> 
            <li> 
             <label for="by-phone"> 
              <input type="checkbox" name="by- contact-type" value="Phone" id="by-phone" 
              />by Phone</label> 
             <input class="conditional" type="text" name="phone" id="phone" 
             /> 
             <span>(required when corresponding checkbox checked)</span> 
            </li> 
            <li> 
             <label for="by-fax"> 
              <input type="checkbox" name="by- contact-type" value="Fax" id="by-fax" 
              />by Fax</label> 
             <input class="conditional" type="text" name="fax" id="fax" 
             /> 
             <span>(required when corresponding checkbox checked)</span> 
            </li> 
           </ul> 
          </li> 
         </ol> 
        </fieldset> 
       </div> 
      </form> 
     </body> 

    </html> 
+1

你会得到什么错误?为什么当前的稳定版本是1.8.0时使用jQuery 1.6.2?第三,当你验证(http://docs.jquery.com/Plugins/Validation)是一个很好的插件时,你为什么要自己进行验证? – dnagirl 2012-08-14 11:53:02

+1

在倾倒你的页面之前要做的一件事,使它易于阅读,使用像http://jsbeautifier.org这样的工具,消息来源让我的眼睛受到伤害。 – 2012-08-14 11:53:54

+0

@Mark,不错的链接!我将它添加到我的工具箱 – dnagirl 2012-08-14 12:00:03

回答

0

你有这样的:

.insertBefore('#contact') 

,但我没有看到你的页面上的任何id="contact"元素。有什么缺失?否则,你需要为jQuery提供一个有效的选择器来定位。

另外,你没有在你的问题中标记这个,但是你的第一行让我假设你正在做WebForms开发。请注意,任何带有runat="server"的标记都不会将您输入标记(或设计者)的id