jquery - jQuery 重复错误代码

Question

下面的代码工作正常，但是当我使用不正确的用户名和密码单击用户登录表单上的提交时，出现此错误:

Incorrect Informatiın

然后，我再次单击“提交”，但值不正确，并且此错误消息一遍又一遍地重复。因此，我的 div 奇怪地扩展了。我怎样才能解决这个问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

$("#giris").submit(function (event) {
    var kullanici_adi = $("#kullanici_ad").val();
    var sifre = $("#sifre").val();
    $.ajax({
        type: "POST",
        url: "girisislemi.php",
        data: {
            kullanici_adi: kullanici_adi,
            sifre: sifre
        },
        dataType: "json",
        success: function (data) {
            if (data.tip === 'yonetici') {
                window.location.href = "yonetici.php";
            }
            if (data.tip === 'kullanici') {
                window.location.href = "kullanici.php";
            }
            if (data.tip === 'error') {
                $('input[type=text]').css("border", "3px solid red");
                $('input[type=password]').css("border", "3px solid red");
                $('#giris').after("<font><p>Incorrect Information </p><font>");
                $('font').css("color", "red");
            }

        }

    });
    event.preventDefault();
});

Answer 1

该问题是由于您使用 after() 造成的每次运行时都会添加新内容。相反，您可以检查错误是否已显示:

if (data.tip === 'error') {
    $('input[type=text], input[type=password]').addClass('login-error');
    if (!$('p.login-error').length)
        $('#giris').after('<p class="login-error">Incorrect Information </p>');
}

另请注意 <font />元素非常过时，不应再使用，您应该在样式表中的类中设置样式规则并使用 add/removeClass 而不是设置内联 css() .

input.login-error {
    border: 3px solid red;
}
p.login-error {
    color: red;
}