我无法想到逻辑＆amp;在此FIDDLE
实施问题是： 如果至少有一个文本框（2个，即HR＆amp; Min）验证成立，它应该允许提交表格...
例如。如果我在Min文本框中输入“1”点击提交，然后它应该提交表格，因为1是有效的min＆amp;反之亦然 但在我的情况下，如果两个文本框值都变为真，则只提交表单
jQuery代码
$(document).ready(function() {
$.fn.SubmitForm = function(id) { //submit the form
var hour = $("#time-hr-id" + id).val();
var mins = $("#time-min-id" + id).val();
if (isNaN(hour) || hour > 24 || hour < 0.1) {
var error_msg = 'Hour:Not a valid value';
alert(error_msg);
$("#time-hr-id" + id).focus();
} else if(isNaN(mins) || mins > 60 || mins < 0.1) {
var error_msg = 'Mins:Not a valid value';
alert(error_msg);
$("#time-min-id" + id).focus();
} else {
$("#formid" + id).submit();
}
};
});
Html代码：
<table cellspacing="0" class="table table-striped TF" style="width: 100%;" id="table6">
<tbody>
<tr class="fltrow">
<td>
<input id="flt0_table6" type="hidden" ct="0" class="flt">
</td>
<td>
<input id="flt1_table6" type="hidden" ct="1" class="flt">
</td>
<td>
<input id="flt2_table6" type="hidden" ct="2" class="flt">
</td>
<td>
<input id="flt3_table6" type="hidden" ct="3" class="flt">
</td>
<td>
<input id="flt4_table6" type="hidden" ct="4" class="flt">
</td>
<td>
<input id="flt5_table6" type="hidden" ct="5" class="flt">
</td>
<td>
<input id="flt6_table6" type="hidden" ct="6" class="flt">
</td>
<td>
<input id="flt7_table6" type="hidden" ct="7" class="flt">
</td>
</tr>
<tr class="success">
<td style="width: 15%;">
S.no
</td>
<td style="width: 15%;">
Activity <br>
Name
</td>
<td style="width: 5%;">
Activity Option
</td>
<td style="width: 5%;">
Duration<br>
HR:MIN
</td>
<td style="width:10%;">
cals
</td>
<td style="width: 5%;">
distance
</td>
<td style="width: 5%;">
Unit
</td>
<td style="width: 15%;">
Submit
</td>
</tr>
<tr id="formrowid228" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid228">
</form>
<td style="width:5%;">
1
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/228/227">sitting - card playing, playing board games</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id228" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(228);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(228);" id="time-min-id228" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id228" value="1.5"><span id="cals-id228" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(228);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid229" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid229">
</form>
<td style="width:5%;">
2
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/229/227">standing - drawing (writing), casino gambling, duplicating machine</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id229" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(229);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(229);" id="time-min-id229" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id229" value="2.3"><span id="cals-id229" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(229);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid230" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid230">
</form>
<td style="width:5%;">
3
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/230/227">sitting - reading, book, newspaper, etc.</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id230" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(230);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(230);" id="time-min-id230" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id230" value="1.3"><span id="cals-id230" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(230);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid231" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid231">
</form>
<td style="width:5%;">
4
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/231/227">sitting - writing, desk work, typing</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id231" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(231);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(231);" id="time-min-id231" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id231" value="1.8"><span id="cals-id231" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(231);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid232" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid232">
</form>
<td style="width:5%;">
5
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/232/227">standing - talking or talking on the phone</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id232" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(232);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(232);" id="time-min-id232" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id232" value="1.8"><span id="cals-id232" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(232);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid233" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid233">
</form>
<td style="width:5%;">
6
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/233/227">sitting - talking or talking on the phone</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id233" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(233);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(233);" id="time-min-id233" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id233" value="1.5"><span id="cals-id233" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(233);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid234" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid234">
</form>
<td style="width:5%;">
7
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/234/227">sitting - studying, general, including reading and/or writing</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id234" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(234);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(234);" id="time-min-id234" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id234" value="1.8"><span id="cals-id234" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(234);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid235" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid235">
</form>
<td style="width:5%;">
8
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/235/227">sitting - in class, general, including note-taking or class discussion</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id235" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(235);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(235);" id="time-min-id235" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id235" value="1.8"><span id="cals-id235" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(235);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid236" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid236">
</form>
<td style="width:5%;">
9
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/236/227">standing - reading</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id236" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(236);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(236);" id="time-min-id236" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id236" value="1.8"><span id="cals-id236" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(236);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid237" style="display: none;">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid237">
</form>
<td style="width:5%;">
10
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/237/227">standing - miscellaneous</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id237" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(237);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(237);" id="time-min-id237" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id237" value="2.0"><span id="cals-id237" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<button onclick="$(this).SubmitForm(237);" class="btn btn-success activity-btn" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
<tr id="formrowid243">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid243">
</form>
<td style="width:5%;">
1
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/243/227">running</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id243" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(243);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(243);" id="time-min-id243" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id243" value="1.5"><span id="cals-id243" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<input onclick="$(this).SubmitForm(243);" type="button" value='submit'/>
</td>
</tr>
<tr id="formrowid245">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid245">
</form>
<td style="width:5%;">
2
</td>
<td style="width:25%;" class="text-capitalize">
<a href="http://localhost/tbft/webapp/index.php/logs/activity/245/227">Dancing</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id245" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(245);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(245);" id="time-min-id245" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id245" value="2.5"><span id="cals-id245" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<input onclick="$(this).SubmitForm(245);" type="button" value='submit'/>
</td>
</tr>
<tr id="formrowid246">
<form method="post" action="/tbft/webapp/logs/insertAcitivity" id="formid246">
</form>
<td style="width:5%;">
3
</td>
<td style="width:25%;" class="text-capitalize">
<a href="localhost/tbft/webapp/index.php/logs/activity/246/227">Playing</a>
</td>
<td style="width:25%;" class="text-capitalize">
-
</td>
<td style="width:15%;" class="text-capitalize">
<div style="display:inline-flex;">
<input maxlength="2" id="time-hr-id246" name="timeHrTxt" size="2" type="text" style="width:35px;text-align:center;" value="" onkeyup="$(this).CalculateCalorie(246);" placeholder=" HR"> : <input onkeyup="$(this).CalculateCalorie(246);" id="time-min-id246" name="timeMinTxt" placeholder=" MIN" type="text" style="width:35px;text-align:center;" maxlength="2" size="2" value="">
</div>
</td>
<td style="width:5%;" class="text-capitalize">
<input type="text" style="display:none;" name="metsTxt" id="mets-id246" value="1.5"><span id="cals-id246" class="cals">0.00</span>
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
-
</td>
<td style="width:5%;" class="text-capitalize">
<input onclick="$(this).SubmitForm(246);" type="button" value='submit'/>
</button>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：3)
在这里演示 - http://jsfiddle.net/7TMrc/7/
关键词：
val（）函数返回一个字符串，因此如果hours或mins变量的长度为零，则它为空。
如果空白分钟附有有效小时，或空白小时附有有效分钟，我们认为空白是好的。
如果小时或分钟的长度大于零，我们检查它是有效的小时或分钟，并且parseFloat在这里很有帮助。
我们首先进行有效性检查（＆＃34;我们是否有有效的小时和分钟？＆＃34;）然后我们会做出是否可以提交的逻辑（＆＃34;我至少得到了）有效小时或有效分钟？＆＃34;）。
$.fn.SubmitForm = function(id) { //submit the form
// These will be strings
var hour = $("#time-hr-id" + id).val();
var mins = $("#time-min-id" + id).val();
// Assume they are valid
var valid_hour = true;
var valid_mins = true;
// If the hour string is not blank, see if the hour is valid using parseFloat
if (hour.length > 0 && isNaN(hour) || parseFloat(hour) > 24 || parseFloat(hour) < 0.1) {
valid_hour = false;
}
// If the mins string is not blank, see if the min is valid using parseFloat
if(mins.length > 0 && isNaN(mins) || parseFloat(mins) > 60 || parseFloat(mins) < 0.1) {
valid_mins = false;
}
// Now we can do the submit logic more easily. valid_hour and valid_minute
// will only be false if bad data, not blank data, has been entered.
if (!valid_hour) {
var error_msg = 'Hour:Not a valid value';
alert(error_msg);
$("#time-hr-id" + id).focus();
} else if(!valid_mins) {
var error_msg = 'Mins:Not a valid value';
alert(error_msg);
$("#time-min-id" + id).focus();
// We have a new test case - we need to ensure that both are not blank!
} else if (hour == "" & mins == "") {
var error_msg = 'Empty mins and hours!';
alert(error_msg);
$("#time-hr-id" + id).focus();
} else {
$("#formid" + id).submit();
}
};