1

我正在使用带有 jQ​​uery 步骤的 HTML 辅助表单的 MVC 视图。并且,致力于验证。但是工具提示器总是因初始化而失败。已经把所有的帖子都看完了。但不知何故不起作用。我的代码片段如下

脚本:

<script src="~/Scripts/tooltipster/jquery.tooltipster.js"></script>
<script src="~/Scripts/tooltipster/jquery.tooltipster.min.js"></script>
<link href="~/Scripts/tooltipster/tooltipster.css" rel="stylesheet" />
<script>

    function resizeJquerySteps() {
        if ($('.body.current').outerHeight() > $('.wizard .steps').outerHeight()) {
            $('.wizard .content').animate({ height: $('.body.current').outerHeight() }, "slow");
        } else {
            $('.wizard .content').animate({ height: $('.wizard .steps').outerHeight() }, "slow");
        }
    }
    $(document).ready(function () {

        var form = $("#RequestStepsForm");

        form.tooltipster({
            trigger: 'custom',
            onlyOne: false,
            position: 'right'
        }); 

        //form.validate({
        //    errorPlacement: function errorPlacement(error, element) { element.before(error); },
        //    rules: {
        //        confirm: {
        //            equalTo: "#password"
        //        }
        //    }
        //});

        //jQuery.validator.setDefaults({
        //    debug: true,
        //    success: "valid"
        //});
        //form.validate({
        //    rules: {
        //        'User.FirstName': {
        //            required: true
        //        }

        //    }

        //});

        jQuery(function ($) {
           form.validate({

               //errorElement: 'div',
               //errorPlacement: function(error, element) {
               //    $(element).tooltip({
               //        content: 'the error message goes here'
               //    });
               //},

              // errorPlacement: function(error, placement) {
              //     var text = error.text();
              //      placement.tooltip({
              //             content: function(){ return text; }
              //         }).tooltip('open');
              //},

                   errorPlacement: function (error, element) {
                       $(element).tooltipster('update', $(error).text());
                       $(element).tooltipster('show');
                   },
                   success: function (label, element) {
                       $(element).tooltipster('hide');
                   },

               rules: {
                    'User.FirstName': {
                        required: true
                    },
                    'User.LastName': {
                            required: true
                    }
               }

               //messages: {

               //    'User.FirstName': {
               //        required: "You must enter the First Name"
               //    },
               //    'User.LastName': {
               //        required: "You must enter the Last Name"
               //    }

               //}
           });
        });

        form.children("div").steps({
            headerTag: "h1",
            bodyTag: "fieldset",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical",
            onStepChanging: function (event, currentIndex, newIndex) {

                alert(currentIndex);
                form.validate().settings.ignore = ":disabled,:hidden";
                 return form.valid();
            },
            //onFinishing: function (event, currentIndex) {
            //    form.validate().settings.ignore = ":disabled";
            //    return form.valid();
            //},
            onStepChanged: function (event, currentIndex, priorIndex) {
                resizeJquerySteps();
               // form.validate().settings.ignore = ":disabled,:hidden";
                alert("yes");
               // return form.valid();
            },
            onFinished: function (event, currentIndex) {
                if ($("#TermsAgreed").is(':checked')) {
                    form.submit();
                } else { alert("Please accept term and condition") }
                //alert("Submitted!");
            }
        });
        resizeJquerySteps();
        //$('.datepicker').datetimepicker();
    });
    $(window).resize($.debounce(250, resizeJquerySteps));
</script>

形式

<div class="hud-form margin-bottom-70">
@Using Html.BeginForm("Submit", "Requests", Nothing, FormMethod.Post, New With {.id = "RequestStepsForm", .class = "hud-form"})
@Html.ValidationSummary(True)
@Html.HiddenFor(Function(m) m.Registration)
@Html.HiddenFor(Function(m) m.Manufacturer)
@Html.HiddenFor(Function(m) m.ModelName)
@
<div>
<h1>Account</h1>
<fieldset>
    <div class="hud-form-controls hud-form-section clearfix">
        <h6 class="hud-form-heading">ACCOUNT</h6>
        @If User.Identity.IsAuthenticated Then
        @
        <h6 style="padding:0 1em 0.5em">Hi @User.Identity.Name!</h6>
        Else
        @
        <p style="padding: 0 1em 0.5em; margin: 0">Either @Html.ActionLink("sign in", "Login", "Account") or @*@Html.ActionLink("register (full)", "Register", "Account")*@ register below to submit a quote.</p>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.FirstName, New With {.class = "full-width", .type = "text", .placeholder = "First Name"})
            </div>
        </div>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.LastName, New With {.class = "full-width", .placeholder = "Last Name", .type = "text"})
            </div>
        </div>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.PhoneNumber, New With {.class = "full-width", .type = "search", .placeholder = "Phone / Mobile"})
            </div>
        </div>
        @
        <div class="visible-lg clear"></div>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.Email, New With {.class = "full-width", .type = "search", .placeholder = "Email"})
            </div>
        </div>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.Password, New With {.class = "full-width", .type = "password", .placeholder = "Password"})
            </div>
        </div>
        @
        <div class="col-md-6 col-lg-4">
            <div>
                @Html.TextBoxFor(Function(model) model.User.ConfirmPassword, New With {.class = "full-width", .placeholder = "Confirm Password", .type = "password"})
            </div>
        </div>
        End If
    </div>
</fieldset>
4

0 回答 0