在引导模式弹出之前验证表单 [英] Validate form before Bootstrap modal popup
本文介绍了在引导模式弹出之前验证表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在php文件中，我具有简单的形式和引导模态.单击提交按钮后，将显示引导模态.
in php file i have simple form and bootstrap modal . after clicking submit button bootstrap modal will display.
表格为:
我需要验证以上表单字段.如果成功，那么我需要显示模式并验证那些字段.
i need to validate above form fields. if it is success then i need to display the modal and validate those fields.
模式是:
我的代码是:
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Fill Below Details</h3>
</div>
<div class="modal-body">
<div class="main-login pop-up-form">
<form class="" method="post" action="#"><br>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="name" id="name" placeholder="Enter your Name"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your Email"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-map-marker" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Address"/>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="username" id="username" placeholder="Enter your Phone No"/>
</div>
</div>
</div>
<div class="form-group ">
<a href="#" target="_blank" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button">CLICK For Enquiry</a>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
</div>
</div>
</div>
</div>
</div>
表单代码如下所示:
Form code is showed below:
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<input type="date" class="form-control" name="udate" id="udate" placeholder="ghf" style="height: 39px !important;" />
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>
<select name="ftime" id="ftime">
<option value="">---Select---</option>
<option value="1">Breakfast</option>
<option value="2">Lunch</option>
<option value="3">Dinner</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10 food">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<select id="ftype" name="ftype" onchange="validate()">
<option value="">--select--</option>
<option value="hai">V</option>
<option value="hai">NV</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-money fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="amount" id="amount" placeholder="hai" readonly="readonly" />
</div>
</div>
</div>
<div class="form-group ">
<a href="#" data-toggle="modal" data-target="#squarespaceModal" type="button" id="button" class="btn btn-primary btn-lg btn-block login-button" onclick="
validate2()">Submit</a>
</div>
</form>
i无法同时验证形式和形式.请帮助我. 预先感谢
i was not able to validate both the form and modal. please help me on this.. thanks in advance
推荐答案
您可以编写一种简单的验证方法
You can write a simple validation method
一个例子是...
function checkValidation()
{
var isValid = true;
if($("#date").val() == null){
isValid = false;
}
if($("#person").val() == null){
isValid = false;
}
if($("#mail").val() == null){
isValid = false;
}
return isValid;
}
if(checkValidation())
$("#modalDialog").show();
else
alert("Form is not valid");
这篇关于在引导模式弹出之前验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
