[CLOSED] FormPanel loaded with invalid fields

[aguidali]

Hi Guys,

as usual I have a dumb question; I have a window with a formpanel with some validation logic. When the form is submitted if there are errors then I show the message target near the control. And it works very well.

@(
    X.Window()
    .ID("WizardAddUserWindow1")
    .Height(510)
    .Icon(Icon.UserAdd)
    .Width(windowWidth)
    .Title("Nuovo utente (Passo 1 di 4)")
    .Resizable(false)
    .Closable(true)
    .Border(true)
    .Layout(LayoutType.Fit)
    .CloseAction(CloseAction.Destroy)
    .Modal(true)
    .Items(
            X.FormPanel()
                .ID("WizardFormPanel1")
                .Url(Url.Action("WizardUserAddStep1", "Admin"))
                .Border(false)
                .Header(false)
                .BodyPadding(10)
                
                .FieldDefaults(def =>
                {
                    def.MsgTarget = MessageTarget.Side;
                })                 
                .Items(
                    field =>
                    {
                        field.Add(
                            Html.X()
                                .Panel()
                                .ID("PanelHeader1")
                                .Html("<h1 class='margin-top-0'>Creazione guidata nuovo utente:</h1><p>Passo 1 di 4: dati anagrafici</p>")
                                .Header(false)
                                .Border(false)          
                            );

                        field.Add(
                            Html.X()
                                .Panel()
                                .ID("PanelHeader1Line")
                                .Html("<hr />")
                                .Header(false)
                                .Border(false)
                                .StyleSpec("padding: 0px; margin-bottom: 10px;")
                            );                        
                                                
                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.Firstname)
                                .FieldLabel("Nome")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .AllowBlank(false));

                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.Lastname)
                                .FieldLabel("Cognome")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .AllowBlank(false));

                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.Username)
                                .FieldLabel("Nome utente")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .AllowBlank(false));

                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.PhoneNumber)
                                .FieldLabel("Telefono")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth));

                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.CelNumber)
                                .FieldLabel("Cellulare")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth));

                        field.Add(
                            Html.X().TextFieldFor(m => m.userAddDto.Email)
                                .FieldLabel("Email")
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .AllowBlank(false)
                                .Vtype("email")
                                .VtypeText("Il valore inserito deve essere un indirizzo email nel formato \"utente@dominio.com\""));

                        field.Add(
                            Html.X().DateFieldFor(m => m.userAddDto.dtValidFrom)
                                .FieldLabel("Valido dal")
                                .AllowBlank(true)
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .Format(format)                            
                            );

                        field.Add(
                            Html.X().DateFieldFor(m => m.userAddDto.dtValidTo)
                                .FieldLabel("Valido al")
                                .AllowBlank(true)
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .Format(format)
                            );                        
                        
                        field.Add(
                            Html.X().ComboBoxFor(m => m.userAddDto.strExpireTypeId)
                                .ID("cbxFirm")
                                .FieldLabel("Scadenza password")
                                .Editable(false)
                                .AllowBlank(false)
                                .Width(componentWidth)
                                .LabelWidth(labelWidth)
                                .Items(
                                    from p in Model.userAddDto.listExpireType
                                    select
                                        new Ext.Net.ListItem
                                        {
                                            Text = p.Description,
                                            Value = p.Val.ToString()
                                        })
                                );                    
                                                
                        field.Add(
                            Html.X()
                                .Panel()
                                .ID("PanelBody1Line")
                                .Html("<hr />")
                                .Header(false)
                                .Border(false)
                            );

                        field.Add(
                            Html.X().CheckboxFor(m => m.userAddDto.bIsAdmin).BoxLabel("Utente con privilegi di amministratore").HideLabel(true)
                                .Width(componentWidth)
                                .LabelWidth(0)
                                );

                        field.Add(
                            Html.X().CheckboxFor(m => m.userAddDto.bIsDisabled).BoxLabel("Utente disabilitato").HideLabel(true)
                                .Width(componentWidth)
                                .LabelWidth(0)
                                );           
                    }
                )
                .Buttons(
                        X.Button()
                            .ID("btnNext")
                            .Text("Prossimo")
                            .Icon(Icon.NextGreen)
                            .Handler("Hsi.accountModule().WizardAddUserStep1();")                                 
                )
        )
)

After submission the record is saved; I would like to implement a check in the edit window like below:
Edit button pressed on the record -> if one or more properties are invalid then the related control in the window is marked as invalid with message at the right side.

Do you have any suggestion?

Best regards

[Daniil]

Hi @aguidali,

If you want a validation message to appear on the side of a component, please use this setting for that component.

.MsgTarget(MessageTarget.Side)

See also
http://docs.sencha.com/extjs/4.2.1/#...-cfg-msgTarget

[aguidali]

Hi Daniil,

probably the question isn't clear; I have already the validation message on the component side. The messages become visible after submitting the formpanel (because in the POST action I return the FormPanelResult with the Errors list populated correctly).

But there is another scenario important for me: I would like to load (as result of a direct event, for example if I want to edit something) a window with a formpanel inside. Each component of the window will be loaded with the corresponding value stored in the Model. If one of the value stored in the Model is not valid I want that the component is marked as error (with the usual exclamation point with a message related).

In the Post scenario the error message is in FormPanelResult.Errors, but how can I handle the other scenario?

Maybe there is a way to include a list of errors in the PartialViewResult...

So generally speaking the question is: How can i return a PartialViewResult that include a window with a FormPanel inside with some component marked with error?

Thanks.

Best regards

[Daniil]

Understand.

Please take a look at this example:
http://mvc.ext.net/#/Models/Model_State/

I guess it might suite your needs.

[aguidali]

Hi,

but the example in the link the error message become visible only after submit.
If the value related to the component (for example using textboxfor(m => m.name)) is invalid I would like to show the error near the component immediately (on window loading).

Example of controller in pseudo code:

[Authorize]
[RequireHttps]
public ActionResult WizardUserAddStep1()
{
   // Load vm from session for example
   //if (vm.name.isInvalid)
   //{
   //   this.ModelState.AddModelError("userAddDto.name", "Test"); // this shoud be correct in pure asp.net mvc
   //}
   return new PartialViewResult { ViewName = "WizardUserAddS1", Model = vm};
}

Best regards

[Daniil]

Yes, the example is not exactly your scenario, but it demonstrates the ModelState functionality which might be useful in your scenario as well.

Though, now I am thinking about another approach. If client side validation is built according to the Model, you can just call

App.FormPanel1.validate();

just after rendering the partial view.

It will validate all the FormPanel's components.