An Entry Control for .NET MAUI with added features, including a floating Placeholder and validation features.
It's use is straightforward, and can be fully defined in XAML. This corresponds to the above animation
<VerticalStackLayout
Spacing="25"
Padding="30,0"
VerticalOptions="Center">
[...]
<cc:ValidatableEntry
x:Name="EmailEntry"
FloatingPlaceholderErrorColor="Red"
FloatingPlaceholderNormalColor="Green"
ValidationMessageColor="Red"
ValidationMessageFontSize="10"
Placeholder="{x:Static res:AppRes.email_placeholder}">
<cc:ValidatableEntry.ValidationRules>
<cc:IsValidEmailRule ErrorMessage="{x:Static res:AppRes.email_error}"/>
</cc:ValidatableEntry.ValidationRules>
</cc:ValidatableEntry>
<cc:ValidatableEntry
x:Name="PasswordEntry"
FloatingPlaceholderErrorColor="Red"
FloatingPlaceholderNormalColor="Green"
ValidationMessageColor="Red"
ValidationMessageFontSize="10"
IsPassword="True"
ValidateOnTextChanged="True"
Placeholder="{x:Static res:AppRes.password_placeholder}">
<cc:ValidatableEntry.ValidationRules>
<cc:MinLengthRule MinLength="5"
ErrorMessage="{x:Static res:AppRes.password_length_error}"
/>
<cc:RegexRule RegexRuleStr="[a-z]"
ErrorMessage="{x:Static res:AppRes.password_contains_lowercase_error}"
/>
<cc:RegexRule RegexRuleStr="[A-Z]"
ErrorMessage="{x:Static res:AppRes.password_contains_upercase_error}"
/>
<cc:RegexRule RegexRuleStr="[0-9]"
ErrorMessage="{x:Static res:AppRes.password_contains_digit_error}"
/>
<cc:RegexRule ErrorMessage="{x:Static res:AppRes.password_contains_symbol_error}"
>
<cc:RegexRule.RegexRuleStr>[$-/:-?{-~#!"^_`\[\]]</cc:RegexRule.RegexRuleStr>
</cc:RegexRule>
</cc:ValidatableEntry.ValidationRules>
</cc:ValidatableEntry>
[...]
</VerticalStackLayout>
It is made up of the following parts:
- The Entry itself
- The FloatingPlaceholder. It is only visible when the Entry is not empty.
- The ValidationMessage: When a rule is not met, an Error Message will be displayed here. Only one message will be displayed at a time.
There are a few predefined validation rules, such as MinLengthLRule, MaxLengthRule or IsValidEmailRule. For broader cases, a RegexRule validation type exists, where a pattern that satisfies the rule can be provided. Additionaly, a custom rule can also be created by implementing the IValidationRule interface.
public interface IValidationRule
{
bool Validate(string text);
string ErrorMessage { get; set; }
}
All validation rules must implement this interface. It consists of a Validate method and a ErrorMessage string. The Message will be displayed as a Validation Message when the Validate method returns False.
This rules has the property MinLength. If the entered string's length is above this threshold, the rule is satisfied. Example:
This rules has the property MaxLength. If the entered string's length is below this threshold, the rule is satisfied.
This rule is satisfied if the input string is a valid URL.
The rule is satisfied if the input string is a valid Email address
This rule has the RegexRuleStr property. This string should be a valid Regex pattern, otherwise an exception will occur. The input string is matched against this rule, using the IsMatch method of System.Text.ReularExpressions. If the match is satisfied, the rule is satisfied.
Often, it can be useful to limit the characters the user is allowed to enter to a limited set. The AlloweCharctersSet property allows just that. Simply enter into this string all the characters that should be allowed. If this string is empty, no restrction is applied.
AllowedCharactersSet = "0123456789"
AllowedCharactersSet = "0123456789.,"
AllowedCharactersSet = "qwertyuiopasdfghjklzxcvbnm"
AllowedCharactersSet = ""
An Ordinary MAUI Entry that is the basis for this control.
A Label that appears on top of the Entry, when the contents of Entry are not empty. The text in this label is always the same as Entry's placeholder value.
A Label that appears below Entry when a validation is not passed. It shows the content of that Validation's ErrorMessage.
This value is true if the Validations on the ValidatableEntry have never been run. It is a readonly value.
The FontSize Property of Entry.
FontFamily Property of Entry, FloatingPlaceholder and ValidationMessage.
PlaceholderColor property of Entry
FontSize property of FloatingPlaceholder.
FontColor property of FloatingPlaceholder, when the validation is successfull.
FontColor property of FloatingPlaceholder, when the validation is not successfull.
FontColor property ValidationMessage
FontSize property of ValidationMessage
IsPassword property of Entry
Defines both the Placeholder property of Entry and the Text property of FloatingPlaceholder.
The Text property of ValidationMessage. This property is normally not interacted width.
The Text property of Entry
The list of validations that apply to this ValidatableEntry. The Validate method in each will be run, in order, when the RunValidations method is executed, until one of them fails.
It is false by default. Becomes true after the RunValidations method is run and all validations are satisfied.
If true, the RunValidations method is run after every character change in Entry.
If true, the RunValidations method is run after Entry looses focus.
Iterates through the list ValidationRules, running their Validate method using the Entry's content as the input parameter If one of the validations fails (returns false), ValidationError's Text property is set to the validation's ErrorMessage. And the method returns.
This event fires when the status of IsValid changes. It carries a bool parameter which indicates the new value.