我绝不是专家,但我之前已经这样做了,由于某种原因,我的表格存在问题,而不是这次验证。
我在另一个页面上做了这个并且它工作正常所以我只是将其粘贴到另一个部分并做了一些小改动,现在它停止了工作。
这是我的fiddle,任何提示都会受到欢迎。
Html:
<form action="" id="ad_brochure_form" method="post" enctype="multipart/form-data" language="JavaScript" name="FrontPage_Form2">
<fieldset>
<legend style="margin-left:8em;" class="big">Contact Information</legend>
<p id="required">All Fields Are Required</p>
<label>First Name</label><input placeholder=" Jane or John" id="firstname" name="firstName" size="25" style="border: 1px solid #FFFFFF; width: 235px;" tabindex="1" type="text" />
<label>Last Name</label><input placeholder=" Doe" id="lastname" name="lastName" size="25" style="border: 1px solid #FFFFFF; width: 235px;" tabindex="1" type="text" />
<label>Title</label><input placeholder="RN" id="firsttitle" maxlength="100" name="title" size="50" style="border: 1px solid #FFFFFF; width: 235px;" tabindex="2" type="text" />
<label>Email</label><input placeholder=" example@example.com" id="firstemail" maxlength="100" name="email" size="50" style="border: 1px solid #FFFFFF; width: 235px;" tabindex="2" type="text" />
<label>Work Phone</label><input placeholder=" 000-0000" id="firstphone" maxlength="100" name="phone" size="50" style="border: 1px solid #FFFFFF; width: 102px;" tabindex="3" type="text"/>
</fieldset>
<fieldset>
<legend style=" margin-left:12em;">Facility Information</legend>
<label>Facility Name</label><input maxlength="100" id="firstfacility" placeholder=" NIFA" name="facility" size="50" style="border: 1px solid #FFFFFF; width: 232px;" tabindex="4" type="text" />
<label>Address</label><input maxlength="100" id="firstaddress" placeholder=" 555 Example St." name="address" size="50" style="border: 1px solid #FFFFFF; width: 232px;" tabindex="4" type="text" />
<label>City</label><input placeholder=" City" id="firstcity" name="city" size="20" style="border: 1px solid #FFFFFF; width: 232px;" tabindex="5" type="text" />
<label>State</label><input placeholder=" State" id="firststate" name="state" size="20" style="border: 1px solid #FFFFFF; width: 232px;" tabindex="5" type="text" />
<label>Zip</label><input placeholder=" 00000" id="firstzip" name="zip" style="border: 1px solid #FFFFFF;" tabindex="7" type="text" />
</fieldset>
<input id="brochure_submit" name="Submit" tabindex="8" type="submit" value="Submit" />
</form>
JavaScript的:
$(document).ready(function () {
console.log("test");
$('#ad_brochure_form >form').validate({
errorPlacement: function (error, element) {
error.insertAfter(element);
},
errorElement: "em",
rules: {
firstname: {required: true},
lastname: {required: true},
firsttitle: {required: true},
firstphone: {required: true,
firstfacility: {required: true},
firstaddress: {required: true},
firstcity: {required: true},
firststate: {required: true},
firstzip: {required: true},
firstemail: {required: true, email: true}
},
messages: {
firstname: {required: "Please enter your first name<br />"},
lastname: { required: "Please enter your first name<br />"},
firstaddress: {required: "Please enter your street address<br />"},
firstcity: {required: "Please enter the city in which the facility is <br />"},
firststate: {required: "Please enter the state"},
firstfacility: {required: "Please enter a facility name<br />" },
firstzip: { required: "Please enter the zipcode of the facility<br />"},
firstemail: {email: "Please enter a valid email<br />",required: "A valid email is required<br />"},
firstphone: {required: "Please enter a valid number<br />"}
},
success: function (element) {
element.remove();
}
});
});