What's New?

[CLOSED] How to set a field status to not valid

  1. #1
    Aug 03, 2012, 8:59 PM

    [CLOSED] How to set a field status to not valid

    Hi,
    Can you please show me how to mark a field not valid? My JS below checks if the End date field is less than a Begin date field, if so, I need
    to mark the End date field invalid and prompt the user to enter a date that is greater than the Begin date. So far I tried using "markInvalid" but
    it didn't work - it didn't wrap around the End date field in red lines to indicate the field is NOT VALID.
     var CheckDateRange = function(){
                // Validate date range: End Date/Time must be greater than Start Date Time
                var end = Date.parse(#{dtWrapEndDate}.rawValue + " " + #{tfWrapEndTime}.value);
                var start = Date.parse(#{dtWrapStartDate}.rawValue + " " + #{tfWrapStartTime}.value);
            
                if(start >= end || end == 'NaN')
                {             
                    #{dtWrapEndDate}.focus();
#{dtWrapEndDate}.markInvalid("Invalid End date");
                    Ext.Msg.notify("Invalid Range", "End Date Time must be greater than Start Date Time");
                    return false;
                }
                return true;
           }
    Last edited by Daniil; Aug 07, 2012 at 1:39 PM. Reason: [CLOSED]
  2. #2
    Aug 04, 2012, 10:45 AM
    Hi,

    Where do you call the CheckDateRange function?

    I would suggest to use Validator.
    http://docs.sencha.com/ext-js/4-1/#!...-cfg-validator

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var myValidator = function (value, field) {
            var me = this,
                date = me.parseDate(value),
                now,
                valid = true;

            if (date) {
                now = Ext.Date.clearTime(new Date()).getTime();
                if (now !== date.getTime()) {
                    valid = "Must be today";
                }
            }

            return valid;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:DateField runat="server">
            <Validator Fn="myValidator" />
        </ext:DateField>
    </form>
</body>
</html>
  3. #3
    Aug 06, 2012, 1:44 PM
    Hi,
    I am calling it in the Listener like below:
    <Listeners>
<Click Fn="ValidateForm" />
</Listeners>
    This is my ValidateForm():
      var ValidateForm = function(){     
               if (#{FormPanelRunDetails}.getForm().isValid()) {         
                     if(CheckDateRange())
                       //perform other tasks
                      return false;
               }
    Your suggestion to validate the form field indivually is too much code. There are 10+ fields to validate. Currently I am just using the form's isValid method.

    Quote Originally Posted by Daniil View Post
    Hi,

    Where do you call the CheckDateRange function?

    I would suggest to use Validator.
    http://docs.sencha.com/ext-js/4-1/#!...-cfg-validator

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var myValidator = function (value, field) {
            var me = this,
                date = me.parseDate(value),
                now,
                valid = true;

            if (date) {
                now = Ext.Date.clearTime(new Date()).getTime();
                if (now !== date.getTime()) {
                    valid = "Must be today";
                }
            }

            return valid;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:DateField runat="server">
            <Validator Fn="myValidator" />
        </ext:DateField>
    </form>
</body>
</html>
  4. #4
    Aug 06, 2012, 5:41 PM
    Well, the markInvalid works well.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:NumberField ID="NumberField1" runat="server" />
        <ext:Button runat="server" Text="markInvalid">
            <Listeners>
                <Click Handler="App.NumberField1.markInvalid('Error');" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
    But please note that the markInvalid doesn't make a field really invalid. So, the effect causes by this method just can be lost after real field validation.
    I guess it happens on your side.

    So, I would still recommend to use the Validator.

    Your suggestion to validate the form field indivually is too much code.
    Do you mean adding 
    <Validator Fn="myValidator" />
    for each field?

    Well, it can be added in a bulk manner.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var myValidator = function (value) {
            var valid = true;

            if (value !== "Valid") {
                valid = "Only 'Valid' is valid";
            }

            return valid;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:FormPanel ID="FormPanel1" runat="server">
        <Items>
            <ext:TextField runat="server" />
            <ext:TextField runat="server" />
            <ext:TextField runat="server" />
        </Items>
        <Listeners>
            <AfterRender Handler="this.items.each(function (item) {
                                        item.validator = myValidator;
                                    });" />
        </Listeners>
    </ext:FormPanel>

    <ext:Button runat="server" Text="Validate">
        <Listeners>
            <Click Handler="App.FormPanel1.validate();" />
        </Listeners>
    </ext:Button>
</body>
</html>
  5. #5
    Aug 07, 2012, 12:27 PM
    Hi,
    Thank you very much for your help and the detailed explaination! They are very helpful!


    Quote Originally Posted by Daniil View Post
    Well, the markInvalid works well.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:NumberField ID="NumberField1" runat="server" />
        <ext:Button runat="server" Text="markInvalid">
            <Listeners>
                <Click Handler="App.NumberField1.markInvalid('Error');" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
    But please note that the markInvalid doesn't make a field really invalid. So, the effect causes by this method just can be lost after real field validation.
    I guess it happens on your side.

    So, I would still recommend to use the Validator.



    Do you mean adding 
    <Validator Fn="myValidator" />
    for each field?

    Well, it can be added in a bulk manner.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script type="text/javascript">
        var myValidator = function (value) {
            var valid = true;

            if (value !== "Valid") {
                valid = "Only 'Valid' is valid";
            }

            return valid;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:FormPanel ID="FormPanel1" runat="server">
        <Items>
            <ext:TextField runat="server" />
            <ext:TextField runat="server" />
            <ext:TextField runat="server" />
        </Items>
        <Listeners>
            <AfterRender Handler="this.items.each(function (item) {
                                        item.validator = myValidator;
                                    });" />
        </Listeners>
    </ext:FormPanel>

    <ext:Button runat="server" Text="Validate">
        <Listeners>
            <Click Handler="App.FormPanel1.validate();" />
        </Listeners>
    </ext:Button>
</body>
</html>

Similar Threads

  1. [CLOSED] Specified cast is not valid
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Oct 05, 2011, 8:56 AM
  2. [CLOSED] Request Failure Window - Status code: Status Text: Communication Failure - 8.2
    By JD in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Oct 04, 2011, 5:17 PM
  3. status text status code CUSTOM
    By threewonders in forum 1.x Help
    Replies: 0
    Last Post: Sep 26, 2011, 1:29 PM
  4. [1.0] ext:ScripManager not valid
    By walle in forum 1.x Help
    Replies: 2
    Last Post: Nov 08, 2010, 10:55 PM
  5. [CLOSED] Form status bar without valid icon
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 05, 2010, 4:40 PM

Posting Permissions