JQuery - 不要在按钮成功/错误时添加悬停类
JQuery - Don't add hover class on button success/errors
我有一个带有一些JQuery验证和按钮效果的表单。悬停时,提交文本会移动到一侧并显示箭头。当您单击而不提交表单时,您会收到一个错误(红色按钮),当它成功时,您会看到一个绿色按钮,上面有一个勾号,上面写着谢谢。
我只希望悬停类在没有错误或成功类时运行/工作。
我试过使用,但我认为这不是实现这一目标的最佳方法?
if ( !$(".contourNavigation").children().hasClass("success") ) {
return $(this).addClass("hover");
}
JSFiddle
.JS:
$(document).ready(function () {
// JQuery Validate
// name
$("#abc6b8ed-5c99-460c-bd80-257747b07466").rules("add", {
required: true,
messages: {
required: "Mandatory"
}
})
// email
$("#dbd7b2e5-6a26-413a-b738-bc7441e4eace").rules("add", {
required: true,
messages: {
required: "Mandatory"
}
})
// message
$("#05ce7d9f-b381-4c14-bc37-36f0270fc19a").rules("add", {
required: true,
messages: {
required: "Mandatory"
}
})
//Intercept Submit button in order to make ajax call instead of a postback
$('#contactForm').preventDoubleSubmission();
});
// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
$("button").click('submit', function (e) {
e.preventDefault();
var $form = $("#contactForm");
// initialize validate
$("form").validate();
// bind to the form and run error function
$($form).bind("invalid-form.validate", function() {
if( $("invalid-form.validate") )
formErrors();
})
if ($form.data('submitted') === true) {
// Previously submitted - don't submit again
} else {
if ($form.valid()) {
// Mark it so that the next submit can be ignored
$form.data('submitted', true);
// Make ajax call form submission
$.ajax({
url: $form.attr('action'),
type: 'POST',
cache: false,
data: $form.serialize(),
success: function (result) {
success();
}
});
}
}
});
// keep chainability
return this;
};
function hover() {
$(".contour-button").on("mouseenter", function() {
return $(this).addClass("hover");
});
}
function hoverOff() {
$(".contour-button").on("mouseleave", function() {
return $(this).removeClass("hover");
});
}
function success() {
$(".contour-button").addClass("success");
$(".contour-btn-arrow").addClass("contour-btn-success");
$(".contour-button .submit").html("Thank you for your enquiry");
}
function formErrors() {
$(".contour-button").addClass("form-errors");
$(".contour-btn-arrow").addClass("contour-btn-error");
$(".contour-button .submit").html("Please complete the form");
}
hover();
hoverOff();
.HTML:
<div class="contour australia" id="contour_form_Australia">
<form method="post" id="contactForm" enctype="multipart/form-data" action="">
<input type="hidden" value="cNV3XRHLSNF43tj3o69gTg6xQS5fgXFZQpuJyJzhg90VFLl--TuJEeEHFFKzfEhBWYfVbVtXhKEWK8xl89z0NOAk4L88M67NoOfADsNulzQ1" name="__RequestVerificationToken">
<input type="hidden" value="e3874303-234b-469d-9849-a0fe70f62695" name="FormId" id="FormId" data-val-required="The FormId field is required." data-val="true">
<input type="hidden" value="1" id="FormStep" name="FormStep">
<input type="hidden" value="" id="NextStep" name="NextStep">
<input type="hidden" value="" id="PrevStep" name="PrevStep">
<input type="hidden" id="RecordId" name="RecordId">
<input type="hidden" value="" id="PreviousClicked" name="PreviousClicked">
<div class="contourPage">
<h4 class="contourPageName"></h4>
<fieldset class="contourFieldSet">
<div class="contourField name textfield mandatory">
<label class="fieldLabel" for="abc6b8ed-5c99-460c-bd80-257747b07466">Name: <span class="contourIndicator">*</span></label>
<div>
<input type="text" data-val-required="Name: is mandatory" data-val="true" maxlength="500" value="" class="text" id="abc6b8ed-5c99-460c-bd80-257747b07466" name="abc6b8ed-5c99-460c-bd80-257747b07466">
<span data-valmsg-replace="true" data-valmsg-for="abc6b8ed-5c99-460c-bd80-257747b07466" class="field-validation-valid"></span></div>
</div>
<div class="contourField email textfield mandatory alternating">
<label class="fieldLabel" for="dbd7b2e5-6a26-413a-b738-bc7441e4eace">Email: <span class="contourIndicator">*</span></label>
<div>
<input type="text" data-regex="^[_a-z0-9-]+('.[_a-z0-9-]+)*@[a-z0-9-]+('.[a-z0-9-]+)*('.[a-z]{2,4})$" data-val-regex="Email: is not valid" data-val-required="Email: is mandatory" data-val="true" maxlength="500" value="" class="text" id="dbd7b2e5-6a26-413a-b738-bc7441e4eace" name="dbd7b2e5-6a26-413a-b738-bc7441e4eace">
<span data-valmsg-replace="true" data-valmsg-for="dbd7b2e5-6a26-413a-b738-bc7441e4eace" class="field-validation-valid"></span></div>
</div>
<div class="contourField company textfield">
<label class="fieldLabel" for="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46">Company: </label>
<div>
<input type="text" maxlength="500" value="" class="text" id="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46" name="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46">
<span data-valmsg-replace="true" data-valmsg-for="0fd5e8ed-e9d3-4bf9-825b-7eb3bf73ed46" class="field-validation-valid"></span></div>
</div>
<div class="contourField phone textfield alternating">
<label class="fieldLabel" for="7072d283-91f1-4c30-a638-9681ca0fe76f">Phone: </label>
<div>
<input type="text" data-regex="/^(?=.*[0-9])[- +()0-9]+$/" data-val-regex="Phone: is not valid" data-val="true" maxlength="500" value="" class="text" id="7072d283-91f1-4c30-a638-9681ca0fe76f" name="7072d283-91f1-4c30-a638-9681ca0fe76f">
<span data-valmsg-replace="true" data-valmsg-for="7072d283-91f1-4c30-a638-9681ca0fe76f" class="field-validation-valid"></span></div>
</div>
<div class="contourField message textarea mandatory">
<label class="fieldLabel" for="05ce7d9f-b381-4c14-bc37-36f0270fc19a">Message: <span class="contourIndicator">*</span></label>
<div>
<textarea data-val-required="Message: is mandatory" data-val="true" cols="20" rows="2" id="05ce7d9f-b381-4c14-bc37-36f0270fc19a" name="05ce7d9f-b381-4c14-bc37-36f0270fc19a"></textarea>
<span data-valmsg-replace="true" data-valmsg-for="05ce7d9f-b381-4c14-bc37-36f0270fc19a" class="field-validation-valid"></span></div>
</div>
</fieldset>
<div style="display:none" class="contourField">
<label for="e3874303-234b-469d-9849-a0fe70f62695">Message</label>
<div>
<input type="text" name="e3874303-234b-469d-9849-a0fe70f62695" id="e3874303-234b-469d-9849-a0fe70f62695">
</div>
</div>
</div>
<div class="contourNavigation">
<!-- <div class="g-recaptcha" data-sitekey="6LeOivMSAAAAAGMp47EfxRiGiHhiUSJF7hFuidPV"></div> -->
<!-- <input class="submit-btn" type="submit" value="Submit"/> -->
<button class="contour-button" type="button">
<div class="submit">Submit</div>
<div class="contour-btn-arrow">
<div class="top line"></div>
<div class="bottom line"></div>
</div>
</button>
</div>
<div id="formSubmittedMsg"></div>
</form>
</div>
.CSS:
.fieldLabel {
margin-bottom: 10px;
}
.contourField div input {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #fff;
margin: 10px 0;
border: 1px solid #d5d5d5;
padding: 10px;
color: #555;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* normal text area */
div.contourField.message.textarea.mandatory div textarea {
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 10px 0;
width: 100%;
height: 287px;
border: 1px solid #d5d5d5;
padding: 10px;
color: #555;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.contourField.textfield {
width: 45%;
}
.contourField.message.textarea.mandatory {
float: right;
position: absolute;
right: 0;
top: 0;
width: 50%;
}
@media (max-width: 670px) {
.contourField.textfield {
width: 100%;
}
.contourField.message.textarea.mandatory {
float: right;
position: inherit;
width: 50%;
}
.contourField.message.textarea.mandatory {
width: 100%;
}
div.contourField.message.textarea.mandatory div textarea {
height: 150px !important;
}
}
.contourField div input:focus, div.contourField.message.textarea.mandatory div textarea:focus {
box-shadow: 0 0 5px rgba(243,116,33,0.2);
border: 1px solid rgba(243,116,33,0.75);
}
.contourField.textfield.mandatory > div {
position: relative;
}
/* input box validation error */
.field-validation-error {
-moz-transition: all .3s ease; /* Firefox */
-webkit-transition: all .3s ease; /* WebKit */
-o-transition: all 0.3s ease; /* Opera */
transition: all 0.3s ease; /* Standard */
font-size: 14px;
background: #f4d6d6 none repeat scroll 0 0;
border-bottom: 2px solid red;
border-left: 1px solid #e3a6a6;
color: #935656;
padding: 8px;
position: absolute;
right: 1px;
top: 11px;
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
/* text area validation error */
div.contourField.message.textarea.mandatory div span.field-validation-error {
top: 35px !important;
transition: all 0.3s ease 0s;
-webkit-border-radius: 0 3px !important;
-moz-border-radius: 0 3px !important;
border-radius: 0 3px !important;
}
.input-validation-error {
border: 1px solid #e3a6a6 !important;
box-shadow: 0 0 5px rgba(277,166,166,0.2);
}
.input-validation-error:hover,.input-validation-error:focus,.input-validation-error:active, {
border: 1px solid #e3a6a6 !important;
box-shadow: 0 0 5px rgba(277,166,166,0.2);
}
.contourIndicator {
color: red;
}
.g-recaptcha {
margin: 20px 0;
float: left;
}
#contour fieldset, .contour fieldset {
padding: 0 !important;
position: relative;
}
.contourPageName {
display:none;
}
.contourFieldSet p {
margin: -10px 0 30px 0;
}
/* .submit-btn {
background: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0.25);
color: #6a737b !important;
display: inline-block;
overflow: hidden;
padding: 8px 15px;
transition: all 0.3s ease 0s;
vertical-align: middle;
width: auto;
cursor: pointer;
margin-bottom: 40px;
float: right;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.submit-btn:hover {
color: #ffffff !important;
background: #6a737b;
border: 1px solid rgba(0, 0, 0, 0);
}
.submit-btn-success {
background: #d6f4d6 none repeat scroll 0 0 !important;
border: 1px solid #a6e3ac !important;
color: #569369 !important;
} */
#formSubmittedMsg {
background: #d6f4d6 none repeat scroll 0 0;
border: 1px solid #a6e3ac;
color: #569369;
padding: 10px;
margin-top: 50px;
display: none;
}
.submit-btn-success:hover,.submit-btn-success:focus,.submit-btn-success:active {
background: #d6f4d6 none repeat scroll 0 0 !important;
border: 1px solid #a6e3ac !important;
color: #569369 !important;
}
/**** Button Style/Animation ****/
.contour-button {
outline: 0;
background: #3a4247 none repeat scroll 0 0;
border: 1px solid rgba(0, 0, 0, 0);
color: #ffffff !important;
cursor: pointer;
float: right;
height: 43px;
margin-top: 15px;
margin-bottom: 40px;
overflow: hidden;
padding: 10px 15px !important;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/* mozilla only hack */
/* @-moz-document url-prefix() {
.contour-button {
padding: 13px;
}
} */
/* chrome only hack */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.contour-button {
margin-top: 20px;
padding: 13px 15px !important;
}
}
/* ie 8,9,10 only hack */
@media screen'0 {
.contour-button {
margin-top: 10px;
padding: 12px 15px !important;
}
.contour-btn-arrow {
top: -17px !important;
}
}
.submit,
.contour-btn-arrow {
/* display: inline-block; */
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.contour-btn-arrow {
left: 85px;
opacity: 0;
position: relative;
top: -13px;
}
.contour-btn-success {
left: -34px;
opacity: 0;
position: relative;
top: 54px;
}
.line {
height: 3px;
width: 11px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #ffffff;
}
.top {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.bottom {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
margin-top: 4px;
}
.contour-button:success {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
}
.contour-button.hover .submit {
-webkit-transform: translateX(-90px);
-moz-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
.contour-button.hover .contour-btn-arrow {
-webkit-transform: translateX(-70px);
-moz-transform: translateX(-70px);
transform: translateX(-70px);
opacity: 1;
}
.contour-button.success .contour-btn-arrow {
opacity: 1;
-webkit-transform: rotate(90deg) translateY(70px);
-moz-transform: rotate(90deg) translateY(70px);
transform: rotate(90deg) translateY(70px);
}
.contour-button.success {
background: #4CAF50;
padding-left: 50px !important;
width: 230px;
}
.contour-button.success .submit {
opacity: 1;
}
.contour-button.success .top {
width: 19px;
}
.contour-button.success .bottom {
margin: 7px 0 0 8px;
}
.contour-btn-error {
}
/* if errors */
.contour-button.form-errors {
background: #c73b3b;
}
修改以下 css 规则,添加 :not() 选择器,以避免在成功和错误时应用规则。
结果:jsfiddle
.contour-button.hover:not(.form-errors):not(.success) .submit {
-webkit-transform: translateX(-90px);
-moz-transform: translateX(-90px);
transform: translateX(-90px);
opacity: 0;
}
.contour-button.hover:not(.form-errors):not(.success) .contour-btn-arrow{
-webkit-transform: translateX(-70px);
-moz-transform: translateX(-70px);
transform: translateX(-70px);
opacity: 1;
}
相关文章:
- 在正则表达式中添加 (?i) 会导致 javascript 中出现错误“无效的正则表达式组”
- 使用jscodeshift添加表达式时,错误{..}与类型字符串不匹配
- 添加到CollectionView的内容后,第1行出现Ember错误
- 照片滑动:关闭图库会为错误的矩形(缩略图)添加动画效果
- 在使用 javascript 动态添加行时,我正在增加索引值,但出现错误
- 未捕获的引用错误:添加网络代码时未定义 $
- 未捕获的引用错误:添加未在javascript代码中定义
- 如何检查 HTML 标记,然后在 jQuery 验证中添加错误
- Jquery添加更多和删除冲突并显示错误值
- 如何在php中添加按钮而不是错误状态和成功消息
- 尝试从命令行将android平台添加到ionic时,模块.js:341处出现错误
- jquery数据表显示/隐藏列添加了错误的选择
- 将多边形添加到d3 vornoi导致错误
- "未捕获的类型错误:未定义的不是函数“;当向输入字段添加值时
- 在运行时添加js文件时出现语法错误
- 添加'错误'消息发送到同位素.JS搜索筛选器
- jQuery 选择错误:添加新的选择字段并对其进行组合时出现问题
- 使用javascript错误添加前导零
- WordJS身体.getOoxml错误添加空段落
- 向子网格添加自定义视图时出现错误“添加现有按钮”