验证表单,然后使用 jQuery 显示另一个隐藏表单
validating a form then displaying the other hidden form using jquery
我的jquery代码有点问题。我的页面中有两个表单。一个在用户加载页面时显示,另一个隐藏(设置为 style="display:none;")。我想在第一张表格中填写所有详细信息,然后单击下一步,显示隐藏的表格。问题是,即使第一个表单没有输入,单击"下一步"按钮时也会显示隐藏的表单。所以我猜我在jQuery验证代码上做错了什么(我正在使用jQuery验证插件)。任何帮助将不胜感激,提前感谢
我的代码如下所示: 详情
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<body>
<div class="item item1">
<form action="index.html" method="get" id = "form1">
<h1>The DETAILS</h1>
<p align="justify">Try our FREE landlord cost calculator and<br>
discover the real cost of letting your property. <br>
<input name="name" type="text" placeholder="your name"class="required" />
<br>
<input name="email" type="text" placeholder="your email" class="required" />
<br>
<input name="phone" id="phone" type="text" placeholder="your phone no" class="required" />
<br>
<input name="postcode" id="postcode" type="text" placeholder="postcode of property to let" class="required" />
<br>
<select name="bedrooms" id="bedrooms" placeholder="bedrooms" class="required" >
<option value="1">1</option>
<option value="2" >2</option>
<option value='' disabled selected="selected">Please Choose</option>
</select>
<br>
<input name="hearAbout" type="text" placeholder="where did your hear about us?" class="required" />
<br>
<button class="submit button1 " id = "next" name="submit" type="submit" value="next"><span class="next ">></span>next</button>
</p>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script>
$("#form1").submit(function() {
/* AJAX calls and insertion into #form2 */
$("#form2").show();
return false;
});
</script>
<div class="item item2">
<form action="calculation.php" method="post" id = "form2"style="display:none;">
<h1>The Income</h1>
<label> Estimated monthly rent:£ </label> <input name="rent" id="rent" type="text" /><hr>
THE COSTS STEP 3 <hr>
Agents Commission: <select name="commission" id="commission">
<option value="10%">10%</option>
<option value="12%" selected="selected">12%</option>
</select> <hr>
Estimated Setup Fees:£ <input id="fees" name="fees" type="text" /><hr>
How many weeks in the year do you estimate <br>that your property will<br> be vacant/empty?<input name="weeks" type="text" /><hr>
<button class="submit button2" name="submit" type="submit" value="calculate"><span class="next">></span>calculate</button>
</form>
</div>
您的提交操作应在提交第一个表单时进行验证,然后显示其他表单。请尝试以下代码。
<script>
$(document).ready(function(){
$("#form1").submit(function() {
$("#form1").validate();
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
});
</script>
尝试使用 jQuery 表单插件: http://malsup.com/jquery/form/
把它放在这个部分:
<script src="http://malsup.github.com/jquery.form.js"></script>
然后使用 ajaxForm 修改脚本:
<script>
$("#form1").ajaxForm(function() {
/* AJAX calls and insertion into #productionForm */
$("#form2").show();
return false;
});
</script>
这是我在我的评论中谈论的 哈伦·修 :
$(".selector").validate({
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
email: {
required: true,
email: true
}
},
submitHandler: function(form) {
// do other things for a valid form
form.submit();
$("#form2").show();
return false;
});
}
});
您可以在此处提交。阅读文档。您还可以控制错误放置。
http://jqueryvalidation.org/validate
相关文章:
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- jQuery动态表单显示在select选项上
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将表单张贴到MailChimp,但显示动态成功页面
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- HTML多页表单显示隐藏部分,保留表单数据
- 使用JavaScript将数据从一个表单显示到另一个页面
- Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
- HTML:如何使一个表单显示在另一个表单之上
- 值通过表单提交,然后即使在提交并显示值之后,也会以表单显示已提交的值
- 提交时的 Jquery 表单显示成功消息
- 是否有可接受的跨平台方法在基于触摸的设备上以标准 Web 表单显示数字键盘
- 如何将表单显示从=更改为:
- 表单显示问题+数组下的结果
- 自动完成使用Alpaca表单显示密钥和值
- Google appscript表单显示供用户选择的数组值
- 引导提交表单显示从javascript计时器
- 表单显示PHP HTML
- 基于PHP ajax的表单显示空白页面
- ASP.NET表单显示另一个字段中基于节的表单字段