PDA

View Full Version : [CLOSED] How to set a field status to not valid



Fahd
Aug 03, 2012, 8:59 PM
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;
}

Daniil
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/#!/api/Ext.form.field.Text-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>

Fahd
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.


Hi,

Where do you call the CheckDateRange function?

I would suggest to use Validator.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-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>

Daniil
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>

Fahd
Aug 07, 2012, 12:27 PM
Hi,
Thank you very much for your help and the detailed explaination! They are very helpful!



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>