我想验证文本区域并选择html格式的框，然后用jquery提交html表单，任何人都可以帮助我（表单无需刷新就可以登顶）。我面临的问题是我制作脚本提交html表单而不刷新但我不知道如何将验证与它集成我希望它像：1。验证表单2.如果验证真正提交html而不刷新jquery
JQUERY：
$(document).ready(function() {
$("form#form").submit(function() {
var bno = $("#bno").val();
var date = $("#date").val();
var hour = $("#hour").val();
var minute = $("#minute").val();
var dataString = 'bno=' + bno + '&date=' + date + '&hour=' + hour + '&minute=' + minute;
$.ajax({
type: "POST",
url: "editb.php",
data: dataString,
success: function(){
$('.mform').hide();
$('.success').show();
}
});
return false;
});
});
HTML表格：
<form method="post" name="form" id="form">
<fieldset id="opt">
<legend>Change Journy Date</legend>
<label for="choice">Journy Date : </label>
<input type="text" id="date" name="date" value=""> <br />
</fieldset>
<fieldset id="personal">
<legend>Change Journy Time</legend>
<label for="lastname">Journy Time : </label>
<select id="hour" name="hour">
<option value="">HH</option>
<option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option>
</select><select id="minute" name="minute">
<option value="">MM</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Update" />
<input id="button2" type="reset" />
</div>
</form>
<div class="success" style="display: none;"><div id="box"><p><strong><center>FORM SUBMITTED SUCCESSFULLY</center></strong></p></div></div>
答案 0 :(得分：0)
Jquery有很多用于ajax提交和验证的插件。您可以考虑使用它们，而不是编写自己的逻辑。我推荐
Jquery form plugin - 通过ajax提交表单。删除提交，点击一下按钮，通过ajax提交表单。
Jquery Validation plugin - 根据课程验证所有内容。您甚至可以使用.addValidator方法编写自己的逻辑。
这两个插件都适用于每个插件..
我认为这会给你一个想法
<script>
$(document).ready(function(){
$("#form").validate();
if($("#form").valid())
{
$('#form').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit();
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
}
});
</script>
<script type="text/javascript" src="/css/js/jquery.validate.js"></script>
<script type="text/javascript" src="/css/js/jquery.form.js"></script>
<form method="post" name="form" id="form">
<fieldset id="opt">
<legend>Change Journy Date</legend>
<label for="choice">Journy Date : </label>
<input type="text" id="date" name="date" value=""> <br />
</fieldset>
<fieldset id="personal">
<legend>Change Journy Time</legend>
<label for="lastname">Journy Time : </label>
<select id="hour" name="hour">
<option value="">HH</option>
<option value="00">00</option><option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option><option value="05">05</option><option value="06">06</option><option value="07">07</option><option value="08">08</option><option value="09">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option>
</select><select id="minute" name="minute">
<option value="">MM</option>
<option value="00">00</option>
<option value="05">05</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
</select>
<input type="hidden" name="bno" id="bno" value="<?=$bookingno?>" />
</fieldset>
<div align="center">
<input id="button2" type="submit" value="Update" />
<input id="button2" type="reset" />
</div>
</form>
<div class="success" style="display: none;"><div id="box"><p><strong><center>FORM SUBMITTED SUCCESSFULLY</center></strong></p></div></div>
工作示例here
答案 1 :(得分：0)
由于您没有为月，日和年制作选择框，因此您必须指定日期的格式。这是以MM-DD-YYYY格式验证日期的代码，每天或每月允许1位数，并且领先＆amp;尾随空格：
var valid = false, match = false;
if (date) {
match = date.match(/^\s*(\d\d?)-(\d\d?)-(\d{4})\s*$/);
if (match) {
dateobj = new Date(match[3], match[1]-1, match[2]);
valid = dateobj.getFullYear() == match[3]
&& dateobj.getDate() == match[2]
&& dateobj.getMonth()+1 == match[1];
}
}
if (!match)
alert('Please enter date as MM-DD-YYYY');
if (!valid)
alert(date+' is an invalid date');
if (!match || !valid)
return false;
您仍需要检查日期是否在将来。因为你确实选择了小时和时间。分钟，像
这样的测试if (hour == undefined || !hour.length) {
alert('Please select hour'); return false;
}
if (minute == undefined || !minute.length) {
alert('Please select minute'); return false;
}
足够好了。