I am using MVC View with HTML helper form with jQuery Steps. And, working on the validation . But tooltipster always fail with initialization. Have already gone through all the post. But somehow not working. My code snippets as below
Script:
<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>
Form
<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>
