验证消息破坏了我的电子邮件字段

Question

网页上电子邮件字段的Iam设置验证，但是当用户输入无效的输入时，错误消息破坏了我的电子邮件字段。 请找到以下屏幕截图。

//html
<form id="signupForm" method="post" class="form-horizontal" action="www.google.com">
<div class="input-group">
<input type="text" class="form-control" id="email" name="email" placeholder="Email address">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" name="signup" value="Sign up">Go!</button>
</span>
</div>
</form>

//css
button.btn{
color:#fff;
background-color:#747980!important;
border-bottom-right-radius:.25rem;
border-bottom-left-radius:initial;
border-top-right-radius:.25rem;
border-top-left-radius:initial;
display:inline-block;
}

//js
$(document).ready(function () {
$.validator.setDefaults( {
        submitHandler: function () {
            alert( "submitted!" );
            window.location.replace("http://stackoverflow.com");
        }
    } );

    $( document ).ready( function () {
        $( "#signupForm" ).validate( {
            rules: {
                email: {
                    required: true,
                    email: true
                },
                agree: "required"
            },
            messages: {
                email: "Please enter a valid email address",
                agree: "Please accept our policy"
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `invalid-feedback` class to the error element
                error.addClass( "invalid-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.next( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
            }
        } );

    } );
});

我希望在“执行”按钮后收到错误消息，有人可以帮我吗？

Answer 1

针对上述问题的解决方案在else条件之后添加了以下代码

$("em").insertAfter("span.input-group-btn");