Ciao a tutti
Sto utilizzando Metronic e la validazione di jquery presente in Metronic.
Utilizzo la versione 3.6.2. Ho questa codice:
codice:<!DOCTYPE html> <!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]--> <!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]--> <!--[if !IE]><!--> <html lang="it" class="no-js" xmlns="http://www.w3.org/1999/xhtml"> <!--<![endif]--> <!-- BEGIN HEAD --> <head runat="server"> <meta charset="utf-8" /> <title>Scuolaecorsi</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="" name="description" /> <meta content="" name="author" /> <!-- BEGIN GLOBAL MANDATORY STYLES --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> <link href="/Metronic/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <link href="/Metronic/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="/Metronic/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css" /> <link href="/Metronic/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet" /> <link href="/Metronic/admin/layout/css/style.css" rel="stylesheet" /> <link href="/Metronic/css/components.css" rel="stylesheet" type="text/css" /> <!-- END GLOBAL MANDATORY STYLES --> <!-- BEGIN PAGE STYLES --> <link href="/Metronic/admin/pages/css/tasks.css" rel="stylesheet" type="text/css" /> <!-- END PAGE STYLES --> <!-- BEGIN THEME STYLES --> <link href="/Metronic/admin/layout/css/custom.css" rel="stylesheet" /> <link href="/Metronic/css/components.css" id="style_components" rel="stylesheet" type="text/css" /> <link href="/Metronic/css/plugins.css" rel="stylesheet" type="text/css" /> <link href="/Metronic/admin/layout/css/layout.css" rel="stylesheet" /> <link href="/Metronic/admin/layout/css/themes/grey.css" rel="stylesheet" type="text/css" id="style_color" /> <!-- END THEME STYLES --> <!-- BEGIN PAGE LEVEL STYLES --> <link rel="stylesheet" href="/Metronic/plugins/select2/select2.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="/Metronic/plugins/bootstrap-fileinput/bootstrap-fileinput.css" /> <link rel="stylesheet" type="text/css" href="/Metronic/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.css" /> <link rel="stylesheet" type="text/css" href="/Metronic/plugins/bootstrap-datepicker/css/datepicker.css" /> <!-- END PAGE LEVEL STYLES --> </head> <!-- END HEAD --> <!-- BEGIN BODY --> <body class="page-header-fixed page-quick-sidebar-over-content "> <form id="frmMaster" method="post" runat="server" enctype="multipart/form-data" class="form-data"> <asp:LinkButton ID="btnSalva" CssClass="btn green" OnClick="Salva" runat="server"> <i class="fa fa-check"></i>  Salva </asp:LinkButton> <div id="dvError" class="alert alert-danger display-hide"> <button class="close" data-close="alert"></button> <i class="fa fa-exclamation-circle"></i> <span></span> </div> <!--BEGIN TABS--> <div class="tabbable tabbable-custom tabbable-full-width"> <ul class="nav nav-tabs"> <li class="active"> <a href="#tab_1_1" data-toggle="tab"><i class="fa fa-cogs"></i> Anagrafica</a> </li> </ul> <div class="tab-content"> <!--tab_1_1--> <div class="tab-pane active" id="tab_1_1"> <div class="portlet box"> <div class="portlet-body form"> <!-- BEGIN FORM--> <div class="form-horizontal form-bordered" action="#"> <div class="form-group"> <label class="col-sm-3 control-label">Denominazione centro*</label> <div class="col-sm-9"> <asp:TextBox ID="txtDenominazione" CssClass="form-control denominazione" runat="server" TextMode="SingleLine"></asp:TextBox> </div> </div> </div> <!-- END FORM--> </div> </div> </div> </div> </div> <!--END TABS--> </form> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN CORE PLUGINS --> <!--[if lt IE 9]> <script src="/Metronic/plugins/respond.min.js"></script> <script src="/Metronic/plugins/excanvas.min.js"></script> <![endif]--> <script src="/Metronic/plugins/jquery.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery-migrate.min.js" type="text/javascript"></script> <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip --> <script src="/Metronic/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery.blockui.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery.cokie.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script> <!-- END CORE PLUGINS --> <!-- BEGIN JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) --> <!-- BEGIN PAGE LEVEL PLUGINS --> <script src="/Metronic/plugins/jquery-validation/js/jquery.validate.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery-validation/js/localization/messages_it.js" type="text/javascript"></script> <script src="/Metronic/plugins/jquery-validation/js/additional-methods.min.js" type="text/javascript"></script> <script src="/Metronic/plugins/select2/select2.min.js" type="text/javascript"></script> <script type="text/javascript" src="/Metronic/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script> <script type="text/javascript" src="/Metronic/plugins/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script> <script type="text/javascript" src="/Metronic/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script> <script type="text/javascript" src="/Metronic/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> <script type="text/javascript" src="/Metronic/plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.it.js"></script> <!-- END PAGE LEVEL PLUGINS --> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="../../Js/centro.js"></script> <!-- END PAGE LEVEL SCRIPTS --> <!-- BEGIN PAGE LEVEL SCRIPTS --> <script src="/Metronic/scripts/metronic.js" type="text/javascript"></script> <script src="/Metronic/admin/layout/scripts/layout.js" type="text/javascript"></script> <!-- END PAGE LEVEL SCRIPTS --> <!-- END JAVASCRIPTS --> <script> jQuery(document).ready(function () { Metronic.init(); // init metronic core components Layout.init(); // init current layout Centro.init(); }); </script> </body> <!-- END BODY --> </html>Quando clicco su 'Salva' ricevo un errore del tipo: 'oggetto non riconosciuto: span.help-block.help-block-errorcodice:var Centro = function () { var submitted = true; var handleCentro = function () { $('.form-data').validate({ errorElement: 'span', //default input error message container errorClass: 'help-block help-block-error ', // default input error message class focusInvalid: false, // do not focus the last invalid input ignore: "", rules: { }, messages: { }, showErrors: function (errorMap, errorList) { if (submitted) { var summary = ""; $.each(errorList, function () { summary += " * " + this.message + "<br />"; }); $('#dvError', $('.form-data')).find('span').html(summary); submitted = false; } this.defaultShowErrors(); }, invalidHandler: function (event, validator) { //display error alert on form submit $('#dvError', $('.form-data')).show(); submitted = true; }, highlight: function (element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group }, success: function (label) { label.closest('.form-group').removeClass('has-error'); label.remove(); }, errorPlacement: function (error, element) { //error.insertAfter(element); //error.insertAfter(element.closest('.input-group')) }, submitHandler: function (form) { form.submit(); } }); $('.denominazione').rules('add', { required: true, messages: { required: 'Denominazione campo obbligatorio' } }); $('[id$="btnSalva"]').click(function () { Metronic.blockUI({ boxed: true }); $('#dvError', $('.form-data')).find('span').html(''); $('#dvError', $('.form-data')).hide(); var result = $('.form-data').valid(); result &= checkDati(); if (result == 0) Metronic.unblockUI(); return (result == 0 ? false : true); }) function checkDati() { var errore = false; var msgError = ''; if (errore) { $('#dvError', $('.form-data')).show(); $('#dvError', $('.form-data')).find('span').append(msgError); } return !errore; } } return { //main function to initiate the module init: function () { handleCentro(); } }; }();
Ho controllato il codice di esempio e sembra uguale. Non capisco dove sbaglio.
Prima utilizzavo un'altra versione di Metronic e non avevo nessun problema.
Grazie mille
Rispondi quotando