【问题标题】:JS/jQuery event.submit/return true not wokingJS/jQuery event.submit/return true 不工作
【发布时间】:2014-06-05 20:12:26
【问题描述】:

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

我有一种奇怪的感觉,这会很愚蠢,但我看不出有什么问题。

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

【问题讨论】:

  • 既然你用了preventDefault(),那你返回什么都没关系。
  • ^ Barmar 所说的,你可以返回独角兽,但这并不重要,因为你已经阻止了默认操作。我建议使用本机提交处理程序并在有效时执行this.form.submit()
  • 是否有其他方法可以阻止发送您可以推荐的表单?顺便说一句,我只是验证了 this.form.submit() ,但这似乎并没有使它提交:/

标签: javascript jquery html


【解决方案1】:

您没有在function 参数中传递event

$('#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 元素不需要结束标记&lt;/input&gt;

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

【讨论】:

  • 我刚刚尝试过,当将其更改为 .submit 时,它不会阻止表单发送并且只是提交
  • 是的,这是一个 jsfiddle:jsfiddle.net/abs4f 抱歉,花了这么长时间。另外,如果您想要实时版本,我在这里alexvolley.co.uk/contact
  • 您在提交按钮上设置了`onclick="mailerVal();"`,但您没有在代码中定义函数mailerVal()event.preventDefault() 无法阻止 onclick 发射; event.stopImmediatePropagation()也不能。
  • 啊,哎呀,我昨晚把它改成了一个函数,看看是否能解决它,我刚刚再次关闭了 onClick,但如果一切正常,它仍然不允许我提交表单好的更新小提琴:jsfiddle.net/zUQ6T
  • 这很奇怪,不是吗?它会在this.submit() 或等效的$('#mailer')[0].submit() 上抛出错误Uncaught TypeError: object is not a function .... ......这不应该发生。可能有一些我们没有看到的东西。解决问题的最佳方法是从“裸骨”形式开始,然后慢慢添加到它上面,看看它在哪里断裂。你怎么看?
【解决方案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
    }
   ..............

【讨论】:

  • 刚刚试过了,还是没有提交,它做了表单响应的淡出和隐藏,然后不做提交
  • 您有按钮名称和 id 作为提交,这会导致 JQuery 错误。试试jsfiddle.net/5349r 中给出的代码
  • 我现在刚刚尝试过,但它从未成功,但在控制台中得到了这个:m.fn.init[1] 0: form#mailerForm context: document length: 1 selector: "#mailerForm" 原型:对象[0]
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-04-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-23
  • 2016-04-09
相关资源
最近更新 更多