Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
GMWebs
Člen
Avatar
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>

JS

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
Avatar
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č
Řešení problému
Nahoru Odpovědět
20.3.2020 17:41
Neaktivní uživatelský účet
Avatar
GMWebs
Člen
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:20.3.2020 19:24

Zkus pouzivat editor s obarvovanim kodu.

 
Nahoru Odpovědět
20.3.2020 19:24
Avatar
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. :D A já nebyl výjimkou. :)

 
Nahoru Odpovědět
20.3.2020 21:57
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.