Avatar of alfardan
alfardanFlag for United Arab Emirates asked on

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??
JavaScriptJScriptScripting Languages

Avatar of undefined
Last Comment
Michel Plungjan

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Ironhoofs

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Michel Plungjan

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

All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck