Сообщение проверки нарушает мое поле электронной почты - PullRequest
Новая
       14

Сообщение проверки нарушает мое поле электронной почты

0 голосов
/ 30 января 2019

Проверка настроек Iam для поля электронной почты на веб-странице, но когда пользователь вводит неверные данные, сообщение об ошибке нарушает поле моей электронной почты.Пожалуйста, найдите приведенный ниже снимок экрана.

error message

//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" );
            }
        } );

    } );
});

Я ожидаю сообщения об ошибке после нажатия кнопки «Перейти», может ли кто-нибудь помочь мне в этом?

1 Ответ

0 голосов
/ 30 января 2019

Получил решение по вышеуказанному вопросу, добавил код ниже после условия else

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