Using knockout Practice 07 in ASP., customizing the location and content of validation information

In the first two articles, we experienced basic validation and custom validation of knockout. This article customizes the display location and content of the verification information.

Customize where validation information is displayed

Typically, the validation information for knockout immediately follows input, and the Validationmessage property allows you to customize the display location of the validation information.

@{
    Viewbag.title = "Index";
    Layout = "~/views/shared/_layout.cshtml";
}
<style type= "text/css" >
    . Error {
        
    }
</style>
<div>
    <input type= "text" data-bind= "value:name"/>
    class= "error" data-bind= "validationmessage:name" ></p>
</div>
@section scripts
{
    <script src= "~/scripts/knockout-3.2.0.js" ></script>
    <script src= "~/scripts/knockout.validation.js" ></script>
    <script src= "~/scripts/zh-cn.js" ></script>
    <script type= "text/javascript" >
        
        Create a view Model using the constructor function
        var Product = function () {
            this. Name = Ko.observable (). Extend ({minlength:3});
        };
     
        Create an instance
        New Product ();
        Verify Settings
        var knockoutvalidationsettings = {
            false,
            false,
            Errormessageclass: ' Error ',
            Errorelementclass: ' Error ',
            Errorclass: ' Error ',
            true,
            false,
            true,
            true,
            True
        };
        true);
       
        Binding
        Ko.applybindings (product);
       
        $ (function () {
            false;
        });
    </script>
}

Above
The validation information is displayed on input with the Data-bind attribute value of Validationmessage:name
The knockout-validation must be re-initialized with Ko.validation.init () because it is reset
Insertmessages indicates whether to display the verification information in the location immediately following input
Decorateelement indicates if you want to add class= "error" to input

Customizing the content of validation information

If you want to rewrite the contents of the validation information, modify the following:

        var Product = function () {
             This params: 3, message: " I say minimum length is 3"});
        };

Using knockout Practice 07 in ASP., customizing the location and content of the validation information