Form Abide

Namespace

using Blazor_Foundation_6.Components.Plugin.Abide;

Attributes

FormAbide

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
AutoManagedTrue/False. Blazor will auto manage Foundation Zurb’s Javascript.
DataOptionsCan include any option available. (See Plugin Options)
FormErrorMessageDefault Message when submit button click and error is found. (Default: Null)

FormInput

NameDescription
IdDefault html id=”” attribute.
ClassExtra/Custom Classes appended to the default class.
Typehtml input… color, text, date, file, image, password, radio, checkbox, reset, search, tel and url.
ValueInput’s Value
PlaceholderInput’s Placeholder
NameInput’s Name
Requiredhtml required input? True/False
Checkedif type is checkbox or radio, is it checked by default? True/False
StyleInput’s Style (See How to Use Style)
PatternHTML5 Pattern or Foundation Pattern.
LabelTextLabel Text, Either Before or After for Radio and Checkbox
RequiredErrorMessageIf required is true, what is the message when required validation fails.
PatternErrorMessageIf pattern defined and fails. What is the message?
HelpTextMessage under the input
DataEqualToIf data must be equal to another input, type id of the other input… very good for confirmation input.
FormErrorMessageInput’s validation or any error. What is the message?
Prefixif not radio or checkbox. Does input has a Prefix?

Examples

To see visual example, visit Foundation or Download and Run Blazor_Foundation_Test in Visual Studio.

<FormAbide Id="TESTFORMABIDE">
    <FormInput Type="text" Name="Username" Placeholder="Username" HelpText="Choose a username A-Z allowed!"
                Pattern="alpha" PatternErrorMessage="Characters only A-Z"
                Required="true" RequiredErrorMessage="Dude! you need a username..."></FormInput>

    <FormInput Type="password" Id="testformpassword" Name="password" HelpText="Choose a password"
                Required="true" RequiredErrorMessage="Dude! you need a password..."></FormInput>
    <FormInput Type="password" Required="true" Name="password_confirm" HelpText="Confirm your password"
                RequiredErrorMessage="Dude! you need a password..." DataEqualTo="testformpassword" FormErrorMessage="Password mismatch!"></FormInput>

    <FormInput Prefix="$" Type="text" Id="testformpassword" Name="donation" HelpText="What is you Donation?"
                Required="true" Pattern="number"></FormInput>
                        
    <p>Subscribe to Mailing</p>

    <FormInput Type="checkbox" Name="checkbox_1" LabelText="Marketing" Checked="true"></FormInput>
    <FormInput Type="checkbox" Name="checkbox_2" LabelText="News" Checked="true"></FormInput>

    <p>Would you like to be a super hero?</p>
    <FormInput Type="radio" Name="radio_test" LabelText="Yes" Value="Yes" Checked="true"></FormInput>
    <FormInput Type="radio" Name="radio_test" LabelText="No" Value="No"></FormInput>
    <p>Select your division</p>
    <select id="select" required>
        <option value=""></option>
        <option value="dc">DC Lengends</option>
        <option value="xmen">X-Men</option>
        <option value="avengers">Avengers</option>
        <option value="dcjustice">Justice League</option>
    </select>
    <button class="button" type="submit" value="Submit">Submit</button>
</FormAbide>

Share your feedback on github, we are looking to quickly improve this feature and we know there are a lot to add.