在表單上隱藏成功和錯誤消息

Question

我有一個使用ajax的訂閱表格。 問題是success和error消息始終在頁面上。 為什么它們在頁面上？如何隱藏它們，直到提交表單？

這是我的js功能

$(document).ready(function(){

(function($) {
    "use strict";

// validate subscribeForm form
$(function() {
    $('#subscribeForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: {
                required: "Please enter your name?",
                minlength: "Your name must consist of at least 4 characters"
            },
            email: {
                required: "Please enter your email address"
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:"POST",
                data: $(form).serialize(),
                url:"subscribe.php",
                success: function() {
                    $('#subscribeForm :input').attr('disabled', 'disabled');
                    $('#subscribeForm').fadeTo( "slow", 0.15, function() {
                        $(this).find(':input').attr('disabled', 'disabled');
                        $(this).find('label').css('cursor','default');
                        $('#sub_success').fadeIn();
                    });
                },
                error: function() {
                    $('#subscribeForm').fadeTo( "slow", 0.15, function() {
                        $('#sub_error').fadeIn();
                    });
                }
            })
        }
    })
})      
})(jQuery)
})

這是表格

<div class="footer-newsletter row footer-widget right-box">
    <h3 class="footer-title">newsletter sign up</h3>
        <form class="form-inline newsletter-form" id="subscribeForm" method="post" action="">
            <input type="text" id="name" name="name" class="form-control" placeholder="Name">
            <input type="email" id="email" name="email" class="form-control" placeholder="Email">
            <button type="submit" class="btn btn-primary" name="sub_submit">Submit</button>
        </form>
        <div id="sub_success">You subscribe succesfully!</div>
        <div id="sub_error">Opps! There is something wrong. Please try again</div>                      
</div>

所以sub_success和sub_error總是在頁面上。

Answer 1

使用此類型的警報它將在3秒內消失

$('#success_message').fadeIn(1000).html("<div class='alert alert-danger' role='alert' style='font-size: 15px;'>Soory some there is some error,please enter again data...</div>").fadeOut(3000);

Answer 2

在代碼中更改以下內容：

<div id="sub_success" style="display:none">You subscribe succesfully!</div>
<div id="sub_error" style="display:none">Opps! There is something wrong. Please try again</div>

Answer 3

只需在document.ready為兩個元素添加.hide ，如下所示：

$(document).ready(function(){
   $('.sub_success,.sub_error').hide();
});

Answer 4

你可以寫一個CSS

#sub_success, #sub_error {display:none}

然后使用jQuery，您可以通過使用顯示和隱藏

$("#sub_success").show();
$("#sub_error").hide();