Solved

Validate Text Boxes and Radio Buttons in the same web form

Posted on 2013-01-24
9
336 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

786 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