[OPEN] [#100] Validation - Remote/Client

  1. #1

    [OPEN] [#100] Validation - Remote/Client

    Is there a way to do both remote and client validation? For example, I want to ensure that my textbox is not blank, which I can do on the client, but I also want to make sure the data is not already in the database, which must be verified remotely. If this is not possible to do both, please just let me know.
    Last edited by Daniil; Dec 29, 2012 at 6:13 AM. Reason: [OPEN] [#100]
  2. #2
    Last edited by fabricio.murta; Feb 06, 2015 at 7:58 PM. Reason: point to examples2 samples
  3. #3
    The link was helpful, but to be clear, I am validating the same textbox on the client and remotely. - Still, both are working. However, I have a UI issue. While nothing is broken, the "alerts" are not visuallly the same. I have this:
    With txt
    .ID = "name"
    .IndicatorTip = "Please enter a team name."
    .ValidateOnBlur = True
    .ValidateOnChange = False
    .AllowBlank = False
    .MaxLength = 60
    .MaxLengthText = "A team's name may not exceed 60 characters."
    .BlankText = "Team name is required and cannot be blank."
    .IsRemoteValidation = True
    .RemoteValidation.Url = "~/Assignments/_TeamExists"
    .RemoteValidation.Method = HttpMethod.POST
    .MsgTarget = MessageTarget.QTip
    .RemoteValidation.Json = True
    End With
    Oddly, the "blank" validation shows up to the side of the grid as a popup like box. (I am using a grid with a rowEditing plugin.) All other validations show up as a QTip, or whatever format I have set above. Is this "normal" behavior for them to be different, or have I inadvertently set some property to show the blank error in this way? Additionally, it seems that I am able to generate a remote error, but still make a combination of input changes that causes the "save" button to enable when it really shouldn't. Is there something special to set for the plugin to be aware of remote validation validity?
  4. #4
    For a little more info to the above post, the button appears enabled, but it is not clickable until the validation error is cleared.
  5. #5
    Regarding ToolTip.

    This is the default ErrorSummary behavior.
    http://docs.sencha.com/ext-js/4-1/#!...g-errorSummary

    But I have discovered it is badly aligned. I have reported it to Sencha.
    http://www.sencha.com/forum/showthread.php?232838

    Regarding Editor RemoteValidation.

    Generally, RemoteValidation was not designed to use for the Editor. Though, I think, there is a good chance to get it working. We will look.
  6. #6
    Quote Originally Posted by Daniil View Post
    Regarding ToolTip.

    This is the default ErrorSummary behavior.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.RowEditing-cfg-errorSummary

    But I have discovered it is badly aligned. I have reported it to Sencha.
    http://www.sencha.com/forum/showthread.php?232838
    Sencha has opened a bug.

    Quote Originally Posted by Daniil View Post
    Regarding Editor RemoteValidation.

    Generally, RemoteValidation was not designed to use for the Editor. Though, I think, there is a good chance to get it working. We will look.
    Since RowEditing (and, internally, RowEditor) does know nothing about remote validation, I can suggest the following solution:
    <RemoteValidation 
        Url="/Test/CheckField" 
        Complete="App.GridPanel1.editingPlugin.getEditor().onFieldChange();" />
    to get the RowEditing knowing about that. Though, sure, if you would like to avoid re-working RowEditing/RowEditor to support remote validation:)

    Another thing that I have discovered one bug more. It is related to:
    Quote Originally Posted by adelaney View Post
    For a little more info to the above post, the button appears enabled, but it is not clickable until the validation error is cleared.
    Here is a workaround:
    <ext:RowEditing runat="server" ClicksToEdit="1" ErrorSummary="false">
        <Listeners>
            <BeforeEdit Handler="this.getEditor().onFieldChange();" Delay="100" />
        </Listeners>
    </ext:RowEditing>
    and the bug report to Sencha:
    http://www.sencha.com/forum/showthread.php?232876

    Here is the full example which appears to be working correctly.

    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.Net.MVC v2 Example</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Height="200">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                                <ext:ModelField Name="test3" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Proxy>
                        <ext:AjaxProxy Url="/Test/GetData">
                            <Reader>
                                <ext:ArrayReader Root="data" />
                            </Reader>
                        </ext:AjaxProxy>
                    </Proxy>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test1" DataIndex="test1" />
                    <ext:Column runat="server" Text="Test2" DataIndex="test2">
                        <Editor>
                            <ext:TextField runat="server" AllowBlank="false" IsRemoteValidation="true">
                                <RemoteValidation 
                                    Url="/Test/CheckField" 
                                    Complete="App.GridPanel1.editingPlugin.getEditor().onFieldChange();" /> <%-- To get the RowEditing know about remote validtion --%>
                            </ext:TextField>
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:RowEditing runat="server" ClicksToEdit="1" ErrorSummary="false">
                    <Listeners>
                        <%-- Workaround to get correct initial disabled/enabled state of the Update button --%>
                        <BeforeEdit Handler="this.getEditor().onFieldChange();" Delay="100" />
                    </Listeners>
                </ext:RowEditing>
            </Plugins>
        </ext:GridPanel>
    </body>
    </html>
    Example Controller Actions
    public ActionResult GetData()
    {
        StoreResult r = new StoreResult();
        r.Data = new object[] 
        { 
            new object[] { "test1", "test2", "test3" },
            new object[] { "test4", "", "test6" },
            new object[] { "test7", "test8", "test9" },
        };
        return r;
    }
    
    public ContentResult CheckField(string id, string value)
    {
        bool success = value == "Valid";
        object r = new 
        {
            valid = success,
            message = success ? "" : "'Valid' is valid value only"
        };
    
        return Content(JSON.Serialize(r), "application/json");
    }
  7. #7
    There is the following example you can be interested in.
    <Ext.NET 2.1 sources root>\Ext.Net.Examples\Examples\GridPanel\Plugins\RowEditor_Remote\Default.aspx
  8. #8
    Quote Originally Posted by Daniil View Post

    Another thing that I have discovered one bug more. It is related to:

    Quote Originally Posted by adelaney View Post
    For a little more info to the above post, the button appears enabled, but it is not clickable until the validation error is cleared.
    Here is a workaround:
    <ext:RowEditing runat="server" ClicksToEdit="1" ErrorSummary="false">
        <Listeners>
            <BeforeEdit Handler="this.getEditor().onFieldChange();" Delay="100" />
        </Listeners>
    </ext:RowEditing>
    and the bug report to Sencha:
    http://www.sencha.com/forum/showthread.php?232876
    It is fixed in the trunk. So, you could remove the workaround, i.e. the BeforeEdit listener.

    Quote Originally Posted by Daniil View Post
    Regarding ToolTip.

    This is the default ErrorSummary behavior.
    http://docs.sencha.com/ext-js/4-1/#!...g-errorSummary

    But I have discovered it is badly aligned. I have reported it to Sencha.
    http://www.sencha.com/forum/showthread.php?232838
    It is still not fixed. Opened an Issue to track this defect, see:
    https://github.com/extnet/Ext.NET/issues/100

Similar Threads

  1. Remote Validation using RowEditor
    By mait_k in forum 1.x Help
    Replies: 1
    Last Post: Dec 20, 2011, 4:24 PM
  2. Client Side Validation and Validation Status
    By speddi in forum 1.x Help
    Replies: 8
    Last Post: Nov 03, 2011, 11:24 AM
  3. FileUploadField and Remote validation
    By fisher in forum 1.x Help
    Replies: 0
    Last Post: Aug 16, 2011, 10:20 AM
  4. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  5. Remote Validation
    By olimpia in forum 1.x Help
    Replies: 0
    Last Post: Jun 12, 2009, 7:39 PM

Tags for this Thread

Posting Permissions