Question

我的表单有两个问题：

1。电子邮件字段正在接受任何文字..但我需要它才能接受有效的电子邮件

2。我需要在成功提交后将字段重置为空白。

您可以看到演示网站here（点击＆＃34;点击此处＆＃34;链接）

以下是表单：

<form method="post" action="submit.php" id="contactform" class="signin">


        <input name="email" id="email" type="text" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" />
       <div class="antispam">
       <br /><input name="url" type="hidden" /></div>
       <textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required></textarea>
        <button id="flybutton">
            <p>Ready, Aim... </p>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
            </svg>
        </button>
</form>

目前，当用户点击提交按钮时，它会调用以下脚本来进行提交。如何合并重置功能（删除字段内容） AFTER 成功提交？

注意：只有在电子邮件格式正确的情况下，表单才能成功提交。

现在表单一直向我发送空白提交，我无法弄清楚！

以下是脚本：

 <script>
        var $btn = $('#flybutton');
        $("#contactform").validate({
            submitHandler: function (form) {
                fly(form);
            }
        });

        $btn.on('fliyingEnd', function (e, form) {

            $('#mask').fadeOut(300);
            $("#login-box").fadeOut(300); 
        })



        function fly(form){

            $btn.toggleClass('clicked');
            $btn.find('p').text(function(i, text) {
                return text === "Fire!" ? "Fire!" : "Fire!";
            });

            setTimeout(function () {
                $btn.trigger('fliyingEnd', [form]);
            }, 1000);

        }
    </script>

和

<script>
$(document).ready(function() {

  /* Attach a submit handler to the form */
$("#contactform").submit(function(event) {

    /* Stop form from submitting normally */
    event.preventDefault();

    /* Clear result div*/
    $("#result").html('');

    /* Get some values from elements on the page: */
    var values = $(this).serialize();

    /* Send the data using post and put the results in a div */
    $.ajax({
        url: "submit.php",
        type: "post",
        data: values,

    });
});
});
</script>

感谢您的帮助！

Answer 1

电子邮件字段正在接受任何文字..但我需要它才能接受有效的电子邮件

由于您需要电子邮件而不是任何文本，因此您可以将输入字段的类型从text设置为email，并结合您的模式，浏览器将处理有效性检查。但是，您也应该在后端进行有效性检查。

参考：https://developer.mozilla.org/en/docs/Web/HTML/Element/Input

成功提交后，我需要将字段重置为空白。

一个简单的方法，因为您使用的是JQuery＆＃39; $.ajax()，以下是

$.ajax({
    url: "submit.php",
    type: "post",
    data: values,
}).success(function() {
    document.querySelector('#email').value = '';
    document.querySelector('#message').value = '';
}).error(function () {
    //something to handle failure to successfully submit
});

这将做什么：

它将发送请求，如果请求成功，它将调用一个匿名函数，重置输入字段＆＃39;没有价值。如果请求由于某种原因失败，它将执行您决定的其他事情。

参考：http://api.jquery.com/jquery.ajax/

一些旁注：

/* Clear result div*/
$("#result").html('');

据我们从你的片段中可以看出，那里没有#result元素。也许你已经在完整的代码中使用它，所以请忽略它。

$("#contactform").validate({
    submitHandler: function (form) {
        fly(form);
    }
});

据我所知$().validate()不是jquery方法，也许你应该看一下？

Answer 2

只要您使用jquery进行提交，就可以使用这个精彩的插件http://jqueryvalidation.org/

它节省了大量时间编写正则表达式函数来验证每个字段加上它有自己的ajax方法

如何验证电子邮件字段，然后在提交后重置？

2 个答案: