Question

我正在学习Javascript。我创建了一个看起来像这样的表单：

    <form method="post" action="#">
       <input type="text" name="name" placeholder="Bitte verrate uns Deinen Namen."  id="anfrage-name"/>
       <input type="email" name="email" placeholder="Und nun Deine E-Mail-Adresse..." id="anfrage-email"/>
       <textarea name="message" placeholder="...gefolgt von Deiner Nachricht an uns." rows="6" id="anfrage-kaufen"></textarea>               
       <input type="submit" class="send-button" value="Anfragen" id="anfrage-abschicken"/>
       <span id="error-message"></span>
    </form>

在JQuery中，我将验证电子邮件：

$(document).ready(function(e) {
    $('#anfrage-abschicken').click(function() {
        var sEmail = $('#anfragen-email').val();
        if ($.trim(sEmail).length == 0) {
            //no email
            $('#error-message').text('Du musst dieses Feld ausfüllen.');
            e.preventDefault();
        }
        if (validateEmail(sEmail)) {
            // email format right
            return true;
        }
        else {
            // wrong email format
            $('#error-message').text('Dein E-Mail-Format stimmt nicht.');
            e.preventDefault();
        }
    });
});

function validateEmail(sEmail) {
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

不幸的是，它不起作用。我怎样才能让它发挥作用？这是我的JSFIDDLE

Answer 1

提交表单时使用onsubmit事件。听取按钮onclick事件是一种错误的方法。 onsubmit事件自动响应Enter键表单提交：

$('form').submit(function (e) {
    var sEmail = $('#anfrage-email').val();

    if ($.trim(sEmail).length == 0) {
        //no email
        $('#error-message').text('Du musst dieses Feld ausfüllen.');
        e.preventDefault();
        return false;    // <-- stop further validation
    }

    if (!validateEmail(sEmail)) {
        // wrong email format
        $('#error-message').text('Dein E-Mail-Format stimmt nicht.');
        e.preventDefault();
    }
});

您还将事件对象e传递给错误的函数。所以这个：

$(document).ready(function(e)

应该是

$(document).ready(function(e) {
    $('form').submit(function (e) {
    ...

另一个错误：你的jQuery选择器应该是$('#anfrage-email').val();而不是#anfragen-email。

演示：http://jsfiddle.net/gW377/5/

Answer 2

请注意，您要求$('#anfragen-email')，并且您的元素名为anfrage-email

之后，您可以将e.preventDefault();替换为return false以达到相同的目标（这样就可以了。）

剩下的代码似乎是对的：

http://jsfiddle.net/gW377/3/

Answer 3

您的按钮也是表单的提交按钮。我建议首先绑定到表单的提交事件而不是单击按钮。更一般地说，尝试使用jQuery Validatory插件，它将为您完成大部分工作。

Answer 4

您选择器上有几处错误

 var sEmail = $('#anfragen-email').val();

应该是：

 var sEmail = $('#anfrage-email').val();

由于您在DOM中没有具有该ID的元素

您需要在点击事件中传递事件对象e。

 $('#anfrage-abschicken').click(function(e) {

Fiddle

输入验证无法正确输出

4 个答案:

演示：http://jsfiddle.net/gW377/5/