HTML表单的jQuery验证

Question

在使用 jquery 提交 html 表单之前，我想验证文本区域并选择 html 表单中的框，任何人都可以帮助我（表单正在登顶而无需刷新）。我面临的问题是我制作脚本以提交 html 表单而不刷新，但我不知道如何将验证与它集成我想要它：1. 验证表单 2. IF 验证 true 从不使用 jquery 刷新的情况下提交 html

查询：

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

Answer 1

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

1. Jquery form plugin - 通过 ajax 提交表单。删除提交，制作一个按钮，单击该按钮通过ajax提交表单。

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

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

够用了。