The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Form and field validation

  1. #1

    Form and field validation

    Do you have any examples of how validation can be done in Mobile? I cannot find properties like AllowBlank and such. Is there a simple way?
  2. #2
    Hello @sveins12!

    Fact is that no, there is no validation like we have with Ext.NET. At least for now, it has to be handled by the developer, with change events client or server-side, and applying CSS for visual feedback.

    Here's a suggestion or starting point you could use for the validation part's visual feedback. As for functional feedback, you can just bind an valid=true field to the item object during the event (that will go straight to the App.DateField1.valid) that you could check before submitting, for example. Or just disable the submit/save button when any field is set to invalid.

    @using Ext.Net.Mobile;
    @using Ext.Net.Mobile.MVC;
    @{
        Layout = null;
        var x = Html.X();
    }
    <!DOCTYPE html>
    <html>
    <head>
        <title>Test DatePickerField</title>
        <style type="text/css">
            .invalid {
                color: #ffaaaa;
                font-weight: bold
            }
        </style>
    </head>
    <body>
        @Html.X().ResourceManager()
        @(x.FieldSet()
            .ID("FieldSet1")
            .FullScreen(true)
            .Items(
                x.DatePickerField()
                    .ID("DateField1")
                    .Label("Date")
                    .DestroyPickerOnHide(true)
                    .DateFormat("d.m.Y")
                    .Name("date")
                    .Picker(
                        x.DatePicker()
                            .YearFrom(1990)
                            .DateValue(new DateTime(2016, 6, 24))
                    )
                    .Listeners(l => l.Change.Handler = MvcUtils.StringifyScriptBlock(@<text>
                        <script type="text/javascript">
                            var fullYear = newDate.getFullYear(),
                                fieldSet = item.up('fieldset');
    
                            if (fullYear <= 2016) {
                                var message = "Year must be greater than 2016!";
                                if (fieldSet) {
                                    fieldSet.setInstructions({
                                        title: message,
                                        baseCls: "x-form-fieldset-instructions invalid"
                                    });
                                } else {
                                    X.Msg.alert('Field validation error', message);
                                }
    
                                item.setLabelCls('invalid')
                            } else {
                                item.setLabelCls()
    
                                if (fieldSet) {
                                    fieldSet.setInstructions();
                                }
                            }
                        </script>
                    </text>))
            )
        )
    </body>
    </html>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @sveins12!

    Been some time since we replied you here, still no feedback. Did the reply meet your expectations, was it helpful? Do you still need help on this issue? Please notice we may mark this thread as closed if you still don't post a follow-up in 7+ days from now, but that won't prevent you from posting here when you have time.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 6
    Last Post: Jul 25, 2016, 11:22 PM
  2. [CLOSED] Validation form
    By SuperBolt in forum 3.x Premium Help
    Replies: 2
    Last Post: Apr 27, 2016, 11:16 AM
  3. [CLOSED] Form validation including form on user control
    By jbarbeau in forum 2.x Premium Help
    Replies: 5
    Last Post: Sep 22, 2014, 1:42 PM
  4. Replies: 2
    Last Post: Aug 19, 2011, 2:36 PM
  5. Login form - validation form
    By LordMX in forum 1.x Help
    Replies: 0
    Last Post: Aug 14, 2011, 12:44 PM

Posting Permissions

Subscribe now to get the latest Ext.NET happenings in our newsletter.