Question

我编写了一个应该实际验证表单数据的函数。它检查每个输入是否有值以及电子邮件格式是否正确。当一切都很好，它应该提交该表格并通过PHP发送。这是在Ajax中完成的，因为我不想刷新页面。此外，提交按钮应在表单发送时更改其值。

这是我的jsfiddle，因为它是很多代码： http://jsfiddle.net/qY6uu/

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

这里是我的jquery

$(document).ready(function() {
  var form = $('#form'); // contact form
  var submit_button = $('#anfrage-abschicken');  // submit button
  var error = $('#error-message'); // alert div for show alert message

  // form submit event
  $('#anfrage-abschicken').click(function() {
       var sEmail = $('#anfrage-email').val();
        var sName = $('#anfrage-name').val();
        var sMessage = $('#anfrage-kaufen').val();

        //if nothing is in
        if ($.trim(sMessage).length == 0 && $.trim(sName).length == 0 && $.trim(sEmail).length == 0){
            $('#error-message').text('Alle Felder müssen ausgefüllt werden.');
            return false;
        }

        //no name
        else if ($.trim(sName).length == 0 ) {
            $('#error-message').text('Bitte verrate uns Deinen Namen.');
            $('#anfrage-name').focus();
            return false;
        }

        //no email
        else if ($.trim(sEmail).length == 0 ) { 
            $('#error-message').text('Deine E-Mail-Adresse musst Du angeben, damit wir Dir anworten können.');
            $('#anfrage-email').focus();
            return false;
        }

        //No message
        else if ($.trim(sMessage).length == 0 ) { 
            $('#error-message').text('Eine Nachricht musst Du uns schon hinterlassen.');
            $('#anfrage-kaufen').focus();
            return false;
        }

        //if everything is right (name, message, email, email format)
        else if (validateEmail(sEmail) && $.trim(sMessage).length > 0 && $.trim(sName).length > 0 && $.trim(sEmail).length > 0) {
           $.ajax({
                url: '', // form action url
                type: 'POST', // form submit method get/post
                dataType: 'html', // request type html/json/xml
                data: form.serialize(), // serialize form data 
                beforeSend: function() {
                    error.fadeOut();
                    submit_button.html('Sending....'); // change submit button text
                },
                success: function(data) {
                    error.html(data).fadeIn(); // fade in response data
                    form.trigger('reset'); // reset form
                    submit_button.html('Send Email'); // reset submit button text
                },
                error: function(e) {
                    console.log(e)
                }
            });
        }

        //wroong email format 
        else {
            $('#error-message').text('Dein E-Mail-Format stimmt nicht.');
            $('#anfrage-email').focus();
            return false;
        }
    });
});

//function for validating email format
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;
    }
}

Answer 1

按钮值需要更改而不是html。您需要更改val()。

改变你的：

submit_button.html('Send Email');

为：

submit_button.val('Send Email');

您需要通过event.preventDefault()来防止默认的表单提交 Demo

Answer 2

您的按钮是一个提交按钮，因此每当您点击提交按钮时，它都会被提交。它不会等待执行javascript代码。

将提交按钮更改为按钮类型，而不是像

这样提交类型

<input type="button" class="send-button" value="Anfragen" id="anfrage-abschicken"/>

然后点击按钮将不会触发表单提交。然后单击按钮，您的javascript代码将执行代码。

通过jquery ajax验证表单不起作用

2 个答案: