Question

我正在尝试使用jQuery（用户发送的电子邮件/消息）构建确认脚本到我们的电子邮件地址。

.php工作正常，但是jQuery没有检查输入是否为空并且无论如何都要发送。

任何帮助？

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

Answer 1

如果您只想验证消息字段是否为空......

试试这个：

从onsubmit代码

中删除form功能

然后将其插入按钮：

<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

您还可以使用click中的JQuery功能，而不是onclick内嵌

Answer 2

 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

您的文本区域没有name属性，因此它不会显示在表单数组中。由于它确实有id，你可以使用

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

甚至

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

Answer 3

我不确定if(validateForm == true)你的意思。试试这个：

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

在jquery表单确认后发送电子邮件

3 个答案: