[CLOSED] VType and form validation

  1. #1

    [CLOSED] VType and form validation

    Hi,

    I'm trying to implement a simple VType validation on a DateField. I'd like to understand how to do it properly so that it gets wired into the overall form validation call. So far, isValid() seems to disregard the custom validation logic returning "true" with the date input being, for example, "1/1/1001". Please suggest how to handle it properly or if there're any flaws in my approach.

    <%@ 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 runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
        <script type="text/javascript">
            Ext.apply(Ext.form.VTypes, {
                mydaterange: function (val, field) {
                    var date = field.parseDate(val);
                    if (!date) {
                        return true; //instead of 'return;' - it was breaking a validation process
                    }
    
                    var today = new Date();
                    if (date < new Date("1/1/1753") || date > new Date(today.getFullYear(), today.getMonth(), today.getDate())) {
                        return false;
                    }
    
                    return true;
                }
            });
    
            var validate = function () {
                var valid = Form1.getForm().isValid();
                Ext.Msg.alert("Validation", valid ? "Valid" : "Invalid");
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel runat="server" ID="Form1" ButtonAlign="Left">
                <Items>
                    <ext:DateField
                        ID="DateField1"
                        runat="server"
                        Width="100"
                        FieldLabel="From"
                        Vtype="mydaterange" />
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Validate">
                        <Listeners>
                            <Click Handler="validate();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 03, 2014 at 4:18 AM. Reason: [CLOSED]
  2. #2
    After some poking around, I believe the missing part causing the invalid behavior was the VType text property. Fixed code 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 runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder runat="server" Mode="Script" />
        <script type="text/javascript">
            var today = new Date();
            var todayNoTime = new Date(today.getFullYear(), today.getMonth(), today.getDate());
    
            Ext.apply(Ext.form.VTypes, {
                mydaterange: function (val, field) {
                    var date = field.parseDate(val);
                    if (!date) {
                        return true; //instead of 'return;' - it was breaking a validation process
                    }
    
                    if (date < new Date("1/1/1753") || date > new Date()) {
                        return false;
                    }
    
                    return true;
                },
    
                mydaterangeText: String.format("Date must be between 1/1/1753 12:00:00 AM and {0}.", todayNoTime)
            });
    
            var validate = function () {
                var valid = Form1.getForm().isValid();
                Ext.Msg.alert("Validation", valid ? "Valid" : "Invalid");
            };
        </script>
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:FormPanel runat="server" ID="Form1" ButtonAlign="Left">
                <Items>
                    <ext:DateField
                        ID="DateField1"
                        runat="server"
                        Width="100"
                        FieldLabel="From"
                        Vtype="mydaterange" />
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Validate">
                        <Listeners>
                            <Click Handler="validate();" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  3. #3
    Hi Vadym,

    Yes, you are right.

    There is also a TextField's VtypeText property.
    http://docs.sencha.com/extjs/3.4.0/#...-cfg-vtypeText

    Though, I would also prefer to define a message in a VType definition as you did.
    Last edited by Daniil; Feb 03, 2014 at 4:18 AM.
  4. #4
    Thanks for the pointers, Daniil!

Similar Threads

  1. [CLOSED] Model validation in Form
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 05, 2013, 8:47 AM
  2. [CLOSED] validation vtype
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Jul 20, 2012, 9:07 AM
  3. [CLOSED] V2.0 Validation Form Help
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 14, 2012, 2:55 PM
  4. Login form - validation form
    By LordMX in forum 1.x Help
    Replies: 0
    Last Post: Aug 14, 2011, 11:44 AM
  5. [CLOSED] validation form all
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 22, 2011, 8:05 PM

Tags for this Thread

Posting Permissions