jquery,表单未验证

时间:2015-08-29 05:39:06

标签: jquery jquery-validate

我是jQuery的新手,我不得不将它作为uni项目的一部分使用。我遇到的问题是它似乎没有正确地调用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>

<link href="site.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() { 
$( "#registerForm" ).validate({
        rules: {    
            email:{
                required:true,
                email:true
            },
            emailRepeat:{
                required:true,
                email:true
                equalTo: "#email"
            },
            password:{
                required:true
            },
            passwordRepeat:{
                required:true
                equalTo: "#password"
            },
            fullname:{
                required:true,
                minlength:2,
                maxlength:15
            },
            phone :{
                number:true,
                digits:true,
                minlength:7,
                maxlength:10
            },
            street:{

            },
            city:{
                required:true
            },
            country:{
                required:true
            }
        },
        messages:{
                }

    });
});
</script>

<title>Register</title>

</head>

<body>
<div id="container">
<div id="masthead"> </div>
<div id="top-nav">
    <ul id="top">
        <li> 
            <a href="books.htm">Browse Books</a>
        </li>
        <li>
            <a href="about.htm">About Us </a>
        </li>
        <li>
            <a href="signup.htm">Sign Up</a>
        </li>
        <li>
            <a href="login.htm">Log In</a>
        </li>
        <li>
            <a href="profile.htm">Your Account</a>
        </li>

    </ul>
</div>

<div id="main-content">
    <form id ="registerForm" action="" class="register">
            <h1>Registration</h1>

            <div class="infobox">
                    <p>Please enter all the required fields and submit once completed</p>
                </div>
            <fieldset class="row1">
                <legend>Account Details
                </legend>
                <p>
                    <label>Email *
                    </label>
                    <input name="email" id="email" />
                    <label>Repeat email *
                    </label>
                    <input name="emailRepeat" id="emailRepeat" type="text"/>
                </p>
                <p>
                    <label>Password*
                    </label>
                    <input name="password" id="password" type="password"/>
                    <label>Repeat Password*
                    </label>
                    <input name="passwordRepeat" id="passswordRepeat" type="password"/>
                    <label class="obinfo">* required fields
                    </label>
                </p>
            </fieldset>
            <fieldset class="row2">
                <legend>Personal Details
                </legend>
                <p>
                    <label>Name *
                    </label>
                    <input name="fullname" id="fullname"type="text" class="long" />
                </p>
                <p>
                    <label class="optional">Phone 
                    </label>
                    <input name="phone" id="phone" type="text"/>
                </p>
                <p>
                    <label class="optional">Street
                    </label>
                    <input name="street" id="street" type="text" class="long"/>
                </p>
                <p>
                    <label>City *
                    </label>
                    <input name="city" id="city" type="text" class="long" />
                </p>
                <p>
                    <label>Country *
                    </label>
                    <select>
                        <option>
                        </option>
                        <option value="1">New Zealand 
                        </option>
                        <option value="2">Australia
                        </option>
                        <option value="3">United States
                        </option>
                        <option value="4">Canada
                        </option>

                    </select>
                </p>
                            </fieldset>
            <fieldset class="row3">
                <legend>Further Information
                </legend>
                <p>
                    <label>Gender *</label>
                    <input type="radio" value="radio"/>
                    <label class="gender">Male</label>
                    <input type="radio" value="radio"/>
                    <label class="gender">Female</label>
                </p>
                <p>
                    <label>Birthdate *
                    </label>
                    <select name="day" id="day"class="date">
                        <option value="">
                        </option>
                        <option value="1">01
                        </option>
                        <option value="2">02
                        </option>
                        <option value="3">03
                        </option>
                        <option value="4">04
                        </option>
                        <option value="5">05
                        </option>
                        <option value="6">06
                        </option>
                        <option value="7">07
                        </option>
                        <option value="8">08
                        </option>
                        <option value="9">09
                        </option>
                        <option value="10">10
                        </option>
                        <option value="11">11
                        </option>
                        <option value="12">12
                        </option>
                        <option value="13">13
                        </option>
                        <option value="14">14
                        </option>
                        <option value="15">15
                        </option>
                        <option value="16">16
                        </option>
                        <option value="17">17
                        </option>
                        <option value="18">18
                        </option>
                        <option value="19">19
                        </option>
                        <option value="20">20
                        </option>
                        <option value="21">21
                        </option>
                        <option value="22">22
                        </option>
                        <option value="23">23
                        </option>
                        <option value="24">24
                        </option>
                        <option value="25">25
                        </option>
                        <option value="26">26
                        </option>
                        <option value="27">27
                        </option>
                        <option value="28">28
                        </option>
                        <option value="29">29
                        </option>
                        <option value="30">30
                        </option>
                        <option value="31">31
                        </option>
                    </select>
                    <select name="month" id="month">
                        <option value="">                    
                        </option>
                        <option value="1">January
                        </option>
                        <option value="2">February
                        </option>
                        <option value="3">March
                        </option>
                        <option value="4">April
                        </option>
                        <option value="5">May
                        </option>
                        <option value="6">June
                        </option>
                        <option value="7">July
                        </option>
                        <option value="8">August
                        </option>
                        <option value="9">September
                        </option>
                        <option value="10">October
                        </option>
                        <option value="11">November
                        </option>
                        <option value="12">December
                        </option>
                    </select>
                    <input name="year" id="year" class="year" type="text" size="4" maxlength="4"/>e.g 1976
                </p>
                                                   </fieldset>
            <fieldset class="row4">
                <legend>Terms and Mailing
                </legend>
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>*  I accept the <a href="#">Terms and Conditions</a></label>
                </p>
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>I want to receive personalized offers by your site</label>
                </p>
                <p class="agreement">
                    <input type="checkbox" value=""/>
                    <label>Allow partners to send me personalized offers and related services</label>
                </p>
            </fieldset>
            <div><input type="submit" value="Submit" /></div>
        </form> 
</div>

<div id="footer">
    <p>
       <a href="#top"> Back to Top </a>  </p>
    <p>
        Your E-Book Company Ltd 2015  </p>
</div>

</div>

</body>

</html>

2 个答案:

答案 0 :(得分:3)

您在规则属性的末尾缺少逗号:

        emailRepeat:{
            required:true,
            email:true,
            equalTo: "#email"
        },
        ...
        passwordRepeat:{
            required:true,
            equalTo: "#password"
        },

除最后一行之外的每一行都应以逗号结尾,否则会出现语法错误

答案 1 :(得分:0)

您必须在字符串中定义规则对象的键 喜欢这个

$( "#registerForm" ).validate({
    rules: {    
        "email":{
            required:true,
            email:true
        },
        "emailRepeat":{
            required:true,
            email:true,
            equalTo: "#email"
        },
        "password":{
            required:true
        },
        "passwordRepeat":{
            required:true,
            equalTo: "#password"
        },
        "fullname":{
            required:true,
            minlength:2,
            maxlength:15
        },
        "phone" :{
            number:true,
            digits:true,
            minlength:7,
            maxlength:10
        },
        "street":{

        },
        "city":{
            required:true
        },
        "country":{
            required:true
        }
    },
    messages:{
            }

});