0
동적 Jquery 폼 유효성 검사에 대한 자습서를 따르려고하지만 멈춰서 내 오류를 찾을 수 없습니다. 크롬 콘솔은 잡히지 않은 참조 오류를 알려줍니다. $은 정의되지 않았습니다 (내 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.js를 넣어? 가능하다면 스크립트를 로딩하기 전에 * html로로드해야합니다. '' –