几天来我一直在尝试让这个验证插件在 jquery 中工作，但我一点运气都没有。
我使用的代码如下。
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>
<script type="text/javascript">
//Jquery Validation, Opening Jquery etc
$(function(){
$("#step1form").validate({
rules: {
firstName: {
required: true
}
}
});
});
</script>
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div>
<form id="step1form" action="" method="POST">
<input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
<input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
</form>
我不知道为什么它不起作用，但非常感谢任何帮助。
最佳答案
你做对了一切，只是错过了一件事， 您必须指定每个输入类型的名称，因为验证插件适用于元素名称。
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Jquery Validation, Opening Jquery etc
$(function(){
$("#step1form").validate({
rules: {
firstName: {
required: true
},
lastName: {
required: true
},
email: {
required: true
},
mobile: {
required: true
}
}
});
});
</script>
<div class="info">We would love to help you out just give us a few details and you'll be on your way!</div>
<form id="step1form" action="" method="POST">
<input name="firstName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="firstName" placeholder="First Name (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='First Name (Required)'">
<input name="lastName" style="width: 100%; margin: 3px 0 3px 0; padding-right: 1%;" type="text" id="lastName" placeholder="Surname (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Surname (Required)'">
<input name="email" style="width: 100%; margin: 3px 0 3px 0;" type="text" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
<input name="mobile"style="width: 100%; margin: 3px 0 3px 0;" type="text" id="mobile" placeholder="Mobile Number (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Mobile Number (Required)'"><br/><br/>
<input style="float: right; width: 150px;" type="submit" name="submitstep0" value="Next Step"/>
</form>
</div>
</body>
</html>关于javascript - Jquery 验证在网站上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32940812/