Question

我想在某些字段中有效，并且我希望在用户输入所有值后显示成功消息 $（'。alert-success'）。show（）; 。我在这里试了 jsfiddle 现在我可以验证所有字段，但如果所有字段都不为空，我不知道如何显示成功消息。
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();
        }

    });
}

<强> Demo

Answer 2

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

Answer 3

首先，使用验证器是一件好事，但我建议您检查服务器端的输入，因为它很容易破解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）就像表单有id或class一样：$('.myForm') , $('#myForm')

验证后如何显示成功消息

3 个答案: