I have a form in which there are two sections.
There are three possibilities for how it is displayed and they are:
There are editors in both sections that have the following settings:
.Required(true).ValidatorOptions(m => m.OnSubmit(true).KeepFocus(ValidatorKeepFocus.Never).FormSubmit(true))
The issue is that they shouldn't be validated if they are hidden. However, I'm seeing that the hidden fields ARE showing the red "This field is required" message when the form is submitted. It shows up in the very top left corner of the screen and isn't associated with any field visible on the screen.
I am using:
The current required message is from a textEditor item.
How can I set the editors to ignore the "Required" flag when hidden on the form?
Thanks,Tony
FYI, I am hiding the section with jquery, similar to this:
<script type="text/javascript"> $(document).ready(function () { var condition1 = @Model.ID1; var condition2 = @Model.ID2;
if condition1 == 0) { $(".Section1").hide(); } if condition2 == 0){ $(".Section2").hide(); } });</script>
Hi Anthony,
Validation occurs regardless of visibility of target element. Similar is used by other validation frameworks as well. Example, for standard asp validators:
<div style="display:none"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></div><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
It is possible to add another property/option to igValidator (internal widget used for validation by editors), which would allow to skip validation if target is invisible. But that can be on level of feature request and it can not be used a default. Because validation-target-element for igValidator can be anything including invisible subchild of complex validation-target.
The igValidator raises several events and application may process them and customize behavior. Particularly application may process "validation" event, check if target element should be validated or not and conditionally cancel validation. Let say, it may check for offsetWidth or offsetHeight of target, or check visibility/state of parent, etc.
In order to process events, application should write javascript block after corresponding Mvc control was rendered into html. The jquery has several options to assign event listeners/handlers to a widget. The simplest one is to set event-option, because events appear as options.
Below codes will skip validation if target element (TextEditor1) is not visible. Here a hard coded display:none of parent of editor is used, so, TextEditor1 will be never validated.
<div style="display:none"> <%= Html.Infragistics().TextEditor().ID("TextEditor1").Required(true).ValidatorOptions(m => m.OnSubmit(true).KeepFocus(ValidatorKeepFocus.Never).FormSubmit(true)).Render()%></div>
<script type="text/javascript">$(function () { $('#TextEditor1').igValidator('option', 'validation', function (evt, ui) { // if application returns false, then default validation is canceled if (!this.offsetWidth) { return false; } });});</script>
When I upgraded to 12.1 of Infragistics.Web.Mvc (3.12.1.2059), this approach no longer worked. I have since gone back to 11.2 (3.11.2.2060) and it is working again.
If you know the right way of doing this in the newer versions, please let me know.
Thanks,
Tony
Hi Tony,
Can you tell what exactly does not work, validation event is not raised or "return false" has no effect?
I wrote a sample, which has 2 editors and one of them is located in a hidden container. Both editors use same validation function and that function skips validation of editor, which is invisible (has no offset).
I attached that sample. It does not use any local resources, so, it can be tested from any location. I hope it mimics your application. Please check how it works: click submit with different combinations of values in editors, visibility of editor in container, etc. I hope it will work as it was designed.
It should be no difference between simple html and Mvc application. You may look at generated source in browser and probably find same things as you would write them into html manually.
Try to check if by the time when you assign validation option/event, corresponding editor/validator associated with element is already created. For example,
alert('validator:' + $('#date1').data('igValidator'));
$('#date1').igValidator('option', 'validation', function (evt, ui) {...});
If alert will show null or undefined, then adding event handler to "date1" at that time will fail (or create dummy parallel validator).
You also may try to use "bind" or validatorOptions as I provided in previous sample. Example with bind:
$('#date1').bind('igvalidatorvalidation', function (evt, ui) {...});
In any case, a statement related to adding extra options/events to existing editor/validator should be performed (while debugging) with a check if corresponding widget was already created. While checking for existing widget you should use exact name. For example, if you originally created "date1" as igEditor, then you should not use check for igDateEditor or similar, but only check for "igEditor". If you are not sure which widget is actually created, then you may look at generated html and find name of widget created for a specific field-id.
In my MVC3 application the events are not being fired with the newer version of the MVC dll (version specified above).
Your test worked fine on my machine though.