使用Jquery验证验证表单(Validate form with Jquery validation)

使用Jquery验证验证表单(Validate form with Jquery validation)

我想验证我的表单，但我有这个错误：

Uncaught TypeError: $(...).validate is not a function

我包含了js文件验证jquery-validate.min.js和jquery-validate.js.Thanks

的index.html

<form id="form1"> <label for="phone">First Name</label> <input type="text" name="name" required /> <input type="button" id="btn" value="ok" /> </form>

file.js

$(document).ready(function (){ $("#form1").validate({ rules: { name: "required" }, messages: { name: "Please specify your name" } }) $('#btn').click(function() { $("#form1").valid(); }); });

I want to validate my form, but I had this error :

Uncaught TypeError: $(...).validate is not a function

I included the js files validation jquery-validate.min.js and jquery-validate.js.Thanks

index.html

<form id="form1"> <label for="phone">First Name</label> <input type="text" name="name" required /> <input type="button" id="btn" value="ok" /> </form>

file.js

$(document).ready(function (){ $("#form1").validate({ rules: { name: "required" }, messages: { name: "Please specify your name" } }) $('#btn').click(function() { $("#form1").valid(); }); });

最满意答案

检查一下并注意脚本的包含方式：

$(document).ready(function (){    
    $("#form1").validate({
        rules: {
            name: "required"
        },
        messages: {
            name: "Please specify your name"
        }
    });
    
    $('#btn').click(function() {
        $("#form1").valid();
    });
}); 
  
#form1 label.error {
    color: #FB3A3A;
    display: block;
    margin: 10px;
    padding: 0;
    text-align: left;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>

<form id="form1">
<label for="name">First Name</label>
<input type="text" name="name" required />
<input type="button" id="btn" value="ok" />
</form> 
  
 
Check this and note how the scripts are included:
 
 
 
  
  
$(document).ready(function (){    
    $("#form1").validate({
        rules: {
            name: "required"
        },
        messages: {
            name: "Please specify your name"
        }
    });
    
    $('#btn').click(function() {
        $("#form1").valid();
    });
}); 
  
#form1 label.error {
    color: #FB3A3A;
    display: block;
    margin: 10px;
    padding: 0;
    text-align: left;
} 
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>

<form id="form1">
<label for="name">First Name</label>
<input type="text" name="name" required />
<input type="button" id="btn" value="ok" />
</form>