CODEWITHSUNDEEP
jquery
Aysu Vural
Aysu Vural

Reputation: 73

Repeating error code from jQuery

The below code works correctly but when I click the submit on my user login form with an incorrect user name and password I get this error:

Incorrect Informatiın

Then I click submit again with incorrect values and this error message repeats over and over. Because of this my div strangely expands. How can I fix this? 

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

Upvotes: 2

Views: 57

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is due to your use of after() which will always add new content each time it's run. Instead, you could check to see if the error has already been shown:

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

Also note that the <font /> element is very outdated, and shouldn't be used any more, and you should set your styling rules in classes in a stylesheet and using add/removeClass instead of setting inline css().

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

Upvotes: 1

Related Questions