Solved

How to validate a radio button in a form

Posted on 2015-02-05
2
129 Views
Last Modified: 2015-03-05
I'm trying to validate a form with Javascript. I dit it with a select field and it works good but need help to validate with a radio buttom.

This my code:

## JAVASCRIPT ##

<script type="text/javascript">

  function checkForm(form)
  {

    var selectCivilStatus = form.select_1.options[form.select_1.selectedIndex].value;


    if(selectCivilStatus == "") {
        alert("Error: Marital Status is not selected");
        form.select_1.focus();
        return false;
    }

  }

</script>


## HTML ##


Civil Status:

<select size="1" name="select_1">
<option VALUE="">SELECT</option>
<option VALUE="Single">Single</option>
<option VALUE="Married">Married</option>
<option VALUE="Divorced">Divorced</option>
</select>

I need to validate this one with JavaScript too:

Bonus Payment:

<input type="radio" name="radio_1" value="Yes"> Yes
<input type="radio" name="radio_1" value="No"> No

##########

Please help. Thank you so much!
0
Comment
Question by:CloudHelpdeskOne
2 Comments
 
LVL 22

Assisted Solution

by:plusone3055
plusone3055 earned 250 total points
ID: 40592410
I think a more rewarding experience is to learn through examples :)

here is a perfect example that will show you how to validate radio buttons and you can then incorporate it into your code :)

http://www.esqsoft.com/javascript/javascript-example-how-to-validate-radio-buttons.htm
0
 
LVL 5

Accepted Solution

by:
Ronak Patel earned 250 total points
ID: 40593011
try below code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		function checkForm(form)
		{
			var selectCivilStatus = form.select_1.options[form.select_1.selectedIndex].value;

			if(selectCivilStatus == "")
			{
				alert("Error: Marital Status is not selected");
				form.select_1.focus();
				return false;
			}

			if (!form.bonusPayment_Yes.checked && !form.bonusPayment_No.checked)
			{
				alert("Error: Bonus Payment is not selected");
				return false;
			}
		}
	</script>
</head>
<body>
<form name="Form1" id="Form1">
Civil Status:
<select size="1" name="select_1">
<option VALUE="">SELECT</option>
<option VALUE="Single">Single</option>
<option VALUE="Married">Married</option>
<option VALUE="Divorced">Divorced</option>
</select>

Bonus Payment:

<input type="radio" id="bonusPayment_Yes" name="radio_1" value="Yes"> Yes
<input type="radio" id="bonusPayment_No" name="radio_1" value="No"> No

<input type="submit" value="Submit" onclick="checkForm(document.forms['Form1']);" />
</form>
</body>
</html>

Open in new window


Hope this helps.

Regards,
Ronak
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The goal of the tutorial is to teach the user how to use functions in C++. The video will cover how to define functions, how to call functions and how to create functions prototypes. Microsoft Visual C++ 2010 Express will be used as a text editor an…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

708 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

12 Experts available now in Live!

Get 1:1 Help Now