Client-side validation checks form values in the browser before they reach the server. It can show an error immediately—and prevent an invalid form submission—so users can correct a field without waiting for a response. It is a convenience, not a security boundary: browser checks can be bypassed, so always validate submitted data on the server too. section 16.3.3 section 16.3.1
A Razor Pages form can get that feedback in two ways:
- Use an HTML5 input type such as email. Modern browsers can reject an incorrectly formatted address before submission, though constraint-validation support varies by browser. section 16.3.3
- Use JavaScript validation. DataAnnotations on a binding model give the Razor Input Tag Helper metadata for generating data-val-* attributes; jQuery Validation and unobtrusive validation scripts use those attributes to check the form. section 18.2.3 section 18.6
An email field
Decorate a C# email property with [EmailAddress], then write <input asp-for="Input.Email" /> in the Razor form. The Input Tag Helper generates an email-type input and validation attributes. With the validation scripts loaded, an invalid address can produce feedback before a request is sent. section 18.2.3 section 16.3.3
<input type="email" id="Input_Email" name="Input.Email" value="test@example.com" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." Data-val-required="The Email Address field is required." />
Compare the short asp-for markup with the generated input: its email type and data-val-* attributes provide the browser and JavaScript with validation information. section 18.2.3
Keep the server check even when the form appears to work entirely in the browser. In Razor Pages, validation runs after model binding, and the page handler still runs when validation fails; check ModelState.IsValid and respond accordingly. Built-in DataAnnotations commonly gain client-side support through generated markup, but a custom ValidationAttribute runs only on the server by default. Giving it a browser-side check requires additional wiring, such as a jQuery Validation adapter. section 16.3.1 section 16.5 section 32.3
