javascript - 如何在验证后显示成功消息

Question

我想要验证某些字段，并且想要在用户输入所有值后显示成功消息 $('.alert-success').show();。
我在这里尝试过 jsfiddle 现在我可以验证所有字段，但我不知道如果所有字段都不为空，如何显示成功消息。
网页:

<div class="contentContainer">
    <div class="alert alert-success hide">Form submitted successfully</div>
                        <div id="basicInfo">
                            <div class="toggleContentInnerSec"> 
                             <div class="row-fluid">
                                 <div class="span7">

                                 <label>First Name</label> <br> 
                                 <p class="hide firstNameErrorMsg error">Please enter first name</p>
                                 <input type="text" name="borrowerBasicDetail.firstName" value="" id="addBorrowers_borrowerBasicDetail_firstName" class="access required" placeholder="Example: 'Sachin' " data-errormsg="firstNameErrorMsg"> <br>
                                 <label>Last Name</label> <br>
                                 <p class="hide lastNameErrorMsg error">Please enter last name</p> 
                                 <input type="text" name="borrowerBasicDetail.lastName" value="" id="addBorrowers_borrowerBasicDetail_lastName" class="access required" placeholder="Example: 'Tendulkar' " data-errormsg="lastNameErrorMsg"> <br>
                                 <label>Date Of Birth</label> <br> 
                                 <p class="hide birthDayErrorMsg error">Please enter date of birth</p>
                                 <input type="text" name="borrowerBasicDetail.age" value="" id="addBorrowers_borrowerBasicDetail_age" class="access required" placeholder="DD/MM/YYYY" data-errormsg="birthDayErrorMsg"> <br>

                             </div> 
                         </div>

                         </div>
                        </div>

                        <div class="row-fluid pull-left">
                             <div class="form-actions">
                                <a class="btn btn-success btn-large" id="tabOneSubmit">Submit</a>
                             </div>
                        </div>

                    </div>

脚本:

submit();

function submit(){
    $('#tabOneSubmit').click(function(){
        $('.required').each(function(){
            var element=$(this);
            var elementVal=$(this).val();
            var errorMsgId=element.attr('data-errorMsg');
            if(elementVal==''){
                $('.'+errorMsgId).show();
                element.addClass('errorField');
            }
            else{
                $('.'+errorMsgId).hide();
                element.removeClass('errorField');
                }
        });

    });
}

Answer 1

这是解决方案，只需设置一个状态变量即可。

submit();

function submit(){
    $('#tabOneSubmit').click(function(){
        var status=true;
        $('.required').each(function(){

            var element=$(this);
            var elementVal=$(this).val();
            var errorMsgId=element.attr('data-errorMsg');
            if(elementVal==''){
                $('.'+errorMsgId).show();
                element.addClass('errorField');
                status=false;
            }
            else{
                $('.'+errorMsgId).hide();
                element.removeClass('errorField');
                }
        });

        if(status) {
            $('.alert-success').show();
        }

    });
}

<强> Demo