Group field validation

[Taras]

I have a group of fields on a form.  It is OK if they are all empty, but if one in the group has data, they all must have data.  There are other fields with other validation rules that are not part of the group.

The fields are a combination of TimePicker, NumericTextBox, TextBox, MaskedTextBox, ComboBox and RadioButton.  The fields always appear in a group so they aren't spread out all over the form.

The values need to be checked before the form is saved.

What's the best way of checking for all fields null or not null and if they are not all null or all not null then display a message.  Ideally it would be nice to display which fields are missing.

I'm using the MVVM pattern

TIA

[Mihaela]

Hi Taras,

By design, the form Group consists of HTML <fieldset> tag with class "k-form-fieldset". 

To validate the controls in a specified form group, I would suggest the following approach:

• Get an instance of the form when the page is loaded and add a unique class to each form group (i.e. "Group_1", "Group_2"). In this way, you will be able to select and validate a specified group.

 

$(document).ready(function() {
        var form = $("#formName").data("kendoForm"); //get an instance of the Form by using its name
        if (form) {
            var groups = $(".k-form-fieldset"); //get all form groups
            $.each(groups, function() {  //loop through the groups
                var className = `Group_${i + 1}`;
                $(this).addClass(className); //add a class to each group
            });
        }
});

 

• Subscribe to the "submit" event of the form and validate the group with class "Group_2" (it contains TimePicker, NumericTextBox, TextBox, MaskedTextBox, ComboBox, and RadioGroup):

 

<div id="validation-error"></div>
@(Html.Kendo().Form<ProjectName.Models.FormOrderViewModel>()
  .Name("exampleForm")
  .Items(items =>
  {
     items.AddGroup()
       .Label("Shipping Address")
       .Layout("grid")
       .Items(...);
  })
  .Events(ev => ev.Submit("onFormSubmit"))
)

<script>
        function onFormSubmit(e) {
        e.preventDefault();
        var group2InputElements = $(".Group_2").find("[data-role]"); //get all controls in group with class "Group_2"
        var checkGroup2Data = 0;
        var totalGroupControls = group2InputElements.length; //the number of controls in the group

        $.each(group2InputElements, function() { //loop through the controls
            if ($(this).attr("data-role") == 'radiogroup') { //check the value of the RadioGroup control
                var group2RadioGroup = $(this).getKendoRadioGroup();
                if (group2RadioGroup.value()) {
                    checkGroup2Data += 1;
                }
            } else if ($(this).val()) { //check the value of the rest of the controls
                checkGroup2Data += 1;
            }
        });

        if (checkGroup2Data > 0 && checkGroup2Data < totalGroupControls) { //if not all controls are checked/completed, display an error message
            $("#validation-error").html("<div class='k-messagebox k-messagebox-error'>Error message text</div>");
        } else $("#validation-error").html("");
    }
</script>

Please give this suggestion a try and let me know if it works for you.

 

Regards, Mihaela Progress Telerik

[Taras]

Hi Mihaela,

I saw validation on the Telerik site but wasn't clear on implementation.

I'll give this a try, although it won't be right away. 

Thanks

Taras

[Taras]

Hi Mihaela,

The Kendo().Form didn't really work for me in this app but you gave me the direction on how to implement it.

 

Thanks