Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Validate Text Boxes and Radio Buttons in the same web form

Posted on 2013-01-24
9
Medium Priority
?
364 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 2000 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
Technology Partners: 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!

 

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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.

688 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