after()不会显示错误消息

时间:2011-03-09 11:58:34

标签: jquery

任何人都可以尝试看一下代码,我是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>

4 个答案:

答案 0 :(得分:2)

我认为你有两个错误,它们都与调用after()无关。

  1. 您的正则表达式有语法错误。而不是[w-.],而是[w.-]

  2. 你把生日的变量名称混淆了:一个地方的月,日,年在另一个地方,月,日,年。

  3. 如果我修复了这些内容,那么点击提交按钮就可以为我提供我认为你打算做的事情。

答案 1 :(得分:1)

在插入元素后尝试制作,而不仅仅是一串文字:

$("#mon").after('<p>Please enter your birthday</p>');

答案 2 :(得分:1)

我不确定,代码很大......但我认为你不应该为点击按钮asoc一个事件处理程序。您应该将处理程序添加到表单提交。

$("form").submit(
  function (e){
    ....
}
);

答案 3 :(得分:0)

我只想使用一个显示所有错误的div。此外,文档说HTML字符串。你试过一些段落标签吗?我知道这不值得,但值得一试。你能详细说明你得到的结果吗?