• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 370
  • Last Modified:

Validate Text Boxes and Radio Buttons in the same web form

Hello,

I need help validating text boxes and radio buttons in the same webform.  The web form works if I enter all the fields (it sends me an email).

As of now if a user hits submit and fields are blank, there's no indicates that fields are blank.
What I would like to accomplish is to let the user know that they left a field blank or radio button has not been selected.  I've been going crazy trying to figure it out!

Please help, I just need to be pointed in the right direction.

Thanks!

Here is the code I have so far:
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>" formenctype="application/x-www-form-urlencoded" name="join_gold_form_f" target="_self" />
                    
                                    
                    <table width="100%" border="0" align="center" cellpadding="1" cellspacing="3">
             <tr valign="baseline">
                        <td width="100%" valign="top" bgcolor="#FFFFFF" class="formheadings"><p align="left"><strong>Note:&nbsp;<font color="#FF0000">All Fields</font></strong> must be completed to succesfully submit this webform.</p></td>
					    
					  </tr>
                    <tr valign="baseline">
                        <td width="48%" valign="top" bgcolor="#FFFFFF" class="formheadings">First Name</td>
					    <td width="52%" valign="top" bgcolor="#FFFFFF"><input name="txtFirstName" type="text" class="inputfield" value="" size="40"  /></td>
					  </tr>
                       <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Middle Name</td>
                        <td valign="top" bgcolor="#FFFFFF"><input name="txtMiddleName" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Last Name</td>
                        <td valign="top" bgcolor="#FFFFFF"><input name="txtLastName" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">Are you a U.S. Citizen:&nbsp;
                          <input type="RADIO" name="rdoCitizen" value="Yes">
                          Yes
                          <input type="RADIO" name="rdoCitizen" value="No">
                          No </td>
                      </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Birthday</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBirthday" id="txtBirthday" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      
                       <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Place of Birth Country</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBirthCountry" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Place of Birth City</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBirthCity" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Place of Birth State</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBirthState" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">Gender:&nbsp;
                          <input type="RADIO" name="rdoGender" value="Male">
                          Male
                          <input type="RADIO" name="rdoGender" value="Female">
                          Female </td>
                      </tr>
                       <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Busines Address</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBAddress" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Buisness City</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBCity" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
				                    <tr valign="baseline">
				                      <td valign="top" bgcolor="#FFFFFF" class="formheadings">Business State</td>
						  <td valign="top" bgcolor="#FFFFFF"><select name="mnuBState" class="inputfield">
  <option value="" selected>--Select--</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
  <option value="AS">American Samoa</option>
  <option value="GU">Guam</option>
  <option value="PR">Puerto Rico</option>
  <option value="VI">Virgin Islands</option>
  </select></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Business Zip Code</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBZip" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                       <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Residence Address</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtRAddress" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Residence City</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtRCity" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
				                    <tr valign="baseline">
				                      <td valign="top" bgcolor="#FFFFFF" class="formheadings">Residence State</td>
						  <td valign="top" bgcolor="#FFFFFF"><select name="mnuRState" class="inputfield">
  <option value="" selected>--Select--</option>

  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
  <option value="AS">American Samoa</option>
  <option value="GU">Guam</option>
  <option value="PR">Puerto Rico</option>
  <option value="VI">Virgin Islands</option>
  </select></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Residence Zip Code</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtRZip" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">How Long at Present Address</td>
					    <td valign="top" bgcolor="#FFFFFF">Years&nbsp;<input name="txtYears" type="text" class="inputfield" value="" size="5" />&nbsp;
                         Months&nbsp;<input name="txtMonths" type="text" class="inputfield" value="" size="5" /></td>
					  </tr>
                      <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Business Phone</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtBPhone" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Residence Phone</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtRPhone" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Fax</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtFax" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Cell Phone</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtCPhone" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF" class="formheadings">Email</td>
					    <td valign="top" bgcolor="#FFFFFF"><input name="txtEmail" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                       <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">Are you licensed to sell Annuities and Insurance? (if yes enter state of issue and lic #)&nbsp;
                          <input type="RADIO" name="rdoLicensed" value="Yes">
                          Yes
                          <input type="RADIO" name="rdoLicensed" value="No">
                          No </td> </tr>
                       <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF">Details:&nbsp;<input name="txtDetailsLicensed" type="text" class="inputfield" value="" size="40" /></td>
					  </tr>
                      <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                       <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">Do you currently have Errors &amp; Omissions (E&amp;O) coverage?&nbsp;
                          <input type="RADIO" name="rdoEandO" value="Yes">
                          Yes
                          <input type="RADIO" name="rdoEandO" value="No">
                          No </td></tr>
                       <tr valign="baseline">
                        <td valign="top" bgcolor="#FFFFFF">E&amp;O Carrier
                          <input name="txtE&amp;O" type="text" class="inputfield" value="" size="40" /><br /><br />
                          Policy Number
                          <input name="txtPolicy" type="text" class="inputfield" value="" size="20" />
                          &nbsp;Exp Date
                         <input name="txtExpDate" type="text" class="inputfield" value="" size="20" /></td>
					  </tr>		
                       <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                      <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">Commissions Payable To (if payable to firm, enter firm name and tax ID)<br /><br />
                          <input type="RADIO" name="rdoCommPay" value="Me Personally">
                          Me Personally OR
                          <input type="RADIO" name="rdoCommPay" value="Firm" />
                          Firm  &nbsp;&nbsp;Firm Name&nbsp;<input name="txtFirm" type="text" class="inputfield" value="" size="40" \>&nbsp; 
                          Tax ID&nbsp;<input name="txtTaxID" type="text" class="inputfield" value="" size="20" \> </td>
                      </tr>
                      <tr>
                        <td colspan="2"><hr width="100%" color="#666666" size="0.25"></td>
                      </tr>
                      <tr valign="baseline" bgcolor="#FFFFFF">
                        <td colspan="2">The numbers shown on this form are correct Tax Identification Numbers&nbsp;
                          <input type="RADIO" name="rdoNumbers" value="Yes">
                          Yes
                          <input type="RADIO" name="rdoNumbers" value="No">
                          No </td>
                      </tr></table></form>

Open in new window

0
JParra72
Asked:
JParra72
  • 4
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
check this, very simple to use : http://demos.usejquery.com/ketchup-plugin/
Most used : http://docs.jquery.com/Plugins/Validation

What you need to do is add a class for the field
for example for a username, only add : class="required"
or for an email : class="required email"
0
 
JParra72Author Commented:
Ok,  for example, the first name field currently looks like this
 <input name="txtFirstName" type="text" class="inputfield" value="" size="40" /> and

the email
<input name="txtEmail" type="text" class="inputfield" value="" size="40" />.

So change  class="inputfield" to class="required" and class="required email"  ?
0
 
leakim971PluritechnicianCommented:
no just add it.
if your field is an email add email.

<input name="txtEmail" type="text" class="inputfield required" value="" size="40" />
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
JParra72Author Commented:
the same for a radio button? like so

<input type="RADIO" name="rdoLicensed" value="Yes" class="required" />

<input type="RADIO" name="rdoLicensed" value="No" class="required" />
0
 
leakim971PluritechnicianCommented:
only the first one for a group or check one by default...
0
 
JParra72Author Commented:
Is this correct?
<input type="RADIO" name="rdoLicensed" value="Yes" class="required" />
<input type="RADIO" name="rdoLicensed" value="No" />

What would it look like if I wanted the "Yes" option to be selected by default?
0
 
leakim971PluritechnicianCommented:
<input type="RADIO" name="rdoLicensed" value="Yes" checked="checked" />
<input type="RADIO" name="rdoLicensed" value="No" />
0
 
Mohamed AbowardaSoftware EngineerCommented:
There are different ways:
- You can do client-side and server-side check (Client-side will check if the fields are blank to notify the user instantly without having to send any request to the server, server-side will do security check).

- You can submit the fields to the server using AJAX for validation and if valid, submit the form, if invalid, show error message.

- You can submit the form normally and do validation check in your PHP script (server-side).

In javascript, to check if a text field is blank, you can do something like:
if (document.getElementById('txtEmail').value == '')
{
    // The text is blank
}

To check if radio button is not selected in Javascript:
http://stackoverflow.com/questions/1423777/how-can-i-check-whether-a-radio-button-is-selected-in-javascript

REMEMBER: Always perform server-side check as well since Javascript can be manipulated or disabled.
0
 
JParra72Author Commented:
Thanks!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now