How to turn on client-side validation for dynamic forms in. Net Core MVC

In non-core, please refer to:

Validation of MVC Jquery.validate.unobtrusive

MVC Validation Jquery.unobtrusive-ajax

Reference to add validation to a dynamic form

Page introduction to the relevant JS:

<Scriptsrc= "~/lib/jquery/dist/jquery.js"></Script><Scriptsrc= "~/lib/jquery-validation/dist/jquery.validate.js"></Script><Scriptsrc= "~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></Script><Scriptsrc= "~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.js"></Script>

Add client-side validation to a dynamic form

Addinfo.cshtml content is as follows:

@model basicframework.service.implementation.company_addinforq@{Layout = "~/views/shared/_layoutmodal.cshtml" ;} @section modalname{@l["Add Info"]}<formasp-action= "Addinfo"Data-ajax= "true"Data-ajax-mode= "Replace"data-ajax-update= "#Modal"data-ajax-success= "Reloadmodal"Data-ajax-method= "Post"class= "Form-horizontal">    <Divclass= "Toolbar">@Html. Action ("Index", "Toolbar")</Div>    <Divasp-validation-summary= "@ValidationSummary. All"style= "Color:red"ID= "Validation_day"class= "Form-group">        <spanstyle= "Color:blue">This is my message</span>    </Div>    <Divclass= "Form-group">        <labelasp-for= "Code"class= "Control-label col-md-2"></label>        <Divclass= "Col-md-10">            <inputasp-for= "Code"class= "Form-control Required" />            <spanasp-validation-for= "Code"style= "Color:red"></span>        </Div>    </Div>    <Divclass= "Form-group">        <labelasp-for= "Name"class= "Control-label col-md-2"style= "Color:blue"></label>        <Divclass= "Col-md-10">            <inputasp-for= "Name"class= "Form-control" />            <spanasp-validation-for= "Name"style= "Color:red"></span>        </Div>    </Div>    <Divclass= "Modal-footer">        <inputtype= "Submit"value= "Create"class= "Btn btn-primary" />    </Div></form>

View Code

Index.cshtml calling page code:

    functionAdd () {$.get ({URL:"/company/addinfo", DataType:"HTML", Error:function(JQXHR, Textstatus, Errorthrown) {alert (Textstatus+ ": Couldn ' t add form." +Errorthrown); }, Success:function(R) {$ ("#Modal"). HTML (R); //$ ("#Modal"). Find (". Modal-dialog"). AddClass ("Modal-full");                varForm = $ ("#Modal form"); //Form.removedata ("validator");/* Added by the raw jquery.validate plugin */                //form.removedata ("unobtrusivevalidation"); /* Added by the jquery unobtrusive plugin*/;$.validator.unobtrusive.parse (form); $("#Modal"). modal ();    }        }); }

View Code

$.validator.unobtrusive.parse()The method uses the JQuery selector as one of its parameters. This method indicates that jQuery non-intrusive validation parses the properties of the form within the selector data- . The values of these properties are then passed to the JQuery Validate plug-in so that the form exhibits the required client validation rules.

to add client-side validation to a dynamic control

You can also <input/> <select/> Update validation rules on a form when you dynamically generate individual controls, such as and. selectors that are used for these elements cannot be passed directly to the parse() method, because the surrounding forms are parsed and are not updated. you should delete the existing validation data and then re-parse the entire form as follows:

$.get ({URL:"Https://url/that/returns/a/control", DataType:"HTML", Error:function(JQXHR, Textstatus, Errorthrown) {alert (Textstatus+ ": Couldn ' t add control." +Errorthrown); }, Success:function(newinputhtml) {varform = document.getElementById ("My-form"); Form.insertadjacenthtml ("BeforeEnd", newinputhtml); $ (form). Removedata ("Validator")//Added by JQuery Validate. Removedata ("Unobtrusivevalidation");//Added by JQuery unobtrusive Validation$.validator.unobtrusive.parse (form); }})

View Code

How to turn on client-side validation for dynamic forms in. Net Core MVC