在提交之前验证表单（比检查空字段更复杂） [英] validate form before submitting (more complicated than checking for empty fields)
问题描述
我有一个包含时间输入的表单（具体来说就是开始和结束时间）。当提交按钮被按下时，它进入一个php页面，这些输入被添加到数据库中。我想在允许表单提交之前检查几件事情。例如，我想确保开始时间早于（小于）结束时间。这里是表单：
打开：
< option value =00> 12< / option>
< option value =01> 1< / option>
< option value =02> 2< / option>
< option value =03> 3< / option>
< option value =04> 4< / option>
< option value =05> 5< / option>
< option value =06> 6< / option>
< option value =07> 7< / option>
< option value =08> 8< / option>
< option value =09> 9< / option>
< option value =10> 10< / option>
< option value =11> 11< / option>
< / select> ：
< select name =startminute1>
< option value =00> 00< / option>
< option value =15> 15< / option>
< option value =30> 30< / option>
< option value =45> 45< / option>
< option value =59> 59< / option>
< / select>
< select name =startwhen1>
< option value =am> am< / option>
< option value =pm> pm< / option>
< / select>
关闭：
< select name =endhour1>
< option value =00> 12< / option>
< option value =01> 1< / option>
< option value =02> 2< / option>
< option value =03> 3< / option>
< option value =04> 4< / option>
< option value =05> 5< / option>
< option value =06> 6< / option>
< option value =07> 7< / option>
< option value =08> 8< / option>
< option value =09> 9< / option>
< option value =10> 10< / option>
< option value =11> 11< / option>
< / select> ：
< select name =endminute1>
< option value =00> 00< / option>
< option value =15> 15< / option>
< option value =30> 30< / option>
< option value =45> 45< / option>
< option value =59> 59< / option>
< / select>
< select name =endwhen1>
< option value =am> am< / option>
< option value =pm> pm< / option>
< / select>
我发现如何检查单个表单元素的javascript代码，但我无法弄清楚如何可以结合多个而无需提交。在我的PHP页面中，我有以下代码：
$ starthour1 = $ _ POST ['starthour1'];
$ startminute1 = $ _ POST ['startminute1'];
$ startwhen1 = $ _ POST ['startwhen1'];
$ endhour1 = $ _ POST ['endhour1'];
$ endminute1 = $ _ POST ['endminute1'];
$ endwhen1 = $ _ POST ['endwhen1'];
$ start_time1 = $ end_time1 =;
if（$ startwhen1 ==pm）{
$ starthour1 = $ starthour1 + 12;
}
if（$ endwhen1 ==pm）{
$ endhour1 = $ endhour1 + 12;
}
$ start_time1 = $ starthour1。：。$ startminute1。：00;
$ end_time1 = $ endhour1。：。$ endminute1。：00;
if（$ end_time1 ==00:00:00）{
$ end_time1 =23:59:00;
}
echo< br>开始时间为。$ start_time1;
echo< br>结束时间是。$ end_time1;
$ startnum = str_replace（：，，$ start_time1）;
$ endnum = str_replace（：，，$ end_time1）;
if（$ endnum< $ startnum）{
echo< br>开始时间不能晚于结束时间！;
}
else {
//添加到数据库
}
$ b $然而，提交后检查这些东西没有任何意义。我想我可以重定向回初始页面，如果发现错误，但这似乎并不高效。
另外，我想也许我可以有一些PHP在页面上使用检查有效性的表单。如果验证通过，它会发布到插入数据库的php页面。这是否有意义并且有可能？
有更好的解决方案吗？我想有一些我可以用JavaScript做的事情，但我一直无法弄清楚。
另外，我想通知用户无效输入出现在输入框旁边的文字。我应该能够弄清楚，一旦其余的工作正常。
谢谢。
< ; form id =formonSubmit =return doSubmit（）;行动= ＃ >
然后，在doSubmit（）中，您实际上可以执行任何验证（并且实际上只有 提交表单如果他们通过）
函数doSubmit（）{
if（validationsPass（）） {
$（'＃form'）。submit（）;
b
$ b $ p
$ b 通知用户输入实际表单旁边的无效输入字段，您可以在每个字段旁边都有隐藏的div或span，并且如果它们未通过某种验证，则可以使用Javascript取消隐藏它们。
if（！fieldNotValid）{
$（'＃field-error'）。show（）; //或使用.highlight（）
}
i have a form containing inputs for times (specifically, an opening and closing time). when the submit button is pressed, it goes to a php page where these inputs are added to a database. i want to check a few things before allowing the form to submit. for example, i want to make sure that the start time is earlier than (less than) the end time. here's the form:
Opens:
<select name="starthour1">
<option value="00">12</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select name="startminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="startwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
Closes:
<select name="endhour1">
<option value="00">12</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select> :
<select name="endminute1">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
<option value="59">59</option>
</select>
<select name="endwhen1">
<option value="am">am</option>
<option value="pm">pm</option>
</select>
i found javascript code for how to check individual form elements, but i can't figure out how i could combine multiple without submitting. in my php page, i have the following code:
$starthour1=$_POST['starthour1'];
$startminute1=$_POST['startminute1'];
$startwhen1=$_POST['startwhen1'];
$endhour1=$_POST['endhour1'];
$endminute1=$_POST['endminute1'];
$endwhen1=$_POST['endwhen1'];
$start_time1=$end_time1="";
if($startwhen1=="pm"){
$starthour1=$starthour1+12;
}
if($endwhen1=="pm"){
$endhour1=$endhour1+12;
}
$start_time1=$starthour1.":".$startminute1.":00";
$end_time1=$endhour1.":".$endminute1.":00";
if($end_time1=="00:00:00"){
$end_time1="23:59:00";
}
echo "<br>start time is ".$start_time1;
echo "<br>end time is ".$end_time1;
$startnum=str_replace(":", "", $start_time1);
$endnum=str_replace(":", "", $end_time1);
if($endnum<$startnum){
echo "<br>start time can't be later than end time!";
}
else{
//add to database
}
however, checking this stuff after submitting doesn't make sense. i suppose i could redirect back to the initial page if the error was found, but that doesn't seem efficient.
also, i was thinking maybe i could have some php on the page with the form that checks for validity. if it validates, it then posts to the php page that inserts stuff into the database. does this make sense and is it possible?
is there a better solution? i imagine there is something i could do with javascript but i haven't been able to figure it out.
additionally i'd like to inform the user of invalid inputs with text that appears next to the input box. i should be able to figure this out once the rest is working though.
thanks.
解决方案 Have the onSubmit() or action of the form call a JavaScript function, like this:
<form id="form" onSubmit="return doSubmit();" action="#">
Then, in doSubmit() you can actually perform any of the validations (and only actually submit the form if they pass)
function doSubmit(){
if (validationsPass()) {
$('#form').submit();
}
}
To inform users of invalid input next to the actual form field, you can have hidden divs or spans next to each field, and use Javascript to un-hide them if they fail some sort of validation.
if(!fieldNotValid){
$('#field-error').show(); //Or use effects like .highlight()
}
这篇关于在提交之前验证表单（比检查空字段更复杂）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
