Проверка Jquery для формы HTML - PullRequest
Новая
       33

Проверка Jquery для формы HTML

2 голосов
/ 11 мая 2011

Я хочу проверить текстовую область и выбрать поле в html-форме, прежде чем отправлять html-форму с помощью jquery, любой может помочь мне в этом (форма находится на вершине без обновления). Я сталкиваюсь с проблемой в том, что я делаю скрипт для отправки 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>

Ответы [ 2 ]

0 голосов
/ 11 мая 2011

Поскольку вы не делали поля выбора для месяца, дня и года, вы должны указать формат даты. Вот код, который проверяет дату в формате ММ-ДД-ГГГГ, позволяя вводить 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;
}

достаточно хорошо.

0 голосов
/ 11 мая 2011

Jquery имеет множество плагинов для отправки и проверки ajax. Вместо того, чтобы писать свою собственную логику, вы можете рассмотреть возможность их использования. Я рекомендую

  1. Плагин формы Jquery - который отправляет форму через ajax. Удалите отправить, сделайте кнопку, которая по клику отправляет форму через ajax.

  2. Плагин Jquery Validation - который проверяет все на основе класса. Вы даже можете написать свою собственную логику, используя метод .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>

Рабочий пример здесь

...