Required Field Validation with Javascript

Hi

I have three types of fields on my html page, they are (radio button field), (drop list field) and (checkbox field). They are all bound to one style called "MyStyle". For example:

This is how my html code in my page looks like:

<input name='MyRadioField' value='1' id='MyStyle' type='radio'>
<input name='MyRadioField' value='2' id='MyStyle' type='radio'>
<input name='MyRadioField' value='3' id='MyStyle' type='radio'>


<input name='MyCheckBoxField' value='1' id='MyStyle' type='checkbox'>
<input name='MyCheckBoxField' value='2' id='MyStyle' type='checkbox'>
<input name='MyCheckBoxField' value='3' id='MyStyle' type='checkbox'>


<select name='MyDropListField' size='1' id='MyStyle'>
<option value=''>--- SELECT ONE PLEASE ---</option>
<option value='1'>MyDropListFieldText1</option>
<option value='2'>MyDropListFieldText2</option>
<option value='3'>MyDropListFieldText3</option>
</select>

<input type='submit' name='SubmitButton' value='Submit Choises' id='MyStyle'>

Open in new window


Now, what's the javascript code that I need to put upon (OnClick) event of my submit button in order to check if all fields were given data by the submitter before the form gets submitted?

As you can see, I can not say something like this:

var e = document.getElementById("MyStyle"); 
var strUser = e.options[e.selectedIndex].text;
// then validate against the 'strUser' variable

Open in new window


in order to then validate against my drop list because all my fields are bound to id "MyStyle", and also I don't have control over changing this id for each field type.


So, is there another way to check if the user selected data before submitting or not without a javascript code shown above??
alfardanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IronhoofsCommented:
The javascript is correct, your use of ID isnt :)

From www.w3schools.com:


The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

If you use the ID for CSS purposes, use class="MyStyle" instead. For this to work you replace "#MyStyle" with ".MyStyle" in your stylesheet.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
But be sure to double check anything you learn from w3schools.
there is a good reason someone created http://w3fools.com/
0
Michel PlungjanIT ExpertCommented:
Here is a canonical validation. Note I do NOT add anything to the submit button

<script type="text/javascript">
function validate(theForm) {
  var rads = theForm.MyRadioField;
  var cnt=0;
  for (var i=0;i<rads.length;i++) {
    if (rads[i].checked) cnt++;
  }
  if (cnt===0) {
    alert('Please check a radio');
    return false;
  }
  var checks = theForm.MyCheckBoxField;
  cnt=0;
  for (var i=0;i<checks.length;i++) {
    if (checks[i].checked) cnt++;
  }
  if (cnt===0) {
    alert('Please check at least one checkbox');
    return false;
  }
  var sel = theForm.MyDropListField;
  if (sel.selectedIndex<1) {
    alert('Please select an option');
    theForm.MyDropListField.focus();
    return false;
  }
  return true; // allow submission 
}
</script>

<form onsubmit="return validate(this)">
<input name='MyRadioField' value='1' class='MyStyle' type='radio'>
<input name='MyRadioField' value='2' class='MyStyle' type='radio'>
<input name='MyRadioField' value='3' class='MyStyle' type='radio'>


<input name='MyCheckBoxField' value='1' class='MyStyle' type='checkbox'>
<input name='MyCheckBoxField' value='2' class='MyStyle' type='checkbox'>
<input name='MyCheckBoxField' value='3' class='MyStyle' type='checkbox'>


<select name='MyDropListField' size='1' class='MyStyle'>
<option value=''>--- SELECT ONE PLEASE ---</option>
<option value='1'>MyDropListFieldText1</option>
<option value='2'>MyDropListFieldText2</option>
<option value='3'>MyDropListFieldText3</option>
</select>

<input type='submit' name='SubmitButton' value='Submit Choises' class='MyStyle'>
</form>                                  

Open in new window

0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.