onsubmit的功能不起作用

Question

在發布我的文章之前，我已經搜索了很多主題，但我沒有發現任何有趣的東西。 因此，如果我沒有在我的職位上看到其他有有效答案的帖子，對不起，重復...

所以，這是我的問題：我的表單，當我要提交時，什么都不做。 我已經准備好錯誤消息或驗證消息，但是提交表單后看不到它們。

這是我的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：對不起，我是法國人！

Answer 1

Return是您在函數中要做的最后一件事。 它將結束您的功能。

因此，退貨后不要放任何東西，因為它不會做任何事情。

解決您的問題只是交換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;
}

僅供參考：您的HTML中沒有ID為contact-message元素

Answer 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;
    }
}

Answer 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;

}