Jquery Validation for HTML form_问答_开发者_运维开发者技术经验分享

I want to validate the text area and select box in html form before submitting the html form with jquery anyone can help me for that (form is summiting without refresh). I am facing problem is that I make script to submit html form without refresh but I dont know how to integrate validation with it I want it like : 1. Validate form 2. IF validation true submit html from without refresh with 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</opti开发者_如何转开发on><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>

Jquery has lot of plugins for ajax submit and validation. Rather than writing your own logic, you can consider using them. I recommend

Jquery form plugin - Which submits the form through ajax. Remove the submit, make a button which on click submits the form through ajax.
Jquery Validation plugin - which validates everything based on the class. You can even write your own logic using .addValidator method.

Both of these plugin works well with each and other..

I think this will give you an idea

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

Working example here

Since you didn't make select boxes for month, day and year, you have to specify a format for the date. Here's code that validates date in MM-DD-YYYY format, allowing 1 digit day or month, and leading & trailing spaces:

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;

You still have to check that the date is in the future. Since you did make selects for hour & minute, a test like

if (hour == undefined || !hour.length) {
   alert('Please select hour'); return false;
}

if (minute == undefined || !minute.length) {
   alert('Please select minute'); return false;
}

is good enough.