функция onsubmit для не работает

Я искал много предметов, прежде чем опубликовать мой, и я не нашел ничего интересного для меня. Так что если я не видел другой пост как мой с рабочим ответом, Я сожалею о дубликате…

Итак, вот моя проблема: моя форма, когда я хочу отправить ее, просто ничего не делайте. У меня есть сообщение об ошибке или сообщение проверки, но я не могу увидеть их после отправки формы…

Вот мой HTML :

<form method="POST" action="#contact" onsubmit="return verifForm(this)">
    <div class="group">
        <?php
                        if(!empty($_POST['email'])) {
                            echo "<input id='contact-email' name='email' type='email' required onblur='verifEmail(this)' value='".$_SESSION['email']."'>";
                        }else {
                            echo "<input id='contact-email' name='email' type='email' required onblur='verifEmail(this)'>";
                        }
                    ?>
        <span class="bar"></span>
        <label>Email</label>
    </div>
    <div class="group">
        <?php
                        if(!empty($_POST['textarea'])) {
                            echo "<textarea name='textarea' id='contact-textarea' cols='30' onblur='verifTextarea(this)' rows='1'>".$_SESSION['textarea']."</textarea>";
                        }else {
                            echo "<textarea name='textarea' id='contact-textarea' cols='30' onblur='verifTextarea(this)' rows='1'></textarea>";
                        }
                    ?>
        <span class="bar"></span>
        <label>Message</label>
    </div>
    <div class="group">
        <span id="erreurjs" class="form-text text-muted"></span><br />
        <input class="contact-btn" type="submit" value="Envoyer">
    </div>
</form>

А вот мой JS :

function verifForm(f) {
    var emailOk = verifEmail(f.email);
    var textareaOk = verifTextarea(f.textarea);

    if (emailOk && textareaOk) {
        return true;
        document.getElementById('contact-message').className('contact-message-true').innerHTML('OK');
    } else {
        return false;
        document.getElementById('contact-message').className('contact-message-false').innerHTML('NOT OK');
    }
}

(Другие функции работают)

В основном, этот код предлагает посетителю ввести свою электронную почту и свое сообщение. Если электронное письмо недействительно, он не может отправить форму, то же самое для текстовой области (значение должно быть между 2 и 255).
Но пока верификация электронной почты и текстовой области работают, но, похожеverifForm(f), не работают…

PS: извините за ошибки, я француз !

3 ответа

  1. Возврат-это последнее, что вы делаете в функции. Это в конечном итоге ваша функция.

    Поэтому, не кладите ничего после возвращения, потому что он ничего не будет делать.

    Для того чтобы разрешить вашу проблему как раз своп returnи document.getElementById

    Попробовать это:

    function verifForm(f) {
        var emailOk = verifEmail(f.email);
        var textareaOk = verifTextarea(f.textarea);
    
        if(emailOk && textareaOk){
            document.getElementById('contact-message').className('contact-message-true').innerHTML('OK');
            return true;
        }else{
            document.getElementById('contact-message').className('contact-message-false').innerHTML('NOT OK');
            return false;
        }
    }
    

    Вы также можете сделать, как это

    function verifForm(f) {
        var emailOk = verifEmail(f.email);
        var textareaOk = verifTextarea(f.textarea);
    
        if(emailOk && textareaOk){
            document.getElementById('contact-message').className('contact-message-true').innerHTML('OK');
            return true;
        }
    
        // two command under this line will not be execute if you condition above is true. Your function will finish there.
        document.getElementById('contact-message').className('contact-message-false').innerHTML('NOT OK');
        return false;
    }
    

    FYI : в вашем HTML нет элемента с id contact-message

  2. В коде JS необходимо поместить return после функции ошибки документа. Вроде этого

    function verifForm(f) {
        var emailOk = verifEmail(f.email);
        var textareaOk = verifTextarea(f.textarea);
        if (emailOk && textareaOk) {
            document.getElementById('contact-message').className('contact-message-true').innerHTML('OK');
            return true;
        } else {
            document.getElementById('contact-message').className('contact-message-false').innerHTML('NOT OK');
            return false;
        }
    }
    
  3. О, Спасибо, ребята, я идиот ! ^^

    Поэтому я поставил возврат на последнее место, и я также изменил свой код на следующий код, и теперь он работает нормально !

    Это мой текущий код, если он может помочь кому-то еще:

    HTML:

    <form method="POST" action="#contact" onsubmit="return verifForm(this)">
                    <div class="group">
                    <?php
                        if(!empty($_POST['email'])) {
                            echo "<input id='contact-email' name='email' type='email' required onblur='verifEmail(this)' value='".$_SESSION['email']."'>";
                        }else {
                            echo "<input id='contact-email' name='email' type='email' required onblur='verifEmail(this)'>";
                        }
                    ?>
                        <span class="bar"></span>
                        <label>Email</label>
                    </div>
                    <div class="group">
                    <?php
                        if(!empty($_POST['textarea'])) {
                            echo "<textarea name='textarea' id='contact-textarea' cols='30' onblur='verifTextarea(this)' rows='1'>".$_SESSION['textarea']."</textarea>";
                        }else {
                            echo "<textarea name='textarea' id='contact-textarea' cols='30' onblur='verifTextarea(this)' rows='1'></textarea>";
                        }
                    ?>
                        <span class="bar"></span>
                        <label>Message</label>
                    </div>
                    <div class="group">
                    <?php
                        if(!empty($message)){
                            echo $message;
                            $message = '';
                        }else {
                            echo '<span id="contact-message"></span><br />';
                        }
    
                    ?>
    

    JS:

    function verifForm(f) {
    var emailOk = verifEmail(f.email);
    var textareaOk = verifTextarea(f.textarea);
    
    if(emailOk && textareaOk){
        document.getElementById('contact-message').className = 'contact-message-true';
        document.getElementById('contact-message').innerHTML = 'Votre message a bien été envoyé';
        return true;
    }
    document.getElementById('contact-message').className = 'contact-message-false';
    document.getElementById('contact-message').innerHTML = 'Veuillez remplir tous les champs correctement.';
    return false;
    

    }