Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Required Field Validation with Javascript

Posted on 2012-03-16
3
Medium Priority
?
323 Views
Last Modified: 2012-03-26
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??
0
Comment
Question by:alfardan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 7

Accepted Solution

by:
Ironhoofs earned 1000 total points
ID: 37728960
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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 1000 total points
ID: 37729160
But be sure to double check anything you learn from w3schools.
there is a good reason someone created http://w3fools.com/
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37729177
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

618 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