Changing jQuery Validation dynamically loses formatting of all error messages

[tonybabb]

Good afternoon,

I'm having a problem changing jQuery Validation rules dynamically. I have some fields defined as "Required" and when I change some rules(making some additional fields "Required" ) I lose the formatting that comes with all error messages in all fields (red box around the field and a "tooltip" floating over the field.

Background, I have a single form with four sections, each section has several fields. The first section is always required and always displayed, the other sections may be required/ displayed depending on url parameters when the page is loaded. When the other sections are required/ displayed I need to change most of the input fields in that section to be "required" and validated as such.

I thought I'd use the $(document).ready(function() and I can trigger this OK, however just for test purposes I simplified the form to only have two sections, one mandatory and one optional, and to display both sections of the form at all times. I also added a button which when clicked simulates the doc.ready behavior of making fields in the second part of the form "Required" also. This was done to aid in debugging. The form almost works.

I found when I submit the form with no changes to the second part and no data in any of the fields I get a red box around the required fields and a floating tooltip. This is correct. Then, I reload the page and click the button to make the fields in the second part of the form Required, then I submit the form with all fields empty and all fields show a "This field is required message" which means the validation is working but I'm not seeing the red box around any of the fields or the floating tooltip.

The test page can be seen here www.hollisterairshow.com/rally/testva.php

Here's the doc.ready js which only displays an alert for now and following that the js function triggered when the button is pressed to make the second part of the form "Required.

<script type="text/javascript">
 $(document).ready(function(){ 
 alert ("doc ready");
// Code to update validation moved to myFunction below
});
</script> 
<script>
function myFunction() {
	alert ("myFunction running");
 $('#form1').validate({ // initialize the plugin
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    }); 
    
    $('.tspreq').each(function() {
        $(this).rules('add', {
            required: true,
                  });
    }); 
}
</script>

Here one of the fields defined in the first part of the form as Required

<input name="businessname" id="businessname" type="text" required placeholder="Business Name"  size="57">

and here's one of the fields defined in the second part of the form and which needs to be changed to Required

<input type="radio" name="tspGenerator" value="X" id="tspGenerator_0"  class="tspreq" />
        Yes
      <br />
      <input type="radio" name="tspGenerator" value=" " id="tspGenerator_1" class="tspreq" />
        No

Another option I thought of was to predefine all fields as "Required" and then using a similar doc.ready function just populate the fields that are not displayed with a single dummy character so they should pass the validation check when submitted. Would this be a better approach anyway? ***UPDATE*** I tried this and found just plugging in a value works with text field validation but not with radio buttons or checkboxes as the validation is looking for specific value so to do this I think I'd have to add a permanently hidden option with the dummy value - doable but I think there must be a more elegant way....sigh.

Thanks for any assistance.

Tony Babb

[tonybabb]

Never mind, I got it working, not very pretty but it works. What I did was define most fields as "Required". Then I used doc.ready function to check which parts of the form were not required (based on url parameters). Then I either added content to text fields or set as "checked" any radio buttons - to do this I added a hidden extra radio button to the required radio groups and then set the hidden value as checked. In case it helps anyone here's some of the code I used.

Here's a sample radio group

<label for="tspTent">
    <strong>Temporary Tent<br />($101.00 per 120 sq. ft.):</strong>
    </label>
    </td>
    <td><br />
     <input type="radio" name="tspTent" value="X" id="tspTent_0" required="required" />
        Yes<br />
    <input type="radio" name="tspTent" value=" " id="tspTent_1"  required="required" />
        No 
     <input style="display:none" type="radio" name="tspTent" value="No TSP" id="tspTent_2"  required="required" />

And here's a section of the doc.ready code including a few lines where I "checked" the hidden radio buttons and a line that adds a dummy calue to some text fields

<script type="text/javascript">
 $(document).ready(function(){ 
$tspapp = "<?php echo $_GET['tspapp']?>"
$tfpapp = "<?php echo $_GET['tspapp']?>" 
 alert ("tfpapp=" + $tfpapp);

// Check if form sections should be displayed
// If not displayed then need to check or fill mandatory fields
// to pass validation tests

// TEMP STRUCTURE PERMIT 
if ($tspapp == 'none') {
	 document.getElementById("tspVenType_6").checked=true ;
	 document.getElementById("tspTent_2").checked=true ;
	 document.getElementById("tspGenerator_2").checked=true ;
	 document.getElementById("tspStage_2").checked=true ;
	 document.getElementById("tspOther_2").checked=true ;
	 $(".tspReq").val("No TSP");
	}

Tony