Validate without onsubmit or Dynamically add onsubmit to form

I have an application which I would like to add some javascript validation to.  I am looking for a way to dynamically either add the onsubmit to the form via javascript or be able to do the form validation without the javascript... Why don't i want to hard code the onsubmit?  

The validation i am trying to do is simple.

There is a form called products and it has 6 checkboxes on it.   I would like to run validation to require users to check 1 box and only 1 box...

The checkbox name is listOfProducts...

I can't change the form properties, but can add javascript to the header of the page.


Thanks,
Bruce
polobruceAsked:
Who is Participating?
 
REA_ANDREWCommented:
I have made my script more user friendly, all you have to do now is change the variables at the top and the script will sort itself out,

it requires, the name of your form, your naming convention for you check boxes, the prefix and also the number of check boxes that is allowed.

<script language="javascript">
var FormName = "form1";
//Have you given your check boxes a common naming convention, followed by a unique number? e.g. C1,C2,C3,C4,C5
var YourAnswer = true;
//Please state the Prefic of you CheckBoxes, e.g. if they are named C1,C2,C3,C4,C5 then the value you should enter is C;
var YourPrefix = "C";
//Please enter the least number of check boxes which should be completed.
var CompletedNumber = 1;

//Please make sure that no other form elements of type "checkbox" are using the same prefix, if they are not used in the same group.
var YourFormEval;

window.onload = function ()
{
      document.form1.onsubmit = function()
      {
            YourFormEval = eval("document."+FormName+".elements");
            return ValidateForm();
      }      
}
function ValidateForm()
{
var count = 0;
      for(i=0;i<YourFormEval.length;i++)
      {
            if(YourFormEval[i].type == "checkbox")
            {
                  if(YourFormEval[i].name.indexOf(YourPrefix) >= 0)
                  {
                        if(YourFormEval[i].checked == true)
                        {
                              count++;
                        }
                  }
            }
      }
      if(count > parseInt(CompletedNumber))
      {
      if(CompletedNumber > 1)
      {
      alert("Please only select "+CompletedNumber+" checkboxes");
      }
      else{
      alert("Please only select "+CompletedNumber+" checkbox");
      }
      
      for(i=0;i<YourFormEval.length;i++)
      {
            if(YourFormEval[i].type == "checkbox")
            {
                  if(YourFormEval[i].name.indexOf(YourPrefix) >= 0)
                  {
                        YourFormEval[i].checked = false;
                  }
            }
      }
      return false;
      }
      else{
            alert("Your Form will now be submitted");
            return true;
      }

}
</script>
0
 
REA_ANDREWCommented:
Here you go.

<html>

<head>
<script language="javascript">
function AssignEvent()
{
      document.form1.onsubmit = function()
      {
            return ValidateForm();
      }      
}
function ValidateForm()
{
var count = 0;
      for(i=0;i<document.form1.elements.length;i++)
      {
            if(document.form1.elements[i].type == "checkbox")
            {
                  if(document.form1.elements[i].checked == true)
                  {
                        count++;
                  }
            }
      }
      if(count > 1)
      {
      alert("Please only select one check box");
      return false;
      for(i=0;i<document.form1.elements.length;i++)
      {
            if(document.form1.elements[i].type == "checkbox")
            {
                  document.form1.elements[i].checked = false;
            }
      }
      }
      else{
            alert("Your Form will now be submitted");
            return true;
      }

}
</script>
<title>New Page 1</title>
</head>

<body onload="AssignEvent();">

<form name="form1" action="http://www.msn.com" method="POST">
  <p><font face="Garamond"><span style="background-color: #FFFF00">Please Check
  One</span></font></p>
  <p><i><font face="Garamond">&quot;Add the onsubmit in the code in the head
  section&quot;</font></i></p>
  <p><font face="Garamond"><input type="checkbox" name="C1" value="ON">1</font></p>
  <p><font face="Garamond"><input type="checkbox" name="C2" value="ON">2</font></p>
  <p><font face="Garamond"><input type="checkbox" name="C3" value="ON">3</font></p>
  <p><font face="Garamond"><input type="checkbox" name="C4" value="ON">4</font></p>
  <p><font face="Garamond"><input type="checkbox" name="C5" value="ON">5</font></p>
  <p><font face="Garamond"><input type="checkbox" name="C6" value="ON">6</font></p>
  <p><font face="Garamond"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></font></p>
</form>

</body>

</html>
0
 
REA_ANDREWCommented:
notice that the form will not submit until you have only one seletced. PLUS you do not have to touch the form.
0
 
REA_ANDREWCommented:
I have amended tha javascript, now if they choose more then one, and submit it will inform them they cannot choose more than one, and then resets them all to blank

<script language="javascript">
function AssignEvent()
{
      document.form1.onsubmit = function()
      {
            return ValidateForm();
      }      
}
function ValidateForm()
{
var count = 0;
      for(i=0;i<document.form1.elements.length;i++)
      {
            if(document.form1.elements[i].type == "checkbox")
            {
                  if(document.form1.elements[i].checked == true)
                  {
                        count++;
                  }
            }
      }
      if(count > 1)
      {
      alert("Please only select one check box");
      
      for(i=0;i<document.form1.elements.length;i++)
      {
            if(document.form1.elements[i].type == "checkbox")
            {
                  document.form1.elements[i].checked = false;
            }
      }
      return false;
      }
      else{
            alert("Your Form will now be submitted");
            return true;
      }

}
</script>
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.