Question

我正在尝试关注动态Jquery表单验证的教程，但是卡住了，无法找到我的错误。 Chrome控制台告诉我未捕获的引用错误：$未定义（我的js的第一行）。

这个代码应该在我输入时进行验证。有没有人看到语法错误？

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

<!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 Jsmith@gmail.com</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 &amp; 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>

Answer 1

你的错误ddenotes你没有包含jQuery库。

将jquery.js放在脚本标记

之前

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/script.js">

      //your code here

</script>

Jquery动态表单验证无效

1 个答案: