2011-03-08 60 views
1

我有以下代码:验证不会工作。它不会显示错误消息。有什么可能是错的?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Registration</title> 
     <script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script> 
     <script type="text/javascript" src="/dateplugin.js"></script> 
     <link rel="stylesheet" type="text/css" href="/stylez.css"/> 
     <script type="text/jscript"> 
     $(document).ready(function(){ 
     //$.dateSelectBoxes('mon','da','yea'); 
     //form validation 
    var hasError = false; 
    var emailReg = /^([w-.][email protected]([w-]+.)+[w-]{2,4})?$/; 
    var email = $("#em").val(); 
    var fname=$("#fn").val(); 
    var lname=$("#ln").val(); 
    var school=$("#sch").val(); 
    var classes=$("#clas").val(); 
    var grade=$("#yr").val(); 
    var month=$("#mon").val(); 
    var days=$("#da").val(); 
    var years=$("#yea").val(); 
    var pass=$("#pas").val(); 
    var zipcode=$("#zip").val(); 

    $("#submitbutton").click(function(e){ 
    if (fname==''){ 
     $("#fn").after("Please enter your first name "); 
     hasError=true; 
    } 

    if (lname==''){ 
     $("#ln").after("Please enter your last name"); 
     hasError=true; 
    } 

     if(school==''){ 
     $("#sch").after("Please enter the name of your institution"); 
     hasError=true; 
     } 

     if (classes==''){ 
     $("#clas").after("Please enter current classes you are taking"); 
     hasError=true; 
     } 

     if (month=='' || day=='' || year==''){ 
     $("#mon").after("Please enter your birthday"); 
     hasError=true; 
     } 

     if (pass==''){ 
     $("#pas").after("Please enter the password"); 
     hasError=true; 
     } 

     if (zipcode==''){ 
     $("#zip").after("Please enter your zipcode"); 
     hasError=true; 
     } 

     if (grade==''){ 
     $("#yr").after("Please enter the year you are in"); 
     hasError=true; 
     } 

     if(email == '') { 
     $("#em").after("You forgot to enter the email address to send "); 
      hasError = true; 
     } else if(!emailReg.test(email)) { 
      $("#em").after("Enter a valid email address to send to."); 
      hasError = true; 
     } 

     if (hasError == true) { 

      e.preventDefault(); 
    } 
    else{ 
     //submit form via ajax 
    } 
    }); 


     }); 
     </script> 

     <style type="text/css"> 



     </style> 
    </head> 
    <body class="fancy"> 
     <form action="" method="" accept-charset="utf-8"> 
     <table width="800" border="0" cellpadding="1" cellspacing="0" > 
     <tr> 
     <td id="column1"> 
     </td> 
     <td id="column2"> 
      <div class="Sintext"><h1>Sign Up</h1></div> 
      <div> 
     <label>First Name</label> 
     <input type="text" name="fnam" class="fields" id="fn" /> 
     </div> 
     <div> 
     <label>Last Name</label> 
     <input type="text" name="lnam" class="fields" id="ln"/> 
     </div> 
     <div > 
     <label>School</label> 
     <input type="text" name="scname" class="fields" id="sch"/> 
      </div> 
      <div> 
     <label>Major</label> 
     <select id="majo" name="major"> 
      <option value="5">&mdash;undeclared&mdash;</option> 
     </select> 
     </div> 
     <div> 
      <label>Current Classes</label> 
      <input type="text" name="class" id="clas" class="fields"/> 
      <span>add class field</span> 
      </div> 
     <div> 
      <label>Year</label> 
      <select id="yr" name="year"> 
       <option value="">&mdash;Select the year &mdash;</option> 
       <option value="10">Freshman </option> 
       <option value="20">Sophomore</option> 
       <option value="30">junior</option> 
       <option value="40">senior</option> 
       <option value="50">Alumni </option> 
       <option value="60">HighSchool </option> 
       </select> 
     </div> 
     <div > 
      <label>Campus</label> 
      <input type="text" name="campus" class="fields" /> 
     </div> 
     <div > 
      <label>Email</label> 
      <input type="text" name="email" id="em" class="fields"/> 
     </div> 
     <div > 
      <label>Password</label> 
      <input type="text" name="passwd" id="pas" class="fields"/> 
     </div> 
     <div > 
      <label>Sex</label> 
    <select name="sex" class="sexfield"> 
     <option value="3">Male</option> 
     <option value="4">Female </option> 
    </select> 
     </div> 
     <div id="bdate"> 
      <label>Birthday</label> 
      <select id="mon" name="mont"> 
       <option value="0">Month</option> 
       </select> 
      <select id="da" name="day"> 
       <option value="1">Day</option> 
       </select> 
      <select id="yea" name="year"> 
       <option value="2">Year</option> 
       </select> 
      </div> 
     <div >  
      <label>Zipcode</label> 
      <input type="text" name="zipcod" id="zip" class="zipfield"/> 
     </div> 
     <div > 
      <button id="submitbutton" class="sinbutton">Sign Up</button> 
     </div> 
     </td> 
     </tr> 
    </table> 



     </form> 
    </body> 
    </html> 

回答

1

嗯,首先:

<div "> <--- Invalid Markup 
     <label>Password</label> 
     <input type="text" name="passwd" id="pas" class="fields"/> 
    </div> 

<table width="800" border="0" cellpadding="1" cellspacing="0" /> <--- self closing Table...... 

您的电子邮件正则表达式是无效的。

而在去年: 变化:

$("#sign").click(function(e) { 
}) 

到:

$("#submitbutton").click(function(e) { 
}); 

<button type="submit" id="submitbutton" class="sinbutton">Sign Up</button> 

<button id="submitbutton" class="sinbutton">Sign Up</button> 

if (hasError == true) { 
     return false; 
    } 
    else { 
     //submit form via ajax 
    } 

if (hasError == true) { 
     e.preventDefault(); 
    } 
    else { 
     //submit form via ajax 
    } 

UPDATE

你的正则表达式仍然无效!取消注释正则表达式,以及检查它的代码现在将其排除在外。

你声明:

var days=$("#da").val(); 

但后来你试图访问一个不存在的变量“天”。

同样的事情在这里:var years=$("#yea").val();但访问变量年:

if (month=='' || day=='' || year==''){ 

第一:你需要学习如何使用Firebug(火狐),开发工具(IE)或Chrome的检查,因为javascript错误显示在那里。

第二个:你应该学会如何正确地设置你的问题。我必须现在编辑你的问题两次,清理它。

第三:在发布有关HTML/Javascript/CSS的问题时,应该使用jsfiddle.net来演示您的代码。看看这个:

http://jsfiddle.net/yngvebn/FdunX/

+0

代码谢谢你们!我已经改变了代码,就像你说的,但仍是()后不会显示错误message.look在上面的代码的代码。 – Djm 2011-03-08 22:39:27

+0

在我的答案中查看我的更新。 – 2011-03-09 07:59:54

0

,因为你有形式的,当你点击按钮的形式提交提交按钮。改变这样的

 
$("#sign").click(function(e){ 
    e.preventDefault(); 
    . 
    . 
    . 
相关问题