How do I validate an email field and then reset it after submission?

Question

I have a form that has 2 issues:

1. The email field is accepting any text.. but I need it to accept only valid emails

2. I need the fields to be reset to blank after successful submission.

You can see the demo site here (click the "Click Here" link)

Here is the form:

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

Currently when a user clicks the submit button, it calls on the following scripts to do the submitting. How do I incorporate a reset function (to delete field contents) AFTER successful submission?

Note: The form should only successfully submit if the email is in the proper format.

Right now the form keeps sending me blank submissions, and I can't figure it out!

Here are the scripts:

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

and

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

Thanks for your help!

Answer 1

The email field is accepting any text.. but I need it to accept only valid emails

Since you want an email, and not any text, you can set the type of the input field from text , to email and combined with your pattern, the browser will handle the validity check. However, you should do a validity check in the backend as well.

Reference : https://developer.mozilla.org/en/docs/Web/HTML/Element/Input

I need the fields to be reset to blank after successful submission.

An easy way to do that, since you are using JQuery's $.ajax() , is the following

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

What will this do:

It will send the request, and if the request is successful, it will call an anonymous function that resets the input fields' values to nothing. If the request fails for some reason it will do something else that you'll decide.

Reference : http://api.jquery.com/jquery.ajax/

Some side notes:

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

As far as we can tell from your snippets there is no #result element in there. Maybe you have it in your full code, so ignore this.

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

As far as I know $().validate() is not a jquery method, maybe you should look at that?

Answer 2

as long as you are using jquery for submittion , you can use this wonderful plugin http://jqueryvalidation.org/

it saves a lot of time writing regular expression functions to validate each field plus it have its own ajax method