Send email after jquery form confirmation

Question

Im trying to build the confirmation script with jQuery, of a email/message sent by the user, to our email address.

The .php is working perfectly, but the jQuery isn't checking if inputs are empty and sends anyway.

Any help?

HTML

<form onsubmit="return validateForm()" action="send.php" id="myform" method="post">
                <label>Your name: </label>
                    <input type="text" name="username" placeholder="Type your name" id="username" class="required"/>
                <label>Your email: </label>
                    <input type="text" name="email" placeholder="Type your email address" id="email" class="required"/>
                <label>Subject / Title: </label>
                    <input type="text" name="subject" placeholder="Title / Subject" class="required"/>
                <label>Write us something: </label>
                    <textarea col="99" placeholder="Describe as detailed as possible, what you want us to do, for you. Send what you want and we will reply to you, as soon as possible!" id="message"></textarea>
                <input type="submit" name="submit" value="Enviar" id="submit"/>
            </form>

            <div class="alert alert-warning hidden" id="warning">An error has occured! Please fill your email and message!</div>
            <div class="alert alert-success hidden" id="success">Message sent! We will reply to you, as soon as possible!</div>

jQuery

function validateForm() {
    var x = document.forms["myform"]["message"].value;

    if (x == null || x == ""){
        $("#warning").removeClass("hidden");
        $("#warning").addClass("show");
        $('#warning').delay(5000).fadeOut(500);
        return false;
    }

    if (validateForm == true){
        $("#sucess").removeClass("hidden");
        $("#success").addClass("show");
        $('#sucess').delay(5000).fadeOut(500);
        return true;
    }
}

Prevent default behaviour of the form first. Try `event.preventDefault();` To prevent the default submission behaviour upon clicking on the submit button. — CodeTrooper, Jul 07 '14 at 19:09
possible duplicate of [JQuery form validation](http://stackoverflow.com/questions/965967/jquery-form-validation) — Sampo Sarrala - codidact.org, Jul 07 '14 at 19:10
You could do (for example) a message box with button that will `$(yourform).data('confirmed',true);`. Then check for that value in submit event `if ($(yourform).data('confirmed')) { /* allow */ }`. — Sampo Sarrala - codidact.org, Jul 07 '14 at 19:19

imbondbaby · Answer 1 · 2014-07-07T19:44:05.967

0

If you want to just validate if the message field is empty...

Try this:

Remove onsubmit function from form tag

And insert it on the button:

<input onclick="return validateForm();" type="submit" name="submit" value="Enviar" id="submit"/>

JQuery:

function validateForm() {
    if ($('#message').val() == ""){
        $("#warning").removeClass("hidden");
        $("#warning").addClass("show");
        $('#warning').delay(5000).fadeOut(500);
        return false;
    }
    else {
        return true;
    }
}

Demo

You could also use the click function in JQuery instead of having onclick inline

edited Jul 07 '14 at 19:44

answered Jul 07 '14 at 19:06

imbondbaby

6,351
3
21
54

1

In line 2, you mean $('#message') - 'message' is an id – Traveling Tech Guy Jul 07 '14 at 19:07
Updated it for you :) with demo – imbondbaby Jul 07 '14 at 19:29

score 0 · Answer 2 · answered Jul 07 '14 at 19:07

 var x = document.forms["myform"]["message"].value;
                                   ^^^^^^^---array is built with "name" attributes

<textarea col="99" ..snip.. id="message"></textarea>
                                ^^^^^^^-this is an ID, not a name

Your text area has no name attribute, so it will not show up in the forms array. And since it does have an id, you could just use

var x = document.getElementById('message').value;

or even

var x = $('#message').value();

score 0 · Answer 3 · answered Jul 07 '14 at 19:08

I'm not sure what you mean by if(validateForm == true). Try this:

function validateForm() {
    var x = $("#message").val();

    if (x == "") {
        $("#warning").removeClass("hidden");
        $("#warning").addClass("show");
        $('#warning').delay(5000).fadeOut(500);
        return false;
    }
    else {
        $("#sucess").removeClass("hidden");
        $("#success").addClass("show");
        $('#sucess').delay(5000).fadeOut(500);
        return true;
    }
}

Working example

Send email after jquery form confirmation

3 Answers3