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?
 
IronhoofsConnect With a Mentor Commented:
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
 
Michel PlungjanConnect With a Mentor IT 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.