Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Anthony Queen
2225
Issue with validation of hidden editors.
posted

I have a form in which there are two sections.

There are three possibilities for how it is displayed and they are:

  1. Section1 Visible, Section 2 Hidden
  2. Section 1 Visible, Section 2 Visible
  3. Section 1 Hidden, Section 2 Visible

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:

  • DatePicker
  • TextEditor
  • CurrencyEditor

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>

 

  • 24497
    posted

    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>