?
Solved

Required Field Validation with Javascript

Posted on 2012-03-16
3
Medium Priority
?
314 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

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

741 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