0
我想跟隨動態jquery表單驗證的教程，但我卡住了，無法找到我的錯誤。 Chrome控制檯告訴我未捕獲的引用錯誤：$未定義（我的js的第一行）。jquery動態表單驗證不起作用
此代碼應該正在驗證爲我鍵入。有沒有人看到語法錯誤？
JS
$(function() {
/***********************************************************************************************/
/* Define some regular expressions */
/***********************************************************************************************/
var expEmail = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/,
expLettersOnly = /^[a-zA-Z ]+$/,
expLettersNumbers = /^[a-zA-Z0-9]*$/;
/***********************************************************************************************/
/* Function that checks if a field has the correct minimum length */
/***********************************************************************************************/
function validateLength(fieldValue, minLength) {
// We remove trailing and leading whitespace
return ($.trim(fieldValue).length > minLength);
}
/***********************************************************************************************/
/* Validate form on typing */
/***********************************************************************************************/
$("#rsgform1").on("keyup", "input.validate-locally", function() {
validateField($(this));
});
/***********************************************************************************************/
/* Function that validates a field */
/***********************************************************************************************/
function validateField(field) {
var errorText = "",
error = false,
value = field.val(),
siblings = field.siblings(".demo-errors");
// Test for which field is sent
switch (field.attr("name")) {
case "firstname":
if (!validateLength(value, 2)) {
error = true;
errorText += "The name is too short!<br />";
}
if (!expLettersOnly.test(value)) {
error = true;
errorText += "The name can only contain letters and spaces!";
}
break;
case "lastname":
if (!validateLength(value, 2)) {
error = true;
errorText += "The username is too short!<br />";
}
if (!expLettersNumbers.test(value)) {
error = true;
errorText += "The username can only contain alphanumeric characters!";
}
break;
case "genDer":
if (value === "0") {
error = true;
errorText += "Please select a gender!";
}
break;
case "email":
if (!expEmail.test(value)) {
error = true;
errorText += "The email address format is invalid!";
}
break;
}
// Display the error message below the field
siblings.html(errorText);
}
});
HTML，你不包括jQuery庫
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RSG Contact Us</title>
</head>
<body>
<div id="contactuscall">
<form id="rsgform1" name="rsgform1" method="post" action="" novalidate>
<fieldset id="field1">
<legend id="legend1">Contact info:</legend>
<p>
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g John Smith, must be between 3 and 25 characters, letters and space only</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="lastname">Last name:</label>
<input type="text" id="lastname" name="lastname" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g John Smith, must be between 3 and 25 characters, letters and space only</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="email">E-mail:</label>
<input type="text" id="email" name="email" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g [email protected]</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="cellphone">Phone:</label>
<input type="text" id="cellphone" name="cellphone" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g 1-444-555-6666</span>
<span class="demo-errors"></span>
</p>
</fieldset>
<fieldset id="field2">
<legend id="legend2">Doggie info:</legend>
<p>
<label for="dogname">Name:</label>
<input type="text" id="dogname" name="dogname" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g Sparky, must be between 3 and 25 characters, letters and space only</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="Breed">Breed:</label>
<input type="text" id="Breed" name="Breed" maxlength="25" class="validate-locally" />
<span class="demo-input-info">E.g Beagle, Poodle, must be between 3 and 25 characters, letters and space only</span>
<span class="demo-errors"></span>
</p>
<p>
<label for="genDer">Gender:</label>
<select name="genDer" maxlength="10" class="validate-locally">
<option value="">- Select a Value-</option>
<option value="Intact Male"> Intact Male </option>
<option value="Neutered Male"> Neutered Male </option>
<option value="Intact Female"> Intact Female </option>
<option value="Neutered Female"> Neutered Female </option>
</select>
<span class="demo-errors"></span>
</p>
</fieldset>
<fieldset id="field3">
<legend id="legend3">Services Required:</legend>
<input type="checkbox" name="reasoNwalk" value="walkSale" class="textfield"/>I'm looking for a Dog Walker!
<input type="checkbox" name="reasoNfood" value="RawSale" class="textfield"/>I'm looking to purchase Raw Food!<br />
<input type="checkbox" name="reasoNgroom" value="groomSale" class="textfield"/>I'm looking for a Dog Groomer!
<input type="checkbox" name="reasoNtraining" value="trainingSale" class="textfield" />I'm looking for a Dog Trainer!
<span class="error"></span>
</fieldset>
<fieldset id="field4">
<legend id="legend4">Questions & Comments</legend>
<textarea rows="7" cols="90" id="freecomments" name="freecomments"></textarea>
</fieldset>
<!--<input id="submit" type="submit" name="submit" value="submit">-->
<input id="submit" type="submit" name="submit" value="submit">
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="validate.js"></script>
</body>
</html>
你需要包括jQuery庫 –
你'包括前jquery'？如果可能的話，這個*應該*通過'html'加載，然後加載腳本。 '' –