Don't validate field if disabled

Question

0.00/5 (No votes)

See more:

I am making a form that has required fields that when a field is diabled it shouldn't be validated as required. A cover choice must be selected. If the choice is Scribbles or Wild Thing you must choose one color choice and if the Our House cover is selected you must choose two colors. The form works great but I can't figure out how to validate it properly. I would appreciate any help.
Thanks,
Mike

Here ths script:

C#

<script language="javascript">
function selectOptionOne(){
    // disable one
    document.getElementById("ChoiceOne").disabled = true;
    // disable two
    document.getElementById("ChoiceTwo").disabled = true;
}
 
function selectOptionTwo(){
    // enable one
    document.getElementById("ChoiceOne").disabled = false;
	document.getElementById("ChoiceOne").style.display = 'block';
    // disable two
    document.getElementById("ChoiceTwo").disabled = true;  
}
 
function selectOptionThree(){
    // enable one
    document.getElementById("ChoiceOne").disabled = false;
	document.getElementById("ChoiceOne").style.display = 'block';
    // ensable two
    document.getElementById("ChoiceTwo").disabled = false;
	document.getElementById("ChoiceTwo").style.display = 'block';
  
}
</script>

This is the form inputs:

XML

<label>
                              <input type="radio" name="Standard Cover Choice" value="Rec Tech" onClick="javascript:selectOptionOne();" id="Standard_Covers_0" />
                              Rec Tech</label>
                          </span></td>
                          <td width="105" height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="School Time" onClick="javascript:selectOptionOne();" />
School Time</span></td>
                          <td width="105" height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="All Keyed Up" onClick="javascript:selectOptionOne();" />
All Keyed Up</span></td>
                          <td width="105" height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Cityscape" onClick="javascript:selectOptionOne();" />
Cityscape</span></td>
                          <td width="120" height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Shimmer" onClick="javascript:selectOptionOne();" />
Shimmer</span></td>
                        </tr>
                        <tr>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="School Tools" onClick="javascript:selectOptionOne();" />
School Tools</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Retrorama" onClick="javascript:selectOptionOne();" />
Retrorama</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Our World" onClick="javascript:selectOptionOne();" />
Our World</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Reflections" onClick="javascript:selectOptionOne();" />
Reflections</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="All Patched Up" onClick="javascript:selectOptionOne();" />
All Patched Up</span></td>
                        </tr>
                        <tr>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Scribbles" onClick="javascript:selectOptionTwo();" id="Standard_Covers_10" />
                            Scribbles</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Wild Thing" onClick="javascript:selectOptionTwo();" id="Standard_Covers_11" />
                            Wild Thing</span></td>
                          <td height="25" align="left"><span class="Text">
                            <input type="radio" name="Standard Cover Choice" value="Our House" onClick="javascript:selectOptionThree();"/>
                            Our House</span></td>
                          <td height="25" align="left">&nbsp;</td>
                          <td height="25" align="left">&nbsp;</td>
                        </tr>
                        </table></td>
                    </tr>
                    </table></td>
                  <td width="10">&nbsp;</td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td width="10" height="100" align="left" class="Text"><p>&nbsp;</p></td>
            <td width="400" align="left" class="Text"><p><span class="redtext">*</span>For Scribbles and Wild Thing covers, please indicate your standard color choice from the <strong>First Color Choice</strong> drop down list.</p>
              <p> <span class="redtext">*</span>For Our House cover choose <strong>First Color Choice</strong> and <strong>Second Color Choice</strong> from drop down lists.</p></td>
            <td width="290" align="center" class="Text"><table width="280" border="0" cellspacing="0" cellpadding="0">
              <tr class="Text">
                <td width="140" height="20" align="center"><span class="redtext">*</span>First Color Choice</td>
                <td width="140" height="20" align="center"><span class="redtext">*</span>Second Color Choice</td>
                </tr>
              <tr>
                <td width="140" align="center"><label>
                  <select name="Color Choice One" class="Text" select id="ChoiceOne" style="display:none">
                    <option value="0">Select Color One</option>
                    <option value="Yellow">Yellow</option>
                    <option value="Gold">Gold</option>
                    <option value="Orange">Orange</option>
                    <option value="Purple">Purple</option>
                    <option value="Green">Green</option>
                    <option value="Red">Red</option>
                    <option value="Burgundy">Burgundy</option>
                    <option value="Brown">Brown</option>
                    <option value="Process Blue">Process Blue</option>
                    <option value="Brilliant Blue">Brilliant Blue</option>
                    <option value="Reflex Blue">Reflex Blue</option>
                    <option value="Black">Black</option>
                    </select>
                  </label></td>
                <td width="140" align="center"><select name="Color Choice Two" class="Text" select id="ChoiceTwo" style="display:none">
                  <option value="0">Select Color Two</option>
                  <option value="Yellow">Yellow</option>
                  <option value="Gold">Gold</option>
                  <option value="Orange">Orange</option>
                  <option value="Purple">Purple</option>
                  <option value="Green">Green</option>
                  <option value="Red">Red</option>
                  <option value="Burgundy">Burgundy</option>
                  <option value="Brown">Brown</option>
                  <option value="Process Blue">Process Blue</option>
                  <option value="Brilliant Blue">Brilliant Blue</option>
                  <option value="Reflex Blue">Reflex Blue</option>
                  <option value="Black">Black</option>
                  </select>

Posted 27-Dec-10 8:09am

sadler56

Updated 27-Dec-10 18:06pm

Sunasara Imdadhusen

v2

Add a Solution

Comments

Manfred Rudolf Bihy 27-Dec-10 14:20pm

I can't see any validation being done in your code. Are you sure you're showing us the relevant parts?
Are you using jQuery and the jQuery validation plugin?

Dr.Walt Fair, PE 27-Dec-10 19:30pm

Agreed. Where are you trying to do validation?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

sadler56 · Answer 1 · 2010-12-28T02:35:00

I am using

gen_validatorv31.js

I am not an expert so I don't know if this is the best way. I guess what I'm asking if there is a way to do it within my javascript or the right way to do it. Thanks so much for your help. The url for the form is

<a href="http://test.memorybook.com/meridian%20test%20folder/webforms/standcovformRB.html">http://test.memorybook.com/meridian%20test%20folder/webforms/standcovformRB.html</a>[<a href="http://test.memorybook.com/meridian%20test%20folder/webforms/standcovformRB.html" target="_blank" title="New Window">^</a>]

This is my validation.

<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
  var frmvalidator  = new Validator("form1");
  frmvalidator.addValidation("School Name","maxlen=50");
  frmvalidator.addValidation("School Name","req");
  
  frmvalidator.addValidation("Month","dontselect=0");
  frmvalidator.addValidation("Month","dontselect=0");
  
  frmvalidator.addValidation("Day","dontselect=0");
  frmvalidator.addValidation("Day","dontselect=0");
  
  frmvalidator.addValidation("Year","dontselect=0");
  frmvalidator.addValidation("Year","dontselect=0");
  
  frmvalidator.addValidation("Name As It Appears On Cover","maxlen=50");
  frmvalidator.addValidation("Name As It Appears On Cover","req");
  
  frmvalidator.addValidation("Standard Cover Choice","selone_radio");
  frmvalidator.addValidation("Standard Cover Choice","req");
  
  frmvalidator.addValidation("Select Font","selone_radio");
  frmvalidator.addValidation("Select Font","req");
  
  frmvalidator.addValidation("Mascot Selection","num");
  frmvalidator.addValidation("Mascot Selection","req");
  </script>