Question

我正在尝试使用jquery和验证插件进行简单的表单验证。当我在html中只使用一个字段，并且只在我的js中调用该字段的要求时，它可以工作。但是，当我尝试添加多个时，它根本不起作用。

js file

// code that does not work
$(document).ready(function(){
   $(".myForm").validate({
      rules: {
        name: {
            required:true,
        },
        lastName:{
            required: true,
        },
        age: {
            required: true,
        },
        email: {
        required: true,
        email: true
    }
    },
     messages: {
        name: {
            required: "Please enter your first name."
            },
        lastName:{
            required: "Please enter your last name."
        },
        age: {
        required:"Please enter your age."},
        email:{
        required: "Please enter your email.",
        email: "not an email."
        }

     }

    });

});

/*code that works when only one field is present*/
$(document).ready(function(){
   $(".myForm").validate({
      rules: {
         name: {
            required: true
               }
         },
         messages: {
            name: "Please enter your first name."
         }
     });
});

我的html文件

<!DOCTYPE html> 
<html>
    <head>
    <link rel="stylesheet" href="FormValidationProject.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script                 src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.j    s"></script>

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

<title>Register</title>
</head>
<body>
    <div id="form">
        <form class="myForm" method="" action="">
            <div class="field">
                <label for="name">First Name</label>
                <br>
                <input type="text" id="name" name="name"></input>
            </div>
            <div class="field">
                <label for="lastName">Last Name</label>
                <br>
                <input type="text" id="lastName" name="lastName"></input>
            </div>
            <div class="field"> 
                <label for="age">Age</label>
                <br>
                <input type="text" id="age" name="age"></input>
            </div>
            <div class="field">
                <label for="email">E-Mail</label>
                <br>
                <input type="text" id="email" name="email"></input>
            </div>
        </form>
    </div>


    </body>
</html>

jquery验证插件不适用于多个字段

0 个答案: