Solved

Validate Text Boxes and Radio Buttons in the same web form

Posted on 2013-01-24
9
355 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Geolocation works...sometimes 2 40
hide and show spans from dropdown selection 3 38
Pass a js value to an html form 5 43
Convert complicated date to yyyy-mm-dd format 22 53
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

751 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