{"id":1022,"date":"2018-07-15T15:19:44","date_gmt":"2018-07-15T12:19:44","guid":{"rendered":"http:\/\/enisnecipoglu.com\/?p=1022"},"modified":"2018-07-15T15:19:44","modified_gmt":"2018-07-15T12:19:44","slug":"xamarin-forms-ile-validation","status":"publish","type":"post","link":"https:\/\/enisnecipoglu.com\/en\/xamarin-forms-ile-validation\/","title":{"rendered":"Validation on Xamarin Forms"},"content":{"rendered":"

<\/p>\n

Projects with too much Inputs, can be difficult to validate you inputs. I’ll share easiy way to validate your inputs and it’ll make quick your job.<\/p>\n

\n

INSTALLATION <\/h1>\n

Firstly add Xamarin.Form.InputKit<\/strong> Nuget Package to your project.
\n\"Xamarin<\/p>\n

\nIf you want to display an alert icon in AdvancedEntry, you should add an 24dp icon which named as alert.png<\/strong>\n<\/p>\n

\n

USING<\/h1>\n

Generating View<\/h2>\n

\nJust create a registration form like below:
\n\"Xamarin
\n
\nBefore start to use controls from InputKit, you need to add an attribute inside ContentPage tag. Just add
\nxmlns:input=”clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit”<\/strong>
\nthen you’re ready to use controls.<\/p>\n

After that, XAML will be like:<\/p>\n

<?xml<\/span> version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?><\/span>
\n<ContentPage<\/span> xmlns<\/span>="http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span>
\n             xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span>
\n             xmlns:local<\/span>="clr-namespace:FormViewSample.InputKit"<\/span>
\n             xmlns:input<\/span>="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span>
\n             x:Class<\/span>="FormViewSample.InputKit.MainPage"<\/span>
\n             BackgroundColor<\/span>="WhiteSmoke"<\/span>><\/span>
\n
\n    <ContentPage.BindingContext><\/span><\/span>
\n        <local:MainViewModel<\/span>\/><\/span>
\n    <\/ContentPage.BindingContext><\/span><\/span>
\n    <ContentPage.Content><\/span><\/span>
\n        <StackLayout<\/span> Padding<\/span>="30"<\/span>><\/span>
\n            <Label<\/span> Text<\/span>="You can see FormView Below:"<\/span>\/><\/span>
\n            <BoxView<\/span> HeightRequest<\/span>="1"<\/span> Color<\/span>="LightGray"<\/span> \/><\/span>
\n            <input:FormView<\/span> IsValidated<\/span>="{Binding IsValidated}"<\/span>><\/span>
\n
\n                <input:AdvancedEntry<\/span>
\n                    Text<\/span>="{Binding Email}"<\/span>
\n                    IsRequired<\/span>="True"<\/span>
\n                    Title<\/span>="Place your email below:"<\/span>
\n                    Annotation<\/span>="Email"<\/span>
\n                    Placeholder<\/span>="sample@domain.com"<\/span>
\n                    AnnotationColor<\/span>="Accent"<\/span>
\n                    ValidationMessage<\/span>="Please type a valid email address"<\/span>
\n                    IconImage<\/span>="ic_email_black_24dp.png"<\/span>
\n                    MinLength<\/span>="10"<\/span>
\n                    MaxLength<\/span>="50"<\/span>
\n                    \/><\/span>
\n
\n                <input:AdvancedEntry<\/span>
\n                    Text<\/span>="{Binding NameSurname}"<\/span>
\n                    IsRequired<\/span>="True"<\/span>
\n                    Title<\/span>="Place your name below:"<\/span>
\n                    Annotation<\/span>="NameSurname"<\/span>
\n                    Placeholder<\/span>="John Doe"<\/span>
\n                    AnnotationColor<\/span>="Accent"<\/span>
\n                    ValidationMessage<\/span>="Please type your name correctly"<\/span>
\n                    IconImage<\/span>="ic_account_circle_black_24dp.png"<\/span>
\n                    MinLength<\/span>="5"<\/span>
\n                    MaxLength<\/span>="30"<\/span>
\n                    \/><\/span>
\n
\n                <input:AdvancedEntry<\/span>
\n                    Text<\/span>="{Binding Phone}"<\/span>
\n                    IsRequired<\/span>="True"<\/span>
\n                    Title<\/span>="Place your phone number below:"<\/span>
\n                    Annotation<\/span>="Phone"<\/span>
\n                    Placeholder<\/span>="5439998877"<\/span>
\n                    AnnotationColor<\/span>="Accent"<\/span>
\n                    ValidationMessage<\/span>="Please type your phone number correctly"<\/span>
\n                    IconImage<\/span>="ic_account_circle_black_24dp.png"<\/span>
\n                    MaxLength<\/span>="10"<\/span>
\n                    \/><\/span>
\n                    <Label<\/span> Text<\/span>="Choose your subscription type:"<\/span> \/><\/span>
\n                <input:RadioButtonGroupView<\/span> IsRequired<\/span>="True"<\/span>><\/span>
\n                    <input:RadioButton<\/span> Text<\/span>="Free"<\/span> \/><\/span>
\n                    <input:RadioButton<\/span> Text<\/span>="Bronze"<\/span> \/><\/span>
\n                    <input:RadioButton<\/span> Text<\/span>="Gold"<\/span> \/><\/span>
\n                    <input:RadioButton<\/span> Text<\/span>="Platinium"<\/span> \/><\/span>
\n                <\/input:RadioButtonGroupView><\/span><\/span>
\n
\n                <input:CheckBox<\/span> IsRequired<\/span>="True"<\/span> Type<\/span>="Check"<\/span> Text<\/span>="I Accept User Agreement"<\/span> \/><\/span>
\n                <Button<\/span> Command<\/span>="{Binding SubmitCommand}"<\/span> Margin<\/span>="0,20"<\/span> Text<\/span>="Submit"<\/span> BackgroundColor<\/span>="Accent"<\/span> CornerRadius<\/span>="20"<\/span> TextColor<\/span>="White"<\/span> \/><\/span>
\n            <\/input:FormView><\/span><\/span>
\n        <\/StackLayout><\/span><\/span>
\n    <\/ContentPage.Content><\/span><\/span>
\n<\/ContentPage><\/span><\/span><\/div><\/div>\n

Generating ViewModel<\/h2>\n

\nViewModel will be like. IsValidated<\/strong> proeprty will be set from FormView and you’ll check that property for know each input validated or not.<\/p>\n

using<\/span> System<\/span>;<\/span>
\nusing<\/span> System.Collections.Generic<\/span>;<\/span>
\nusing<\/span> System.ComponentModel<\/span>;<\/span>
\nusing<\/span> System.Runtime.CompilerServices<\/span>;<\/span>
\nusing<\/span> System.Text<\/span>;<\/span>
\nusing<\/span> Xamarin.Forms<\/span>;<\/span>
\n
\nnamespace<\/span> FormViewSample.<\/span>InputKit<\/span>
\n{<\/span>
\n    public<\/span> class<\/span> MainViewModel :<\/span> INotifyPropertyChanged
\n    {<\/span>
\n        private<\/span> string<\/span> _nameSurname;<\/span>
\n        private<\/span> string<\/span> _email;<\/span>
\n        private<\/span> string<\/span> _phone;<\/span>
\n
\n        public<\/span> MainViewModel(<\/span>)<\/span>
\n        {<\/span>
\n            SubmitCommand =<\/span> new<\/span> Command(<\/span>Submit)<\/span>;<\/span>
\n        }<\/span>
\n        public<\/span> Command SubmitCommand {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n        public<\/span> bool<\/span> IsValidated {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n        public<\/span> string<\/span> NameSurname {<\/span> get<\/span> =><\/span> _nameSurname;<\/span> set<\/span> {<\/span> _nameSurname =<\/span> value<\/span>;<\/span> OnPropertyChanged(<\/span>)<\/span>;<\/span> }<\/span> }<\/span>
\n        public<\/span> string<\/span> Email {<\/span> get<\/span> =><\/span> _email;<\/span> set<\/span> {<\/span> _email =<\/span> value<\/span>;<\/span> OnPropertyChanged(<\/span>)<\/span>;<\/span> }<\/span> }<\/span>
\n        public<\/span> string<\/span> Phone {<\/span> get<\/span> =><\/span> _phone;<\/span> set<\/span> {<\/span> _phone =<\/span> value<\/span>;<\/span> OnPropertyChanged(<\/span>)<\/span>;<\/span> }<\/span> }<\/span>
\n
\n        async<\/span> void<\/span> Submit(<\/span>)<\/span>
\n        {<\/span>
\n            if<\/span> (<\/span>!<\/span>IsValidated)<\/span>
\n            {<\/span>
\n                await<\/span> Application.<\/span>Current<\/span>.<\/span>MainPage<\/span>.<\/span>DisplayAlert<\/span>(<\/span>""<\/span>, "You must fill all areas correctly!"<\/span>, "OK"<\/span>)<\/span>;<\/span>
\n            }<\/span>
\n
\n            \/\/DO SOME STUFFS HERE<\/span>
\n        }<\/span>
\n
\n
\n        #region INotifyPropertyChanged Implementation<\/span>
\n        public<\/span> event<\/span> PropertyChangedEventHandler PropertyChanged;<\/span>
\n        public<\/span> void<\/span> OnPropertyChanged(<\/span>[<\/span>CallerMemberName]<\/span>string<\/span> propName =<\/span> ""<\/span>)<\/span> =><\/span> PropertyChanged?.<\/span>Invoke<\/span>(<\/span>this<\/span>, new<\/span> PropertyChangedEventArgs(<\/span>propName)<\/span>)<\/span>;<\/span>
\n        #endregion<\/span>
\n    }<\/span>
\n}<\/span><\/div><\/div>\n

\u015eimdi gidip XAML k\u0131sm\u0131ndan ViewModel’i kulland\u0131\u011f\u0131m\u0131z\u0131 belirltelim:<\/p>\n

<?xml<\/span> version<\/span>="1.0"<\/span> encoding<\/span>="utf-8"<\/span> ?><\/span><\/span>
\n<ContentPage<\/span> xmlns<\/span>="http:\/\/xamarin.com\/schemas\/2014\/forms"<\/span><\/span>
\n             xmlns:x<\/span>="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"<\/span><\/span>
\n             xmlns:local<\/span>="clr-namespace:FormViewSample.InputKit"<\/span><\/span>
\n             xmlns:input<\/span>="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"<\/span><\/span>
\n             x:Class<\/span>="FormViewSample.InputKit.MainPage"<\/span><\/span>
\n             BackgroundColor<\/span>="WhiteSmoke"<\/span>><\/span><\/span>
\n
\n    <ContentPage.BindingContext><\/span><\/span><\/span>
\n        <local:MainViewModel<\/span>\/><\/span><\/span>
\n    <\/ContentPage.BindingContext><\/span><\/span><\/span>
\n...
\n...
\n...<\/div><\/div>\n

\nYou can find sample project from here<\/a>.\n<\/p><\/blockquote>\n

<\/p>","protected":false},"excerpt":{"rendered":"Projects with too much Inputs, can be difficult to validate you inputs. I’ll share easiy way to validate your inputs and it’ll make quick your job. INSTALLATION Firstly add Xamarin.Form.InputKit Nuget Package to your project. If you want to display an alert icon in AdvancedEntry, you should add an 24dp icon which named as alert.png USING Generating View Just create a registration form like below: Before start to use controls from InputKit, you need to add an attribute inside ContentPage tag. Just add xmlns:input=”clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit” then you’re ready to use controls. After that, XAML will be like: <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http:\/\/xamarin.com\/schemas\/2014\/forms"              xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"              xmlns:local="clr-namespace:FormViewSample.InputKit"              xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"              x:Class="FormViewSample.InputKit.MainPage"              BackgroundColor="WhiteSmoke">     <ContentPage.BindingContext>         <local:MainViewModel\/>     <\/ContentPage.BindingContext>     <ContentPage.Content>         <StackLayout Padding="30">             <Label Text="You can see FormView Below:"\/>             <BoxView HeightRequest="1" Color="LightGray" \/>             <input:FormView IsValidated="{Binding IsValidated}">                 <input:AdvancedEntry                     Text="{Binding Email}"                     IsRequired="True"                     Title="Place your email below:"                     Annotation="Email"                     Placeholder="sample@domain.com"                     AnnotationColor="Accent"                     ValidationMessage="Please type a valid email address"                     IconImage="ic_email_black_24dp.png"                     MinLength="10"                     MaxLength="50"                     \/>                 <input:AdvancedEntry                     Text="{Binding NameSurname}"                     IsRequired="True"                     Title="Place your name below:"                     Annotation="NameSurname"                     Placeholder="John Doe"         ","protected":false},"author":1,"featured_media":1034,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20,15,6],"tags":[59,60,47,58,56,48,57,28,61,29],"_links":{"self":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/1022"}],"collection":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/comments?post=1022"}],"version-history":[{"count":9,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/1022\/revisions"}],"predecessor-version":[{"id":1033,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/posts\/1022\/revisions\/1033"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media\/1034"}],"wp:attachment":[{"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/media?parent=1022"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/categories?post=1022"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/enisnecipoglu.com\/en\/wp-json\/wp\/v2\/tags?post=1022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}