In this article I will explain with an example, how to validate HTML Form using jQuery Validation plugin in ASP.Net Core Razor Pages.
This article makes use of jQuery ValidationEngine plugin for performing validation.
jQuery ValidationEngine plugin will perform validation for various Form fields like TextBox, DropDownList, etc. and the type of validations involved would be Required, Email, Password confirmation, Minimum and Maximum Length, Telephone number, Mobile Cell number, Date Format such as dd/MM/yyyy dates.
 
 
Download jQuery ValidationEngine Plugin
You can download the jQuery ValidationEngine plugin using the link below.
Download jQuery ValidationEngine Plugin
 
 
Razor PageModel (Code-Behind)
The PageModel consists of following two Handler methods.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
 
Handler method for handling POST operation
This Handler method handles the POST calls, for this particular example it is not required and hence left empty.
public class IndexModel : PageModel
{
    public void OnGet()
    {       
    }
 
    public void OnPostSubmit()
    {
    }
}
 
 
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Form which has been created using following ASP.Net Tag Helpers attribute.
method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
The Form consists of some INPUT TextBoxes, a HTML DropDownList and a Submit button.
The TextBoxes and DropDownList to be validated have been set with the class property. This particular class will be used by jQuery ValidationEngine plugin for validation.
The Submit button has been set with the POST Handler method using the asp-page-handler attribute.
Note: In the Razor PageModel, the Handler method name is OnPostSubmit but here it will be specified as Submit when calling from the Razor HTML Page.
 
Explanation:
Basic Required Validation
For Required validation, the class property is set as validate[required] for the TextBox or DropDownList controls.
Note: For the DropDownList control it is necessary that the value for the first or default item is set to blank.
 
Email Address Validation
For validating a TextBox that will accept email address as input, the class property is set as validate[required,custom[email]].
This ensures that the TextBox will contains data and then perform email address validation.
 
Confirm Password Validation
In order to validate Confirm Password, the class property is set as validate[required,equals[txtPassword]].
The validation makes sure that the second TextBox must contain value and the value must be equal to the TextBox whose ID has been specified along with the equals class.
 
Integer, Numbers (Numeric), Minimum Length, Maximum Length and Phone Validation
jQuery ValidationEngine plugin also provides validation for numbers i.e. numeric data and also the data length must have some minimum and maximum characters.
In order to validate this, the custom, maxSize and minSize need to be specified.
 
Date Format Validation (dd/MM/yyyy)
jQuery ValidationEngine plugin validates ISO Date format i.e. yyyy-mm-dd.
In order to validate Date with dd/MM/yyyy format, this plugin has provision to add custom validation scripts.
 
Implementing the jQuery ValidationEngine Plugin
First, you need to inherit the jQuery library and jQuery ValidationEngine plugin Scripts and the CSS files on the Razor Page.
Then inside the jQuery document ready event handler, the jQuery ValidationEngine plugin is applied to the Form.
There is a JavaScript function DateFormat which validates Date with dd/MM/yyyy format and it accepts 4 parameters field, rules, i and options.
Finally, a string message is returned from the DateFormat JavaScript function when validation fails.
@page
@model jQuery_FormValidation_Razor_Core.Pages.IndexModel
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        input, select { width: 150px; }
    </style>
</head>
<body>
    <form method="post" id="form1">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td></td>
                <td>Please fill the following Form</td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Name:</td>
                <td><input type="text" id="txtName" class="validate[required]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Email:</td>
                <td><input type="text" id="txtEmail" class="validate[required,custom[email]]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>City:</td>
                <td>
                    <select id="ddlCities" class="validate[required]">
                        <option value="">Please Select</option>
                        <option value="1">Mumbai</option>
                        <option value="2">Delhi</option>
                        <option value="3">Kolkatta</option>
                        <option value="4">Chennai</option>
                    </select>
                </td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" id="txtPassword" class="validate[required]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Confirm Password:</td>
                <td><input type="password" id="txtConfirmPassword" class="validate[required,equals[txtPassword]]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Mobile Phone Number:</td>
                <td><input type="text" id="txtPhoneNumber" class="validate[required,custom[integer],maxSize[10],minSize[10]]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td>Birth Date (dd/MM/yyyy):</td>
                <td><input type="text" id="txtBirthDate" class="validate[required,funcCall[DateFormat[]]" /></td>
            </tr>
            <tr><td style="height: 40px"></td></tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" asp-page-handler="Submit" /></td>
            </tr>
        </table>
    </form>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-en.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#form1").validationEngine('attach', { promptPosition: "topRight" });
        });
 
        function DateFormat(field, rules, i, options) {
            var regex = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
            if (!regex.test(field.val())) {
                return "Please enter date in dd/MM/yyyy format."
            }
        }
    </script>
</body>
</html>
 
 
Screenshot
ASP.Net Core Razor Pages: Validate Form using jQuery Validation Plugin
 
 
Downloads
Download Code