DEV Community

Cover image for HTML5 Validation in WebForms Core 2.1
Elanat Framework
Elanat Framework

Posted on

HTML5 Validation in WebForms Core 2.1

#html #validation #api #webformscore

WebForms Core 2.1 introduces improved control over HTML5 form validation messages.

HTML already provides a powerful built-in validation system. Attributes such as required, minlength, maxlength, min, max, pattern, and input types such as email, url, and number allow browsers to validate user input automatically.

However, the default validation messages are controlled by the browser and may vary between browsers and languages. This can make it difficult to provide a consistent validation experience, especially when an application needs custom messages or supports multiple languages.

WebForms Core 2.1 extends this model by allowing validation messages to be configured dynamically through WebFormsJS options.

Configuring Validation Messages

The following example changes the messages used for different HTML5 validation states:

using CodeBehind;

public partial class ValidityController : CodeBehindController
{
    public void PageLoad(HttpContext context)
    {
        WebForms form = new WebForms();

        form.ChangeOption("ValidityValueMissing", "لطفاً این فیلد را تکمیل کنید");
        form.ChangeOption("ValidityTypeMismatch", "لطفاً یک مقدار معتبر وارد کنید");
        form.ChangeOption("ValidityPatternMismatch", "لطفاً مقدار را با قالب صحیح وارد کنید");
        form.ChangeOption("ValidityTooLong", "لطفاً حداکثر {{maxLength}} کاراکتر وارد کنید (در حال حاضر {{valueLength}} کاراکتر وارد شده است).");
        form.ChangeOption("ValidityTooShort", "لطفاً حداقل {{minLength}} کاراکتر وارد کنید (در حال حاضر {{valueLength}} کاراکتر وارد شده است).");
        form.ChangeOption("ValidityRangeUnderflow", "مقدار باید بزرگ‌تر یا مساوی {{min}} باشد.");
        form.ChangeOption("ValidityRangeOverflow", "مقدار باید کوچک‌تر یا مساوی {{max}} باشد.");
        form.ChangeOption("ValidityStepMismatch", "مقدار واردشده با گام مجاز سازگار نیست");
        form.ChangeOption("ValidityBadInput", "لطفاً یک مقدار معتبر وارد کنید");
        form.ChangeOption("ValidityCustomError", "مقدار واردشده معتبر نیست");

        Write(form.ExportToHtmlComment());
    }
}
Enter fullscreen mode Exit fullscreen mode

The ChangeOption method allows WebForms Core to change WebFormsJS options dynamically.

This means validation behavior and messages do not necessarily need to be permanently configured in the JavaScript source. They can be configured through WebForms Action Controls and changed dynamically during application execution.

Supported Validation States

WebForms Core 2.1 provides configurable messages for the standard HTML5 validation states.

Value Missing

ValidityValueMissing is used when a required field has not been completed.

form.ChangeOption(
    "ValidityValueMissing",
    "لطفاً این فیلد را تکمیل کنید"
);
Enter fullscreen mode Exit fullscreen mode

For example:

<input type="text" name="name" required>
Enter fullscreen mode Exit fullscreen mode

If the user submits the form without entering a value, WebForms Core can display the configured message.

Type Mismatch

ValidityTypeMismatch is used when the entered value does not match the expected input type.

form.ChangeOption(
    "ValidityTypeMismatch",
    "لطفاً یک مقدار معتبر وارد کنید"
);
Enter fullscreen mode Exit fullscreen mode

For example:

<input type="email" name="email" required>
Enter fullscreen mode Exit fullscreen mode

or:

<input type="url" name="website">
Enter fullscreen mode Exit fullscreen mode

An invalid email address or URL can trigger this validation state.

Pattern Mismatch

ValidityPatternMismatch is used when a value does not match the pattern specified by the pattern attribute.

form.ChangeOption(
    "ValidityPatternMismatch",
    "لطفاً مقدار را با قالب صحیح وارد کنید"
);
Enter fullscreen mode Exit fullscreen mode

For example:

<input
    type="tel"
    name="phone"
    pattern="[0-9]{10,15}"
    placeholder="09123456789">
Enter fullscreen mode Exit fullscreen mode

A provided value must match the specified pattern to pass pattern validation.

Dynamic Validation Values

Some validation messages can contain dynamic placeholders.

For example:

form.ChangeOption(
    "ValidityTooShort",
    "لطفاً حداقل {{minLength}} کاراکتر وارد کنید (در حال حاضر {{valueLength}} کاراکتر وارد شده است)."
);
Enter fullscreen mode Exit fullscreen mode

The placeholders are replaced with the relevant validation values.

Minimum Length 

<input
    type="text"
    name="name"
    required
    minlength="3">
Enter fullscreen mode Exit fullscreen mode

If the entered value is shorter than the required minimum length, the message can use:

  • {{minLength}}
  • {{valueLength}}

to show both the required length and the current length.

For example, the resulting message could indicate that the field requires at least 3 characters while the user has entered fewer characters.

Maximum Length

The same approach can be used for maximum length validation:

form.ChangeOption(
    "ValidityTooLong",
    "لطفاً حداکثر {{maxLength}} کاراکتر وارد کنید (در حال حاضر {{valueLength}} کاراکتر وارد شده است)."
);
Enter fullscreen mode Exit fullscreen mode

The available placeholders allow validation messages to contain information directly related to the current input.

Numeric Range Validation

WebForms Core also supports custom messages for numeric range validation.

Range Underflow 

form.ChangeOption(
    "ValidityRangeUnderflow",
    "مقدار باید بزرگ‌تر یا مساوی {{min}} باشد."
);
Enter fullscreen mode Exit fullscreen mode

Range Overflow 

form.ChangeOption(
    "ValidityRangeOverflow",
    "مقدار باید کوچک‌تر یا مساوی {{max}} باشد."
);
Enter fullscreen mode Exit fullscreen mode

Consider the following input:

<input
    type="number"
    name="age"
    min="18"
    max="100"
    required>
Enter fullscreen mode Exit fullscreen mode

If the user enters a value below 18, the range-underflow message is used.

If the user enters a value above 100, the range-overflow message is used.

The {{min}} and {{max}} placeholders make it possible to create reusable validation messages without manually writing the allowed range for every field.

Step Mismatch

HTML5 inputs can also define allowed value increments using the step attribute.

WebForms Core 2.1 provides the following configurable message:

form.ChangeOption(
    "ValidityStepMismatch",
    "مقدار واردشده با گام مجاز سازگار نیست"
);
Enter fullscreen mode Exit fullscreen mode

This message is used when the entered value does not match the allowed step configuration.

Bad Input and Custom Errors

Two additional HTML5 validation states can also be configured:

form.ChangeOption(
    "ValidityBadInput",
    "لطفاً یک مقدار معتبر وارد کنید"
);

form.ChangeOption(
    "ValidityCustomError",
    "مقدار واردشده معتبر نیست"
);
Enter fullscreen mode Exit fullscreen mode

ValidityCustomError is used when a custom validation error has been set for an input.

A Complete HTML5 Validation Example

The following form uses several different HTML5 validation mechanisms:

<form>
    <h2>HTML5 Validation Test</h2>

    <label>
        Name:
        <input type="text" name="name" required minlength="3">
    </label>
    <br><br>

    <label>
        Email:
        <input type="email" name="email" required>
    </label>
    <br><br>

    <label>
        Password:
        <input type="password" name="password" required minlength="8">
    </label>
    <br><br>

    <label>
        Age:
        <input type="number" name="age" min="18" max="100" required>
    </label>
    <br><br>

    <label>
        Website:
        <input type="url" name="website" placeholder="https://example.com">
    </label>
    <br><br>

    <label>
        Phone:
        <input 
            type="tel" 
            name="phone" 
            pattern="[0-9]{10,15}"
            placeholder="09123456789">
    </label>
    <br><br>

    <label>
        Date:
        <input type="date" name="date" required>
    </label>
    <br><br>

    <label>
        Gender:
        <select name="gender" required>
            <option value="">-- Select --</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
    </label>
    <br><br>

    <label>
        Country:
        <select name="country">
            <option value="az">Azerbaijan</option>
            <option value="ir">Iran</option>
            <option value="tr">Turkey</option>
        </select>
    </label>
    <br><br>

    <label>
        <input type="checkbox" name="terms" required>
        I accept terms
    </label>
    <br><br>

    <label>
        Comment:
        <textarea name="comment" required minlength="10"></textarea>
    </label>
    <br><br>

    <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

This single form demonstrates multiple validation states:

  • Required text fields
  • Minimum-length validation
  • Email validation
  • Password validation
  • Numeric minimum and maximum ranges
  • URL validation
  • Pattern validation
  • Required date selection
  • Required <select> elements
  • Required checkboxes
  • Textarea validation

The important point is that the HTML itself continues to define the validation rules.

WebForms Core does not require developers to replace HTML5 validation attributes with a separate validation system. Instead, WebForms Core 2.1 works alongside the browser's native validation system and provides control over the messages presented to the user.

Dynamic Validation Configuration

Because validation messages are configured through ChangeOption, they can also be changed dynamically.

For example, an application could load different validation messages depending on:

  • The selected application language
  • The current user preferences
  • Different sections of an application
  • Runtime configuration

The configuration is not limited to a single hard-coded language.

WebForms form = new WebForms();

form.ChangeOption(
    "ValidityValueMissing",
    "Please complete this field"
);

form.ChangeOption(
    "ValidityTypeMismatch",
    "Please enter a valid value"
);

Write(form.ExportToHtmlComment());
Enter fullscreen mode Exit fullscreen mode

Another page or runtime operation could change those messages again.

This makes the validation system particularly useful for applications that need dynamic localization.

Combining Native HTML Validation with WebForms Core

One of the advantages of this approach is that validation rules remain close to the HTML elements that use them.

<input
    type="number"
    min="18"
    max="100"
    required>
Enter fullscreen mode Exit fullscreen mode

The HTML defines:

  • The type of value
  • The minimum value
  • The maximum value
  • Whether the field is required

WebForms Core then provides an additional layer for controlling how validation feedback is presented.

This creates a separation between:

Validation rules

required
minlength="3"
min="18"
max="100"
pattern="[0-9]{10,15}"
Enter fullscreen mode Exit fullscreen mode

and:

Validation messages

form.ChangeOption(...);
Enter fullscreen mode Exit fullscreen mode

The result is a flexible model where the browser continues to perform standard HTML5 validation while WebForms Core provides centralized and dynamically configurable validation messaging.

Validation in WebForms Core 2.1

WebForms Core HTML Validation

Validation customization is one of the improvements introduced in WebForms Core 2.1.

Developers can configure messages for standard HTML5 validation states through WebFormsJS options and modify those options dynamically through WebForms Action Controls.

This approach preserves the simplicity and standards of native HTML5 validation while adding another layer of control for applications that need custom messages, dynamic configuration, or localization.

Related links

On Elanat:

On GitHub:

Top comments (2)

Collapse
 
elijahbrown profile image
Elijah Brown •

Custom browser messages help a lot. I'd still re-check email and phone on the server: type=email only proves shape, and a domain with no MX or a Null MX still looks fine in the browser until a confirmation has nowhere to go.

Collapse
 
elanatframework profile image
Elanat Framework •

You are right. In general, browser-side validation is useful for immediate feedback, and it should not be treated as the authoritative validation.

For example, regardless of MX records, the email format should also be validated on the server rather than relying solely on browser-provided data.

So: Validation should always be performed on the server as well.

In the new WebForms Core 2.2, we added SetCustomValidity (the idea actually came to us while writing this article!). It allows server-side validation results to be applied directly to the browser's native Constraint Validation API.

For example:

Server Code:

form.SetCommentEvent("(name)", HtmlEvent.OnInput, "custom-validity");

form.StartIndex("custom-validity");
form.IsEqualTo("admin", Fetch.GetValue("$"));
form.SetCustomValidity("$", "The username cannot be \"admin\".");
form.Else();
form.SetCustomValidity("$", "");
Enter fullscreen mode Exit fullscreen mode

HTML:

<input type="text" name="name">
Enter fullscreen mode Exit fullscreen mode

Here, the validation logic runs on the server, while the resulting message is handled by the browser's native form validation.