Diskuze: Kontaktní formulář v JS - problém

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

GMWebs

Člen

GMWebs:20.3.2020 16:34

Ahoj všichni!
Potřeboval bych poradit snažím se vytvořit kontaktní formulář v JS.
Vše by mělo být v pohodě, ale když vyplním hodnoty podle příslušných podmínek (viz.obrázek) vyhodí mi to že nejsou správně a nepřesměruje mě to na stránku s ověřením(antispam).
Předem všem děkuji za rady!

HTML

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Potřebuješ nás kontaktovat nebo tě jen zajíma, kdo je aktuálně v A-Teamu? Vše nalezneš přímo tady!">
    <meta name="keywords" content="endcore, endcore kontakty, endcore majitel, majitel endcore, endcore ateam, ateam endcore, ateam, minecraft ateam">
    <meta name="author" content="Jiří Nováček">
    <meta name="robots" content="index,follow">
    <link rel="stylesheet" href="kontakty.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://fonts.googleapis.com/css?family=Bangers&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="icon" href="icon.png">
    <script src="https://kit.fontawesome.com/cbc1a46252.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <script src="contactform.js"></script>
    <title>Endcore.eu - Kontakty</title>
</head>
<body>
    <nav>
        <div class="toggle">
            <i class="fa fa-bars menu" aria-hidden="true"></i>
        </div>
            <ul>
                <li><a href="index.html">Domů</a></li>
                <li><a href="jaksepřipojit.html">Jak se připojit?</a></li>
                <li><a href="pravidla.html">Pravidla</a></li>
                <li class="activemenu"><a href="kontakty.html">Kontakty</a></li>
                <li><a href="http://endcore.eu/"><img src="czech.png" alt="czech-lg" class="ikony_cz"></a></li>
                <li><a href="http://english.endcore.eu/"><img src="english.png" alt="eng-lg" class="ikony_eng"></a></li>
            </ul>
    </nav>
    <content>
        <form action="https://formspree.io/[email protected]" method="POST">
            <label>
                E-mail
                <input type="email" class="email"/>
            </label>
            <label>
                Subject
                <input type="text" class="subject"/>
            </label>
            <label>
                Message
                <textarea class="message"></textarea>
            </label>
            <div class="status">

            </div>
            <button type="submit" class="submit">
                Send
            </button>
        </form>
    </content>
    <footer>
        <p><b>©Endcore.eu 2020</b></p>
        <p class="podpis">Build with <i class="fas fa-heart"></i> by <b><a href="http://gmwebs.cz/" target="_blank">GMWebs</b></a></p>
    </footer>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.menu').click(function(){
                $('nav ul').toggleClass('active');
            })
        })
    </script>
</body>
</html>

console.log('It works')

$(document).ready(function () {
    $('.submit').click(function (event) {
        console.log('Clicked button')

        var email = $('.email').val()
        var subject = $('.subject').val()
        var message = $('.message').val()
        var statusElm = $('.status')
        statusElm.empty()

        if(email.lenght > 5 && email.includes('@') && email.includes('.')) {
            statusElm.append('<div>Email is valid</div>')
        }   else {
            event.preventDefault()
            statusElm.append('<div>Email is not valid</div>')
        }

        if(subject.lenght >= 2) {
            statusElm.append('<div>Subject is valid</div>')
        }   else {
            event.preventDefault()
            statusElm.append('<div>Subject is not valid</div>')
        }

        if(message.lenght >= 10) {
            statusElm.append('<div>Message is valid</div>')
        }   else {
            event.preventDefault()
            statusElm.append('<div>Message is not valid</div>')
        }
    })
})

Zkusil jsem: Vyplnit hodnoty a kliknou na tlačítko.
Pak jsem taky překontroloval celý kód, ale chybu jsem nenašel.

Chci docílit: Rozchodit ten kontaktní formulář.

Odpovědět

20.3.2020 16:34

Neaktivní uživatel

Člen

Neaktivní uživatel:20.3.2020 17:41

To bude spíš úloha na lekci angličtiny ;-)
Společný jmenovatel všech podmínek je .lenght => .length

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

20.3.2020 17:41

Neaktivní uživatelský účet

GMWebs

Člen

GMWebs:20.3.2020 18:55

Solidní trapas :-D .
Nechápu jak jsem si toho mohl nevšimnout.
Díky moc

Nahoru Odpovědět

20.3.2020 18:55

Peter Mlich

Člen

Peter Mlich:20.3.2020 19:24

Zkus pouzivat editor s obarvovanim kodu.

Nahoru Odpovědět

20.3.2020 19:24

Jakub Podskalský

Člen

Jakub Podskalský:20.3.2020 21:57

Podle mě tak 50% začínajících programátorů ze zemí, kde se nemluví anglicky, se na začátcích nachytá se slovíčkem length a z nějakého záhadného důvodu to všechny táhne použít lenght. A já nebyl výjimkou.

Nahoru Odpovědět

20.3.2020 21:57

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.

Nejčastěji vyhledáváné

Diskuze: Kontaktní formulář v JS - problém