Validation for radio buttons using javascript

Question

0.00/5 (No votes)

See more:

Need to validate a radio button input but don't know how to go about doing so, I want the validation to be when the place order button is pressed at least a radio button from the pizza base and the toppings section should be selected unless an error message will be displayed, sadly I can't use JQuery for this.

Thanks in advance

HTML

<pre lang="HTML"><form id="orderform">
                    <div3 class="pizzabase">
                        <legend><font size="3" color="black">Select your pizza base*</font></legend><br>
                        <input type="radio" name="small" value="base_small"> Small <span class="price">£5</span><br>
                        <input type="radio" name="medium" value=base_small>  Medium <span class="price">£7.50</span><br>
                        <input type="radio" name="small" value="base_small"> Large <span class="price">£10.00</span><br>
                        <input type="radio" name="small" value="base_small"> Extra Large <span class="price">£12.50</span> <br> 
                        <br>
                       
                    </div3>
                    
                    <div4 class="toppings">
                        <legend><font size="3" color="black">Select one or more toppings*:</font></legend><br>
                        <input type="radio" name="cheese" value="base_medium"> Cheese <span class="price">£0.20</span><br>
                          <input type="radio" name="extras" value="base_medium"> Mushrooms  <span class="price">£0.40</span> <br>
                         <input type="radio" name="extras" value="base_medium"> Ham   <span class="price">£0.50</span> <br>
                         <input type="radio" name="extras" value="base_medium"> Anchovies   <span class="price">£0.60</span> <br>
                    
                    </div4>
                    
                    <div5 class="extras">
                       <legend>Extras*:</legend>
                         <input type="radio" name="extras" value="base_large"> Chips   <span class="price">£1.50</span> <br>
                   

  <input type="radio" name="extras" value="base_large"> Garlic Bread   <span class="price">£2.00</span> <br>
                         
                        
                    </div5>
                        
                    <div6 class="deliveryinfo">
                    Address:    <input type="text" name="address"><br>
                    Postcode:   <input type="text" name="postcode"><br>                    
                      </div6>
                    
                    <input type="button" value="place order">
                    <input type="button" value="reset">
                    
                   </form>

What I have tried:

I haven't tried anything because I haven't done validation before in Javascript

Posted 15-May-17 2:32am

antonodu

Add a Solution

Comments

Jochen Arndt 15-May-17 8:49am

You can make one button selected by default (add checked="checked" within the type tag).
Then you will always have an item selected.

But you should change your second range of radio buttons to check boxes because radio buttons are only for single selections and "Select one or more toppings" is indicating that multiple selections are allowed.

Then search the web for something like "javascript validate checkbox at least one" to test if at least one check box is checked.

antonodu 15-May-17 9:07am

Thanks for the help, but what do you mean by i can make one button selected by default? like what does it do

Jochen Arndt 15-May-17 9:17am

For example
<input type="radio" name="small" value="base_small" checked="checked">
will make the "Small" button checked by default. That means it is selected when the page is shown. Because radio button groups allow only one item to be selected at time, there will then be always an selected button and there is no need for validation.

However, that requires that all radio buttons belonging to a group have the same name (but different values). So you have to update your code accordingly.

antonodu 15-May-17 9:31am

Alright thanks

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)