Question

我想知道是否有人可以帮助我，因为我无法弄清楚这一点。我有这个验证脚本，检查电子邮件表单的内容和有效的电子邮件，它正常工作，但如果一切正常，它不提交表单..只是删除错误消息，什么都不做。

我有一种奇怪的感觉，这将是一些愚蠢的事情，但我不能在这里看到任何错误。

HTML

<!DOCTYPE html>
<html>
    <head>
        <?php include('includes/head.php'); ?>
        <script type="text/javascript" src="js/contactVal.js"></script>
    </head>
    <body>
        <?php include('includes/navbar.php'); ?>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h3>Contact Form</h3>
                    <p>Use this handy little contact form to get in contact with me about anything at all. If you have a job offer or any questions about me then feel free to drop me a message, ill get back to you as soon as possible.</p>
                    <hr>
                    <div id="form-response">
                    </div>
                    <form id="mailer" action="scripts/mailer.php" method="POST">
                        <h3>Name:</h3>
                        <input type="text" id="name" name="name" placeholder="Enter your name"></input><br />

                        <h3>Email:</h3>
                        <input type="email" id="email" name="email" placeholder="Enter your email address"></input><br />

                        <h3>Subject:</h3>
                        <input type="text" id="subject" name="subject" placeholder="Enter the subject of your message"></input><br />

                        <h3>Message:</h3>
                        <textarea id="message" name="message" placeholder="Enter your message here..."></textarea><br />

                        <input type="submit" name="submit" id="submit" value="Send"></input><br /><br />

                        <input type="hidden" name="honeypot" id="honeypot" value="http://" />
                        <input type="hidden" name="human" id="human" value="" />
                    </form>
                </div>
                <div class="col-md-4">
                    <h3>Details</h3>
                    <p><img class="about-arrow" src="img/icons/arrow.png" />Email: contact@alexvolley.co.uk</p>
                    <p><img class="about-arrow" src="img/icons/arrow.png" />Website: www.alexvolley.co.uk</p>
                    <p><img class="about-arrow" src="img/icons/arrow.png" />Mobile: On request</p>
                    <hr>
                    <h3>Socials</h3>
                    <a class="big" href="http://www.facebook.com/oukp3ngu1nx"><img class="about-arrow" src="img/icons/arrow.png" />Facebook</a><br />
                    <a class="big" href="http://www.twitter.com/alex_volley_"><img class="about-arrow" src="img/icons/arrow.png" />Twitter</a><br />
                    <a class="big" href="https://www.linkedin.com/pub/alex-volley/97/27/906"><img class="about-arrow" src="img/icons/arrow.png" />LinkedIn</a><br />
                </div>
            </div>
        </div>
        <?php include('includes/footer.php'); ?>
    </body>
</html>

JAVASCRIPT

$(document).ready(function(){
    $('#form-response').hide();
    $('#form-response').click(function(){
        $('#form-response').fadeOut();
    });
    $('#submit').click(function(){

        event.preventDefault();

        var valid = '';
        var name = $('form #name').val();
        var email = $('form #email').val();
        var subject = $('form #subject').val();
        var message = $('form #message').val();
        var honey = $('form #honeypot').val();
        var human = $('form #human').val();
        var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

        //check for human interaction
        if(honey == 'http://' && human == ""){
            //check fields
            if(name == '' || null || name.length < 2){
                valid = '<p>You need to enter your name.</p>';
            }

            if(email == '' || null || email.length < 5){
                valid += '<p>You need to enter an email address.</p>';   
            }

            if(!email.match(filter)){
                valid += '<p>You need to enter a valid email address.</p>';   
            }

            if(subject == '' || null || subject.length < 2){
                valid += '<p>You need to enter a valid subject.</p>';   
            }

            if(message == '' || null || message.length < 30){
                valid += '<p>You need to enter a message of at least 30 characters.</p>';   
            }

            //check if valid
            if(valid != ''){
                $('#form-response').removeClass().addClass('error').html('<h3>There was a few problems..</h3>' + valid).fadeIn('slow');
            } else {
                $('#form-response').fadeOut('slow');
                $('#form-response').hide();
                return true;
            }
        } else {
            //spambot
            error = '<p>Back of bot boy.</p>';
        }
    });
});

Answer 1

您未在event参数中传递function：

$('#submit').click(function( event ){

    event.preventDefault();

您最好使用submit事件并让提交按钮完成工作：

$('#mailer').submit(function( event ){

    event.preventDefault();
    ........
    if(valid != ''){
            $('#form-response').removeClass().addClass('error').html('<h3>There was a few problems..</h3>' + valid).fadeIn('slow');
            this.submit(); //ONCE EVERYTHING CHECKS OUT
    } else {
    .....

JS FIDDLE DEMO

修改

要解决错误Uncaught TypeError: object is not a function，请将提交按钮的名称更改为其他内容：this.submit - 该按钮与this.submit()冲突 - 功能。

Here是一个在更改后工作正常的版本：name="submit"到name="submit-button"

顺便说一下，您的input元素不需要结束标记</input>

参考：Uncaught TypeError: object is not a function, button inside form

Answer 2

可能是您可以尝试以下代码。在提交按钮上单击验证表单，如果使用.submit方法一切正常提交表单。

$('#submit').click(function( event ){

    event.preventDefault();
    ............
    if(valid != ''){
            $('#form-response').removeClass().addClass('error').html('<h3>There was a few problems..</h3>' + valid).fadeIn('slow');               
    } else {
      $('#form-response').fadeOut('slow');
      $('#form-response').hide();
      $('#mailer').submit(); //ONCE EVERYTHING CHECKS OUT
    }
   ..............

JS / jQuery event.submit / return true不起作用

2 个答案: