[CLOSED] Client side validation help

  1. #1

    [CLOSED] Client side validation help

    Hello,

    I am searching for client side validations for a grid. I found few examples like this - https://examples1.ext.net/#/Form/Mis...dit_Form_View/, but I see that if an already existing text box value is made empty, then the trigger comes up , otherwise it does not show me a validation.

    When I add a new row to the grid, which adds empty textbox values, this time when I try to save empty textboxes, this trigger that I added does not come up.

    This is what I have done.

     <ext:Column ID="Column1" runat="server" Text="Name" DataIndex="Name"  Width="350px">
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" AllowBlank="false" MsgTarget="Side" />
                    </Editor>
                </ext:Column>
    Last edited by Daniil; Jun 17, 2014 at 11:39 AM. Reason: [CLOSED]
  2. #2
    Hi @vmehta,

    Please provide a full test case and describe exact steps to reproduce the problem.
  3. #3
    Here is the sample code

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ValidationCheck.aspx.cs" Inherits="ValidationCheck" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
     
      <ext:XScript ID="XScript1" runat="server">       
              <script>       
                  var topicValues = function (value)                 
                  {               
                      var r = #{StoreCombo}.getById(value);                       
                       if (Ext.isEmpty(r))                             
                       { 
                        return "";  
    
                       }                                          
                        return r.data.TopicName;                         
                        
                          };  
                          
                         
             </script>      
             
                 </ext:XScript> 
             
            <ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
            <ext:Store ID="StoreCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="TopicID">
                        <Fields>
                            <ext:ModelField Name="TopicID" />
                            <ext:ModelField Name="TopicName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="3">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="TopicID" />
                                    <ext:ModelField Name="TopicName" />
                                    <ext:ModelField Name="ShortDescription"/>
                                    <ext:ModelField Name="LongDescription" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
                            <Renderer Fn="topicValues" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
                                    ValueField="TopicID" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
                            Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                            </Editor>
                        </ext:Column>
                       
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server">
                    </ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click OnEvent="btnSave_Click">
                                        <ExtraParams>
                                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button ID="Button1" runat="server" Icon="Add">
                                <DirectEvents>
                                    <Click OnEvent="btnAdd_Click">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
    
            </ext:GridPanel>
           
            </div>
            </form>
            </body>
            </html>
    .cs page

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class ValidationCheck : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
            if (!X.IsAjaxRequest)
            {
                //DataSource for StoreCombo
                List<object> StoreComboData = new List<object>
                                        {
                                            new {TopicID="1",TopicName="Topic1"},
                                            new {TopicID="2",TopicName="Topic2"},
                                            new {TopicID="3",TopicName="Topic3"}
                                        };
                StoreCombo.DataSource = StoreComboData;
                StoreCombo.DataBind();
    
    
    
                //DataSource for GridBox
                List<object> gridData = new List<object>
                                        {
                                            new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1" },
                                            new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2"}
                                            
                                        };
                Store1.DataSource = gridData;
                Store1.DataBind();
            }
    
        }
    
        [DirectMethod]
        protected void btnSave_Click(object sender, DirectEventArgs e)
        {
            string json = e.ExtraParams["Values"];
            Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);
    
            string strTopicName = string.Empty;
            string strTopicDescp = string.Empty;
            string strTopicID = string.Empty;
            foreach (Dictionary<string, string> row in dctTopics)
            {
    
                foreach (KeyValuePair<string, string> keyValuePair in row)
                {
                    if (keyValuePair.Key == "TopicName")
                    {
    
                        strTopicName = keyValuePair.Value;
                    }
    
                }
    
    
    
            }
        }
    
        protected void btnAdd_Click(object sender, DirectEventArgs e)
        {
            List<object> gridData = new List<object>
                                        {
                                            new {TopicID = "1", TopicName = "", ShortDescription="" },
                                            
                                        };
            this.Store1.Add(gridData);
            this.GridPanel1.GetStore().CommitChanges();
        }
    }

    Steps:

    1. Try to empty Short Description text box in column and tab out, the validation shows up.
    2. Click on Add icon at the top bar on the grid. New row is added.
    3. Short Description is already empty and the validation does not show up.

    I need to implement a validation if short Descrption is empty and also if Topic combo box is not chosen. Let me know how I can acheive it.

    Thanks
    Last edited by vmehta; Jun 06, 2014 at 11:23 AM.
  4. #4
    Thank you for the test case.

    In the future, please put the code behind directly on the .aspx page.
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
       
        /* the rest of code behind */
    </script>
    Please notice
    <%@ Page Language="C#" %>
    Everything else is removed.

    It allows us to copy, paste and run your test cases without any chances. It speeds up processing. Thank you for understanding.

    As for the problem, I can suggest the following solution.
    <ext:Column ...>
        <Editor>
            <ext:TextField runat="server" AllowBlank="false" />
        </Editor>
        <EditorOptions>
            <Listeners>
                <StartEdit Handler="this.field.validate();" />
            </Listeners>
        </EditorOptions>
    </ext:Column>
  5. #5
    Thanks for the reply. But adding this did not work.
  6. #6
    Please post a full test case again.
  7. #7
    Here is the sample.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <ext:XScript ID="XScript1" runat="server">       
              <script>       
                  var topicValues = function (value)                 
                  {               
                      var r = #{StoreCombo}.getById(value);                       
                       if (Ext.isEmpty(r))                             
                       { 
                        return "";  
    
                       }                                          
                        return r.data.TopicName;                         
                        
                          };  
                          
                         
             </script>      
             
            </ext:XScript>
            <script runat="server">
                protected void Page_Load(object sender, EventArgs e)
                {
    
                    if (!X.IsAjaxRequest)
                    {
                        //DataSource for StoreCombo
                        List<object> StoreComboData = new List<object>
                                        {
                                            new {TopicID="1",TopicName="Topic1"},
                                            new {TopicID="2",TopicName="Topic2"},
                                            new {TopicID="3",TopicName="Topic3"}
                                        };
                        StoreCombo.DataSource = StoreComboData;
                        StoreCombo.DataBind();
    
    
    
                        //DataSource for GridBox
                        List<object> gridData = new List<object>
                                        {
                                            new {TopicID = "1", TopicName = "Topic1", ShortDescription="Test1" },
                                            new {TopicID = "3", TopicName = "Topic3", ShortDescription="Test2"}
                                            
                                        };
                        Store1.DataSource = gridData;
                        Store1.DataBind();
                    }
    
                }
    
                [DirectMethod]
                protected void btnSave_Click(object sender, DirectEventArgs e)
                {
                    string json = e.ExtraParams["Values"];
                    Dictionary<string, string>[] dctTopics = JSON.Deserialize<Dictionary<string, string>[]>(json);
    
                    string strTopicName = string.Empty;
                    string strTopicDescp = string.Empty;
                    string strTopicID = string.Empty;
                    foreach (Dictionary<string, string> row in dctTopics)
                    {
    
                        foreach (KeyValuePair<string, string> keyValuePair in row)
                        {
                            if (keyValuePair.Key == "TopicName")
                            {
    
                                strTopicName = keyValuePair.Value;
                            }
    
                        }
    
    
    
                    }
                }
    
                protected void btnAdd_Click(object sender, DirectEventArgs e)
                {
                    List<object> gridData = new List<object>
                                        {
                                            new {TopicID = "1", TopicName = "", ShortDescription="" },
                                            
                                        };
                    this.Store1.Add(gridData);
                    this.GridPanel1.GetStore().CommitChanges();
                }
            </script>
            <ext:ResourceManager ID="rmPrelimIdeas" runat="server" />
            <ext:Store ID="StoreCombo" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="TopicID">
                        <Fields>
                            <ext:ModelField Name="TopicID" />
                            <ext:ModelField Name="TopicName" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store ID="Store1" runat="server" PageSize="3">
                        <Model>
                            <ext:Model ID="Model2" runat="server">
                                <Fields>
                                    <ext:ModelField Name="TopicID" />
                                    <ext:ModelField Name="TopicName" />
                                    <ext:ModelField Name="ShortDescription" />
                                    <ext:ModelField Name="LongDescription" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" Width="240">
                            <Renderer Fn="topicValues" />
                            <Editor>
                                <ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
                                    ValueField="TopicID" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column1" runat="server" Text="Short Description" DataIndex="ShortDescription"
                            Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                            </Editor>
                            <EditorOptions>
                                <Listeners>
                                    <StartEdit Handler="this.field.validate();" />
                                </Listeners>
                            </EditorOptions>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing1" runat="server">
                    </ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" />
                </SelectionModel>
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="btnSave" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click OnEvent="btnSave_Click">
                                        <ExtraParams>
                                            <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({selectedOnly:true}))"
                                                Mode="Raw" />
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Button ID="Button1" runat="server" Icon="Add">
                                <DirectEvents>
                                    <Click OnEvent="btnAdd_Click">
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel>
        </div>
        </form>
    </body>
    </html>
  8. #8
    Indeed, it doesn't work. Sorry for the inconvenience.

    Please set up Delay="1".
    <StartEdit Handler="this.field.validate();" Delay="1" />
  9. #9
    Yes. It did work. But when I added a new row and clicked on it, the validator comes up. But when I tab out, the validator disappears which means it will still allow the user to click on save and continue. Is there an option to control this?
  10. #10
    To validate a Store's data I would try a Model's Validations, see "Validations" section in the docs:
    http://docs.sencha.com/extjs/4.2.1/#...Ext.data.Model
    <ext:Model runat="server">
        <Fields>
            <ext:ModelField Name="text" />
        </Fields>
        <Validations>
            <ext:PresenceValidation Field="text" />
        </Validations>
    </ext:Model>
    To visualize an error in a GridPanel I would think about a Column's Renderer.

Similar Threads

  1. [CLOSED] How to fire remote validation in client side?
    By trePjt in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 20, 2014, 8:15 AM
  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. Replies: 3
    Last Post: Jul 11, 2011, 9:43 AM
  4. Client & Server Side Control Validation
    By r_honey in forum 1.x Help
    Replies: 3
    Last Post: Dec 27, 2009, 5:16 AM
  5. Client-side validation for gridpanel editor
    By fquintero in forum 1.x Help
    Replies: 1
    Last Post: Oct 07, 2009, 10:39 AM

Posting Permissions