验证后如何显示成功消息

Question

我想验证某些字段，并想显示成功消息$（'。alert-success'）。show（）; 用户输入所有值后。
我在这里尝试了jsfiddle现在，我可以验证所有字段，但是如果所有字段都不为null，我不知道如何显示成功消息。
HTML：

<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();
        }

    });
}

演示版

Answer 2

$('#submit_button').bind('click', function(){
     $('#message_div').show();
});

Answer 3

$("#msg").html("Form was submitted");

Answer 4

首先，使用验证器是一件好事，但我建议您也检查服务器端的输入，因为它很容易破解JavaScript代码。

其次，您需要输入字段通过的封装；

<form method="POST or GET" action="foo.html"> </form>

然后，您可以使用jQuery Submit（）方法通过javascript提交：

$(form).submit(function(){
    $('.alert-success').show();
    event.preventDefault(); // if you want to send data only, do not reload page.
});

$（form）可以像是form具有ID或类： $('.myForm') , $('#myForm')