$(function () { /**** Inline Form Wizard with Validation ****/ $(".form-wizard").steps({ bodyTag: "section", onStepChanging: function (event, currentIndex, newIndex) { // Always allow going backward even if the current step contains invalid fields! if (currentIndex > newIndex) { return true; } // Forbid suppressing "Warning" step if the user is to young if (newIndex === 3 && Number($("#age").val()) < 18) { return false; } var form = $(this); // Clean up if user went backward before if (currentIndex < newIndex) { // To remove error styles $(".body:eq(" + newIndex + ") label.error", form).remove(); $(".body:eq(" + newIndex + ") .error", form).removeClass("error"); } // Disable validation on fields that are disabled or hidden. form.validate().settings.ignore = ":disabled,:hidden"; // Start validation; Prevent going forward if false return form.valid(); }, onStepChanged: function (event, currentIndex, priorIndex) { // Suppress (skip) "Warning" step if the user is old enough. if (currentIndex === 2 && Number($("#age").val()) >= 18) { $(this).steps("next"); } // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step. if (currentIndex === 2 && priorIndex === 3) { $(this).steps("previous"); } }, onFinishing: function (event, currentIndex) { var form = $(this); // Disable validation on fields that are disabled. // At this point it's recommended to do an overall check (mean ignoring only disabled fields) form.validate().settings.ignore = ":disabled"; // Start validation; Prevent form submission if false return form.valid(); }, onFinished: function (event, currentIndex) { var form = $(this); // Submit form input form.submit(); } }).validate({ errorPlacement: function (error, element) { element.before(error); }, rules: { confirm: { equalTo: "#password" } } }); /**** Modal Form Wizard with Validation ****/ $.fn.wizard.logging = true; var wizard = $('#satellite-wizard').wizard({ keyboard: false, contentHeight: 400, contentWidth: 700, backdrop: 'static' }); $('#fqdn').on('input', function () { if ($(this).val().length != 0) { $('#ip').val('').attr('disabled', 'disabled'); $('#fqdn, #ip').parents('.form-group').removeClass('has-error has-success'); } else { $('#ip').val('').removeAttr('disabled'); } }); var pattern = /\b(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/; x = 46; $('#ip').on('input', function () { if ($(this).val().length != 0) { $('#fqdn').val('').attr('disabled', 'disabled'); } else { $('#fqdn').val('').removeAttr('disabled'); } }).keypress(function (e) { if (e.which != 8 && e.which != 0 && e.which != x && (e.which < 48 || e.which > 57)) { console.log(e.which); return false; } }).keyup(function () { var $this = $(this); if (!pattern.test($this.val())) { //$('#validate_ip').text('Not Valid IP'); console.log('Not Valid IP'); $this.parents('.form-group').removeClass('has-error has-success').addClass('has-error'); while ($this.val().indexOf("..") !== -1) { $this.val($this.val().replace('..', '.')); } x = 46; } else { x = 0; var lastChar = $this.val().substr($this.val().length - 1); if (lastChar == '.') { $this.val($this.val().slice(0, -1)); } var ip = $this.val().split('.'); if (ip.length == 4) { //$('#validate_ip').text('Valid IP'); console.log('Valid IP'); $this.parents('.form-group').removeClass('has-error').addClass('has-success'); } } }); wizard.on('closed', function () { wizard.reset(); }); wizard.on("reset", function () { wizard.modal.find(':input').val('').removeAttr('disabled'); wizard.modal.find('.form-group').removeClass('has-error').removeClass('has-succes'); wizard.modal.find('#fqdn').data('is-valid', 0).data('lookup', 0); }); wizard.on("submit", function (wizard) { var submit = { "hostname": $("#new-server-fqdn").val() }; this.log('seralize()'); this.log(this.serialize()); this.log('serializeArray()'); this.log(this.serializeArray()); setTimeout(function () { wizard.trigger("success"); wizard.hideButtons(); wizard._submitting = false; wizard.showSubmitCard("success"); wizard.updateProgressBar(0); }, 2000); }); wizard.el.find(".wizard-success .im-done").click(function () { wizard.hide(); setTimeout(function () { wizard.reset(); }, 250); }); wizard.el.find(".wizard-success .create-another-server").click(function () { wizard.reset(); }); $(".wizard-group-list").click(function () { alert("Disabled for demo."); }); $('#open-wizard').click(function (e) { e.preventDefault(); wizard.show(); }); }); function validateServerLabel(el) { var name = el.val(); var retValue = {}; if (name == "") { retValue.status = false; retValue.msg = "Please enter a label"; } else { retValue.status = true; } return retValue; }; function validateFQDN(el) { var $this = $(el); var retValue = {}; if ($this.is(':disabled')) { // FQDN Disabled retValue.status = true; } else { if ($this.data('lookup') === 0) { retValue.status = false; retValue.msg = "Preform lookup first"; } else { if ($this.data('is-valid') === 0) { retValue.status = false; retValue.msg = "Lookup Failed"; } else { retValue.status = true; } } } return retValue; }; function lookup() { // Normally a ajax call to the server to preform a lookup $('#fqdn').data('lookup', 1); $('#fqdn').data('is-valid', 1); $('#ip').val('127.0.0.1'); };