Jquery validationengine in asp.net Updatepanel -
i have asp.net webforms site i'm using jquery validation engine (source) validate controls. i'm using bootstrap style controls.
it's working fine, bootstrap select boxes have given me trouble. when placed in updatepanel, bootstrap select box lose it's style during partial postbacks. had rebind select style adding script:
function pageload() { $('.select').unbind(); $('.select').selectpicker(); } this maintains style , working great. i've noticed jquery validationengine no longer working when placed in updatepanel. partial postback stripping out too? odd thing have other updatepanels on same page, , if 1 of other fields isn't valid first, , select bootstrap select box, maintains it's validationstyle. guess because first error in other panel restricting control posting , losing style?
here code. bottom updatepanel 1 contains select box in question.
<asp:updatepanel id="updatepanel2" runat="server"> <contenttemplate> <label class="col-md-4 col-xs-5 control-label">first name</label> <div class="col-md-8 col-xs-7"> <asp:requiredfieldvalidator id="txtfirstnamerequiredfieldvalidator" runat="server" controltovalidate="txtfirstname" text="this field required" display="none" cssclass="label label-danger label-form" validationgroup="mainvalidationgroup" /> <asp:regularexpressionvalidator id="txtfirstnameregexp" runat="server" controltovalidate="txtfirstname" text="maximum 50 characters" validationexpression="^.{0,50}$" display="none" cssclass="label label-danger label-form" validationgroup="mainvalidationgroup" /> <div class="input-group"> <span class="input-group-addon"><span class="fa fa-pencil"></span></span> <asp:textbox id="txtfirstname" runat="server" cssclass="form-control validate[required,maxsize[50]]" autopostback="true" ontextchanged="txtfirstname_textchanged"/> </div> </div> </contenttemplate> <triggers> <asp:asyncpostbacktrigger controlid ="txtfirstname" eventname ="textchanged" /> </triggers> </asp:updatepanel> <asp:updatepanel id="updatepanel1" runat="server"> <contenttemplate> <label class="col-md-4 col-xs-5 control-label">status</label> <div class="col-md-8 col-xs-7"> <asp:requiredfieldvalidator id="ddlstatusrequiredfieldvalidator" runat="server" controltovalidate="ddlstatus" text="this field required" display="none" cssclass="label label-danger label-form" validationgroup="mainvalidationgroup" /> <asp:dropdownlist id="ddlstatus" runat="server" cssclass="form-control select show-tick validate[required]" autopostback="true" onselectedindexchanged="ddlstatus_selectedindexchanged" onchange="$(this).validationengine('validate');"/> </div> </contenttemplate> <triggers> <asp:asyncpostbacktrigger controlid ="ddlstatus" eventname ="selectedindexchanged" /> </triggers> </asp:updatepanel> what need change, or add make sure jquery validationengine stays active on bootstrap select after updatepanel postback, in same way textboxes?
please make sure validator typically instantiated call in following format, plugin can instanciated on form elements:
$("#form1").validationengine(); i hope validating form on button click , button stay inside update panel.
i had test code in machine , working great combination of bootstrap validation-engine.
add below script before completion of body tag </body>. please remember "updatepanel1" id of update-panel submit button reside.
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-validation-engine/2.6.4/validationengine.jquery.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.ucb.org.br/scripts/formvalidator/js/languages/jquery.validationengine-en.js" charset="utf-8"></script> <script type="text/javascript" src="http://cdn.ucb.org.br/scripts/formvalidator/js/jquery.validationengine.js" charset="utf-8"></script> <script type="text/javascript"> var prm = sys.webforms.pagerequestmanager.getinstance(); if (prm != null) { prm.add_initializerequest(function (sender, e) { if (sender._postbacksettings.panelstoupdate.join().indexof("updatepanel1") != -1) { if (!$("[id*=updatepanel1]").validationengine('validate')) { e.set_cancel(true); } } if (sender._postbacksettings.panelstoupdate.join().indexof("updatepanel2") != -1) { if (!$("[id*=updatepanel2]").validationengine('validate')) { e.set_cancel(true); } } }); }; </script> here find demo , source code of validating controls using jquery validation-engine update panel.
please let me know if have questions.
Comments
Post a Comment