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

Question

我的表格有2个问题：

1.电子邮件字段接受任何文本..但我需要它仅接受有效的电子邮件

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

您可以在此处查看演示站点（单击“单击此处”链接）

形式如下：

<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>

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

注意：仅当电子邮件格式正确时，表单才应成功提交。

现在，该表格一直向我发送空白的提交文件，我无法弄清楚！

以下是脚本：

 <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的$.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
});

这将做什么：

它将发送请求，如果请求成功，它将调用匿名函数，该函数将输入字段的值重置为空。 如果请求由于某种原因而失败，它将执行您决定的其他操作。

参考： 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方法