onsubmit's function for not working

Question

I have searched a lot of subjects before posting mine and I didn't found anything interesting for me. So if i didn't see another post as mine with a working answer, i'm sorry for the duplicate...

So, here is my problem: my form, when I want to submit it, just don't do anything. I have prepare an error message or a validation message, but I can't see them after submitting the form...

Here is my 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>

And here is my 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');
    }
}

(Other functions are working)

Basically, this code propose to the visitor to enter his email and his message. If the email is not valid, he can't submit the form, same thing for the text-area (value must be between 2 and 255). But for now, verification of email and text-area are working, but it seems verifForm(f) not working...

PS: Sorry for the mistakes, I'm french !

Answer 1

Return is the last thing you do in function. It will end up your function.

So, don't put anything after return because it will do nothing.

To solve your problem is just swap return and document.getElementById

Try this:

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

You can also do like this

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 : in your HTML have no element with id contact-message

Answer 2

In your JS code, you have to put return after the document error functions. Like this

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

Oh thank you guys, I'm an idiot ! ^^

So I have put the return at the last place and I have also change my code for the following code, and now it's working fine !

This is my current code if it can help someone else:

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;

}