JQuery - 不要在按鈕成功/錯誤上添加懸停類

我有一些帶有一些JQuery驗證和按鈕效果的窗體。當你懸停時，提交文本移動到一邊並顯示一個箭頭。當你沒有提交表單的時候點擊，你會得到一個錯誤（紅色按鈕），當它成功時，你會得到一個綠色的按鈕，並用勾號表示感謝。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; 
}

來源

2016-03-08 Madness

哪些jQuery插件，你用過？ – silviagreen

JQuery UI，JQuery Form，JQuery Validate（and unobstructive） – Madness

你可以在jsfiddle（包括那些插件）中插入你的代碼嗎？ – silviagreen

修改以下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; 
}

來源

2016-03-08 10:07:41 silviagreen

謝謝silvia！正是我想要的。 :) – Madness

JQuery - 不要在按鈕成功/錯誤上添加懸停類

回答

相關問題