In this article I will explain with an example, how to implement Client Side TextBox validations without using Model in ASP.Net MVC Razor.
The Client Side validations will be performed using jQuery obtrusive validation library in ASP.Net MVC Razor.
 
 
Configuring Bundles and enabling Client Side validations
Please refer the following article for complete information on how to configure Bundles and enable Client Side validation in ASP.Net MVC project.
Using Bundles (ScriptBundle) in ASP.Net MVC Razor
Note: By default the validation done using Data Annotation attributes is Server Side. And hence to make it work Client Side, the Client Side validation must be enabled.
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling POST operation
This action method handles the POST operation when the form is submitted.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Submit()
    {
        return RedirectToAction("Index");
    }
}
 
 
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
Inside the View, the following Html.TextBox HTML Helper function is used for creating a TextBox without using Model.
There is also an HTML SPAN element for display validation error message and a Submit button which when clicked, the Form gets submitted.
The jQuery and the jQuery Validation script bundles are rendered at the end of the Model using the Scripts.Render function.
In order to use the jQuery obtrusive validation library, the following attributes must be assigned to the TextBox and the HTML SPAN.
TextBox
data_val – Set as True if validation needs to be performed.
data_val_required – The validation error message to be displayed.
 
SPAN
class – The CSS class name.
data-valmsg-for – ID of the element for which the validation error message needs to be displayed.
data-valmsg-replace – If set True, the contents will replaced with the data_val attribute value of the associated element.
@{
    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;
        }
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (@Html.BeginForm("Submit", "Home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>@Html.TextBox("Name", null, new { @data_val="true", @data_val_required="Name is required." })</td>
                <td><span class="field-validation-valid error" data-valmsg-for="Name" data-valmsg-replace="true"></span></td>
            </tr>
            <tr>
                <td><input type="submit" value="Submit"/></td>
                <td></td>
            </tr>
        </table>
    }
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
</html>
 
 
Screenshot
Client Side TextBox validations without using Model in ASP.Net MVC
 
 
Downloads
Download Code