验证不会工作。它不会显示错误消息......可能是错的?

时间:2011-03-08 12:54:08

标签: jquery

我有以下代码:

<!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-.]+@([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>

2 个答案:

答案 0 :(得分: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
    }

<强>更新

你的正则表达式仍然无效!取消注释正则表达式,以及检查它的代码,暂时取消它。

你宣布:

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

但稍后你试图访问不存在的变量“day”。

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

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

首先:您需要了解如何在Chrome中使用FireBug(Firefox),开发者工具(IE)或检查器,因为此处会显示javascript错误。

第二:您应该学习如何正确格式化问题。我现在必须两次编辑你的问题,清理它。

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

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

答案 1 :(得分:0)

因为您在单击提交的按钮表单时已经形成了提交按钮。像这样更改代码

$("#sign").click(function(e){
    e.preventDefault();
    .
    .
    .