HTML 表单的 Jquery 验证

Question

我想在使用 jquery 提交 html 表单之前验证 html 表单中的文本区域和选择框，任何人都可以帮助我（表单无需刷新即可达到顶峰）。我面临的问题是，我制作脚本来提交 html 表单而不刷新，但我不知道如何将验证与它集成，我想要这样： 1. 验证表单 2. IF 验证 true 提交 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 :

<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>

Answer 1

Jquery 有很多用于 ajax 提交和验证的插件。您可以考虑使用它们，而不是编写自己的逻辑。我推荐

1. Jquery 表单插件 - 它通过 ajax 提交表单。删除提交，创建一个按钮，单击该按钮即可通过 ajax 提交表单。

2. Jquery 验证插件 - 根据类验证所有内容。您甚至可以使用 .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>

工作示例 这里

Answer 2

由于您没有选择月、日和年，因此您必须指定日期的格式。下面的代码验证 MM-DD-YYYY 格式的日期，允许 1 位数的日或月，以及前导 & 。尾随空格：

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;
}

就足够了。