jquery验证不在网站上工作
问题描述:
我一直在尝试几天,让这个验证插件工作在jQuery中,我没有运气。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>
我不知道为什么它不工作,但任何帮助,非常感谢。
答
验证对输入的'type'属性起作用。 因此,如下所示更改电子邮件和手机号码的类型。
<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="email" id="emailaddress" placeholder="Email (Required)" onfocus="this.placeholder=''" onblur="this.placeholder='Email (Required)'">
<input style="width: 100%; margin: 3px 0 3px 0;" type="number" 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>
你检查任何控制台错误? –
页面未加载,所以我不能。 –
它被卡在载入页面0% –