Solved

Validate Text Boxes and Radio Buttons in the same web form

Posted on 2013-01-24
9
318 Views
Last Modified: 2013-01-30
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
Comment
Question by:JParra72
  • 4
  • 4
9 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38816388
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
 

Author Comment

by:JParra72
ID: 38816438
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38816448
no just add it.
if your field is an email add email.

<input name="txtEmail" type="text" class="inputfield required" value="" size="40" />
0
 

Author Comment

by:JParra72
ID: 38816470
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 82

Expert Comment

by:leakim971
ID: 38816534
only the first one for a group or check one by default...
0
 

Author Comment

by:JParra72
ID: 38816569
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38816576
<input type="RADIO" name="rdoLicensed" value="Yes" checked="checked" />
<input type="RADIO" name="rdoLicensed" value="No" />
0
 
LVL 12

Expert Comment

by:Mohamed Abowarda
ID: 38818218
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
 

Author Closing Comment

by:JParra72
ID: 38837448
Thanks!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Developers of all skill levels should learn to use current best practices when developing websites. However many developers, new and old, fall into the trap of using deprecated features because this is what so many tutorials and books tell them to u…
This article discusses four methods for overlaying images in a container on a web page
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now