Forum PHP.pl > Required nie działa

Szymciosek

20.03.2013, 17:11:44

Witam,
mam w html formularz z polami, niektóre pola mają zadeklarowane w sobie, że są required... wszystko działało dopóki nie dodałem ajax żeby wysłąć maila bez przeładowania strony.

Kod

Przykładowe pole wygląda tak:

Kod

To dodałem:

Kod

$(document).ready(function(){
            $("#sendmail").click(function(){
                var username = $("#username").val();
                var usermail = $("#usermail").val();
                var subject = $("#subject").val();
                var message = $("#message").val();

                var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact';
                send(datastr);

                return false;
            });
        });
        function send(datastr){
            $.ajax({
                type: "POST",
                url: "http://localhost/martamorawiecka/website_v.3.0/trunk/web/app_dev.php/test",
                data: datastr,
                cache: false
            });
        }

Po usunięciu tego wszystko wraca do normy. Dla mnie to sprawa magiczna, bo z js nie mam takiego doświadczenia.
Czemu tak się dzieje i jak to naprawić?

Zauważyłem, że po wywaleniu

Kod

return false;

required wraca do normy, ale wtedy działa to z przekierowaniem... a tak nie może być.

viking

20.03.2013, 17:15:26

Kod

$("#sendmail").click(function(e){
e.preventDefault();
...

Szymciosek

20.03.2013, 17:21:34

Kod

$(document).ready(function(){
            $("#sendmail").click(function(e){
                e.preventDefault();
                var username = $("#username").val();
                var usermail = $("#usermail").val();
                var subject = $("#subject").val();
                var message = $("#message").val();

                var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact';
                send(datastr);

                return false;
            });
        });
        function send(datastr){
            $.ajax({
                type: "POST",
                url: "http://localhost/martamorawiecka/website_v.3.0/trunk/web/app_dev.php/test",
                data: datastr,
                cache: false
            });
        }

Niestety nie działa.

W konsoli otrzymuję komunikat w przypadku, gdy próbuję wysłać puste pola.

Kod

POST http://localhost/mm/website_v.3.0/trunk/web/app_dev.php/test 500 (Internal Server Error)

Koniecznie zależy mi na tym:

viking

20.03.2013, 17:27:10

To zobacz w logach serwera co się dzieje. 500 o nie wina client-side.

Szymciosek

20.03.2013, 17:30:51

Mniej więcej wiem co się dzieje, a dzieje się to, że nie może wysłać maila, bo otrzymuje puste dane, których php otrzymać nie powinien.

Ale to nie tutaj problem, bo w przypadku pustego pola powinno się wyświetlić powyższe pole z informacją, że pole nie może być puste. Problem leży raczej właśnie po stronie tego ajaxa, który blokuje mi to.

viking

20.03.2013, 17:35:07

Z kodu który tutaj podałeś nie wynika żeby była jakaś walidacja. Sklejasz dowolne stringi i przsyłasz je POSTem jako całość.
Kolejna rzecz. słyszałeś o tablicy obiektów?

Cytat

var data = {
x: '1',
y: 'b'
}

console.log(data.y);

Szymciosek

20.03.2013, 17:45:10

Dobra, to porównaj te 2 kody:
Przeglądarka: Chrome najnowszy

Dodatkowo mam zadeklarowane jeszcze:

Kod

, ale to nie zmienia raczej nic tylko w razie czego jakby przeglądarka nie obsługiwała required, to dodaje.

Nie działa

Kod

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <form id="contact_form" action="" method="POST">
            <label for="username"> </label>
            <input type="text" id="username" name="username" placeholder="Imię i nazwisko" required />

            <label for="usermail"> </label>
            <input type="email" id="usermail" name="usermail" placeholder="Adres email" required />

            <label for="subject"> </label>
            <input type="text" id="subject" name="subject" placeholder="Temat" />

            <label for="message"> </label>
            <textarea name="message" id="message" name="message" placeholder="Treść wiadomości" required></textarea>

            <input type="submit" value="Wyślij" id="sendmail" />
        </form>

        <script>
        $(document).ready(function(){
            $("#sendmail").click(function(){
                var username = $("#username").val();
                var usermail = $("#usermail").val();
                var subject = $("#subject").val();
                var message = $("#message").val();

                var datastr = 'username=' + username + '&usermail=' + usermail + '&subject=' + subject + '&message=' + message + '&type=' + 'contact';
                send(datastr);

                return false;
            });
        });
        function send(datastr){
            $.ajax({
                type: "POST",
                url: "http://localhost/mm/website_v.3.0/trunk/web/app_dev.php/test",
                data: datastr,
                cache: false
            });
        }
    </script>
    </body>
</html>

Działa

Kod

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    </head>
    <body>
        <form id="contact_form" action="" method="POST">
            <label for="username"> </label>
            <input type="text" id="username" name="username" placeholder="Imię i nazwisko" required />

            <label for="usermail"> </label>
            <input type="email" id="usermail" name="usermail" placeholder="Adres email" required />

            <label for="subject"> </label>
            <input type="text" id="subject" name="subject" placeholder="Temat" />

            <label for="message"> </label>
            <textarea name="message" id="message" name="message" placeholder="Treść wiadomości" required></textarea>

            <input type="submit" value="Wyślij" id="sendmail" />
        </form>
    </body>
</html>

mortus

21.03.2013, 08:55:54

Walidacja HTML5 jest wykonywana po uruchomieniu zdarzenia submit, zatem to właśnie pod to zdarzenie powinieneś podpiąć wysyłanie wiadomości z użyciem AJAX-a.
Poza tym nie widzę sensu tworzenia tutaj dodatkowej funkcji send(), bo w sumie do tego są metody jQuery (z jednej z nich .ajax() nawet korzystasz).

Byłbym zapomniał: przykład.

Powyżej wykorzystuję najnowszą stabilną wersję jQuery - 1.9.1.

Szymciosek

21.03.2013, 16:07:55

Ogólnie prawie ok, ale problemem jest e-mail, zamiast małpy @ otrzymuję %40... przez to przestaje mi działać ze strony php.

Poradziłem sobie dodając w php:

[PHP] pobierz, plaintext 
urldecode($_POST['email']);
[PHP] pobierz, plaintext