修改BUG：Longbow.validate组件更新使用is-valid样式
This commit is contained in:
Argo-MacBookPro
parent
0baecc98c5
commit
5a12ae6a1c
|
|
@ -82,36 +82,24 @@
|
|||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.has-error input {
|
||||
input.is-invalid {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/error.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.has-error .form-control, .has-error .input-group-btn button, .has-error .input-group-btn button:active:focus {
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.has-success input {
|
||||
input.is-valid {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/success.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.pending {
|
||||
input.pending {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url(../img/loading-sm.gif);
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.has-success .pending, .has-error .pending {
|
||||
background-image: url(../img/loading-sm.gif);
|
||||
}
|
||||
|
||||
.has-success .form-control, .has-success .input-group-btn button, .has-success .input-group-btn button:active:focus {
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
transition: all .4s ease-in-out;
|
||||
padding: 15px 15px 0 15px;
|
||||
|
|
|
|||
|
|
@ -1,104 +0,0 @@
|
|||
.lock-screen {
|
||||
background: #02bac6 url("../images/lock-bg.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.lock-wrapper {
|
||||
margin: 6% auto;
|
||||
max-width: 330px;
|
||||
}
|
||||
|
||||
.lock-box {
|
||||
background: rgba(255,255,255,.3);
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.lock-box .form-group {
|
||||
float: inherit !important;
|
||||
}
|
||||
|
||||
.lock-wrapper img {
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border: 5px solid #fff;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.lock-wrapper h1 {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.lock-wrapper .locked {
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
color: #026f7a;
|
||||
}
|
||||
|
||||
.btn-lock, .btn-lock:hover {
|
||||
background: #02b5c2;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lock-input {
|
||||
width: 83%;
|
||||
border: none;
|
||||
float: left;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
#time {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 60px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.btn-lock, .btn-lock:hover {
|
||||
background: #02b5c2;
|
||||
color: #fff;
|
||||
outline: none !important;
|
||||
border-color: #2e6da4;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.has-error .btn-lock {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
.has-success .btn-lock {
|
||||
color: #3c763d;
|
||||
background-color: #dff0d8;
|
||||
border-color: #3c763d;
|
||||
}
|
||||
|
||||
div.input-group span {
|
||||
top: 0;
|
||||
background: #02b5c2;
|
||||
border-color: #2e6da4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
div.input-group input, div.input-group input:hover, div.input-group input:focus {
|
||||
border-color: #2e6da4;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
div.input-group input.error {
|
||||
background-color: #dcc4c4;
|
||||
border-color: #e21717;
|
||||
}
|
||||
|
|
@ -38,10 +38,6 @@
|
|||
float: right;
|
||||
}
|
||||
|
||||
.has-error .input-group, .has-success .input-group {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 15px;
|
||||
-webkit-border-radius: 5px;
|
||||
|
|
@ -80,11 +76,11 @@
|
|||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.tooltip.has-error .tooltip-inner {
|
||||
.is-invalid .tooltip-inner {
|
||||
background-color: #a94442;
|
||||
}
|
||||
|
||||
.tooltip.has-error .arrow:before {
|
||||
.is-invalid .arrow:before {
|
||||
border-top-color: #a94442;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -87,11 +87,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tooltip.has-error .tooltip-inner {
|
||||
.is-invalid .tooltip-inner {
|
||||
background-color: #a94442;
|
||||
}
|
||||
|
||||
.tooltip.has-error .arrow:before {
|
||||
.is-invalid .arrow:before {
|
||||
border-top-color: #a94442;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@ ol {
|
|||
-webkit-padding-start: 40px;
|
||||
}
|
||||
|
||||
.has-error input {
|
||||
input.is-invalid {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/error.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.has-success input {
|
||||
input.is-valid {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/success.png');
|
||||
background-position: right 8px center;
|
||||
|
|
|
|||
|
|
@ -473,13 +473,13 @@ a, a:hover, a:focus {
|
|||
max-width: 768px;
|
||||
}
|
||||
|
||||
.tooltip.has-error .tooltip-inner {
|
||||
background-color: #a94442;
|
||||
.is-invalid .tooltip-inner {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.tooltip.has-error .arrow:before {
|
||||
border-top-color: #a94442;
|
||||
border-bottom-color: #a94442;
|
||||
.is-invalid .arrow:before {
|
||||
border-top-color: #dc3545;
|
||||
border-bottom-color: #dc3545;
|
||||
}
|
||||
|
||||
.file-drop-zone.clickable:hover {
|
||||
|
|
|
|||
|
|
@ -325,47 +325,6 @@
|
|||
var op = $.extend({ header: "header", content: ".main-content" }, options);
|
||||
return ($(op.header).outerHeight() + $(op.content).outerHeight() + this.outerHeight() > $(window).height()) ? this.removeClass('fixed') : this.addClass('fixed');
|
||||
},
|
||||
autoValidate: function (rules, messages, handler) {
|
||||
var parent = 'body';
|
||||
var $wrapper = $('#dialogNew');
|
||||
if ($wrapper.length === 1) parent = '#dialogNew';
|
||||
// validate
|
||||
var $this = $(this);
|
||||
if (messages && $.isArray(messages.button)) {
|
||||
handler = messages;
|
||||
messages = {};
|
||||
}
|
||||
else {
|
||||
messages = $.extend({}, messages);
|
||||
}
|
||||
$this.validate({
|
||||
validClass: "has-success",
|
||||
errorClass: "has-error",
|
||||
ignore: ".ignore",
|
||||
rules: $.extend({}, rules),
|
||||
messages: $.extend({}, messages),
|
||||
highlight: function (element, errorClass, validClass) {
|
||||
$(element).parents('.form-group').addClass(errorClass).removeClass(validClass);
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$(element).tooltip('dispose').parents('.form-group').removeClass(errorClass).addClass(validClass);
|
||||
},
|
||||
errorPlacement: function (label, element) {
|
||||
var $ele = $(element);
|
||||
if (!$ele.attr('data-original-title')) $ele.tooltip({ container: parent });
|
||||
$ele.attr('data-original-title', $(label).text());
|
||||
$ele.tooltip('show');
|
||||
$('#' + $ele.attr('aria-describedby')).addClass(this.settings.errorClass);
|
||||
}
|
||||
});
|
||||
if (handler && $.isArray(handler.button)) {
|
||||
$.each(handler.button, function (index, btn) {
|
||||
$('#' + btn).on('click', function () {
|
||||
$(this).attr('data-valid', $this.valid());
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
smartTable: function (options) {
|
||||
var settings = $.extend({
|
||||
method: 'get', //请求方式（*）
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
$(function () {
|
||||
$('body').addClass('lock-screen');
|
||||
$('#time').text((new Date()).format('HH:mm:ss'));
|
||||
|
||||
setInterval(function () {
|
||||
$('#time').text((new Date()).format('HH:mm:ss'));
|
||||
}, 500);
|
||||
|
||||
$.extend($.validator.messages, { required: "请输入密码" });
|
||||
// validate
|
||||
$('form').autoValidate({
|
||||
password: {
|
||||
required: true,
|
||||
maxlength: 50
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -102,11 +102,11 @@
|
|||
});
|
||||
};
|
||||
|
||||
Validate.VERSION = '1.0';
|
||||
Validate.VERSION = '2.0';
|
||||
|
||||
Validate.DEFAULTS = {
|
||||
validClass: 'has-success',
|
||||
errorClass: 'has-error',
|
||||
validClass: 'is-valid',
|
||||
errorClass: 'is-invalid',
|
||||
childClass: '[data-valid="true"]',
|
||||
validResult: 'data-valid-result'
|
||||
};
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
this.$element.find(this.options.childClass).each(function () {
|
||||
var $this = $(this);
|
||||
$this.tooltip('dispose');
|
||||
$this.parent().removeClass(css);
|
||||
$this.removeClass(css);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -152,21 +152,20 @@
|
|||
|
||||
var op = this.options;
|
||||
var $this = $(element);
|
||||
var $parent = $this.parent();
|
||||
try {
|
||||
if (valid) $this.tooltip('dispose');
|
||||
else {
|
||||
if (!$parent.hasClass('has-error')) $this.tooltip();
|
||||
if (!$this.hasClass(op.errorClass)) $this.tooltip();
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
|
||||
}
|
||||
if (!valid) {
|
||||
$parent.removeClass(op.validClass).addClass(op.errorClass);
|
||||
$this.removeClass(op.validClass).addClass(op.errorClass);
|
||||
}
|
||||
else {
|
||||
$parent.removeClass(op.errorClass).addClass(op.validClass);
|
||||
$this.removeClass(op.errorClass).addClass(op.validClass);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,4 @@
|
|||
$(function () {
|
||||
$('form').autoValidate({
|
||||
userName: {
|
||||
required: true,
|
||||
maxlength: 50
|
||||
},
|
||||
displayName: {
|
||||
required: true,
|
||||
maxlength: 50
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
maxlength: 50
|
||||
},
|
||||
assurePassword: {
|
||||
required: true,
|
||||
maxlength: 50,
|
||||
equalTo: "#password"
|
||||
},
|
||||
description: {
|
||||
required: true,
|
||||
maxlength: 500
|
||||
}
|
||||
});
|
||||
|
||||
$('#btnAccount').click(function () {
|
||||
var valid = $('form').valid();
|
||||
if (valid) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue