BleepingComputer.com: HTML form required field problem

Hey BP-Nice new template!

N-E way I have this html form that links to a php script that handles my form. I need to make these fields required or an alert message pops up. Can anyone tell me how?

  <fieldset>
   <div><label for="name">Name</label>
        <input type="text" name="name" id="name" size="19" />
   </div>
   <div><label for="email">Email</label>
        <input type="text" name="email" id="email" size="19" />
   </div>
   <div><label for="phone">Phone</label>
        <input type="text" name="phone" id="phone" size="19" />
   </div>
   <div><label for="month">Month</label>
        <select id="month" name="month">
         <option value="January">January</option>
         <option value="February">February</option>
         <option value="March">March</option>
         <option value="April">April</option>
         <option value="May">May</option>
         <option value="June">June</option>
         <option value="July">July</option>
         <option value="September">September</option>
         <option value="October">October</option>
         <option value="November">November</option>
         <option value="December">December</option>
        </select>
   </div>
   <div><label for="day">Date</label>
        <input type="text" name="day" id="day" size="2" />
   </div>
   <div><label for="time">Time</label>
        <input type="text" name="time" id="time" size="19" />
   </div>
   <div><label for="referredby">Referred by</label>
        <input type="text" name="referredby" id="referredby" size="19" />
   </div>
   <div><label for="numberofpassengers">Number of Passengers</label>
        <input type="text" name="numberofpassengers" id="numberofpassengers" size="2" />
   </div>
   <div><label for="numberofluggageitems">Number  of Luggage items</label>
        <input type="text" name="numberofluggageitems" id="numberofluggageitems" size="1" />
   </div>
   <div><label for="smoking">Smoking?</label>
        <input type="checkbox"   name="smoking" id="smoking" />
   </div>
   <div><label for="howmanypeople">How many people?</label>
        <select id="howmanypeople" name="howmanypeople">
         <option value="3-5">3-5</option>
         <option value="5-10">5-10</option>
         <option value="10-15">10-15</option>
         <option value="15-20">15-20</option>
        </select>
   </div>
   <div><label for="whereareyougoing">Where are you going?</label>
        <input type="text" name="whereareyougoing" id="whereareyougoing" size="19" />
   </div>
   <div><label for="whereisthepickuplocation">Where is the pick-up location?</label>
        <input type="text" name="whereisthepickuplocation" id="whereisthepickuplocation" size="19" />
   </div>
   <div><label for="howlongwillyouneedthevehicle">How long will you need the vehicle?</label>
        <select id="howlongwillyouneedthevehicle" name="howlongwillyouneedthevehicle">
         <option value="1-4 hrs.">1-4 hrs.</option>
         <option value="4-8 hrs.">4-8 hrs.</option>
         <option value="8+">8+</option>
        </select>
   </div>
   <div class="centerac"><input type="submit" name="send" id="send" value="Submit Request"/>

This post has been edited by samlf3rd: 17 November 2010 - 05:42 PM

You could use the following code within the submit function to check if fields are empty, if they are use ajax to show a pop-up message or you could have php reload the form with an extra field showing some fields were empty?

if(is_empty($field_name)){
...
ajax/php function
...
}

Another alternative is to use a simple bit if javascript. Basically you add an on-click event to your form.

<form action="mypage.php" onsubmit="return checksForm()">

Inside your function, you check each of the fields in your form. If one of them doesn't validate, then you return a 'false' from your javascript function. That is how it works in the simplest case. In reality, if the form does not validate, then you may want to do something like display a popup that indicates which fields were not filled in properly, or display an error message within the body of the form. You may want to somehow highlight the fields that were not properly filled in, etc.

If the form validates, then your javascript needs to return a 'true' value, and then the form will be submitted. A decent example can be found here.

Ajax would only be necessary of there was some reason to get some information from the server. I can't think of a single case where that would be necessary just for validation purposes.

This post has been edited by groovicus: 17 November 2010 - 10:00 PM