Ajax Form Validation and Submission

Question

Completely at a loss here, been scouring the web for two days trying to find a simple explanation of how to validate a form with JQuery validation to no avail.... if someone could point where I'm going wrong it'd be really helpful in making sure I don't suffer a heart attack. Here is my form (please only comment on the validation, I don't want to hear about good coding practice):

<form id='test-form' class='contact-form'>
    <ul>
        <li><label for="full_name">Name*</label></li>
        <li><label for="email">E-mail*</label></li>
        <li><input id='full_name' type='text' name='full_name' onfocus="this.placeholder = ''" placeholder='Name' required></li>
        <li><input id='email' type='text' name='email' onfocus="this.placeholder = ''" placeholder='E-mail' required></li>
        <li>Message</li>
        <li><textarea style='color: white; width: 100%; height:180px; background: #333333; border: none; border-radius: 3px; outline:none; font-family: montserrat;' form='contact-page-form' onfocus="this.placeholder = ''" placeholder='Please enter your message here'></textarea></li>
        <li>Mobile Number (Optional)** <i style='font-size: 0.6em;'>for SMS updates</i></li>
        <li><input type='text' name='phone' onfocus="this.placeholder = ''" placeholder='Phone Number' ></li>
        <li>
        <div class='big-button form-submit'> 
            <a onclick='document.getElementById("test-form").submit();'>
                <div>
                    <i class="fa fa-envelope-o big message"></i>
                    SUBMIT MESSAGE
                </div>
            </a>
        </div>
        </li>
    </ul>
    <div class='name'>
        <input type='text' name='name' placeholder='First Name'> // Honey pot
    </div>
</form>

And my script:

$(document).ready(function(){
    $('.name').hide();

    $('#test-form').validate();
});

All other Jquery bits necessary have been imported....

My main gripe is that the form is submitted without any sort of validation. I would like to use PHP but unfortunately this site has to be built completely with AJAX and therefore no refresh is allowed... Cheers in advance, K

Answer 1

In the future, you can save yourself a lot of time but looking at your JavaScript error console.

You have two issues breaking the Validate plugin...

1) The inline JavaScript on your anchor tag for the submit link is bypassing the click event that triggers validation.

<a onclick='document.getElementById("test-form").submit();'>
    ....
</a>

This plugin expects a type="submit" button or input. So you could simply replace your anchor tag with a <button> tag thus eliminating the need for an inline JavaScript submit(). A <button> element will also allow you to style with CSS so that it looks exactly the same as your text link.

<button type="submit">
    ....
</button>

2) The form attribute within your <textarea> is set as follows...

form='contact-page-form'

It is supposed to contain the id of the form, but because your id is test-form, this also breaks the Validate plugin. (However, in this case, since your textarea is already inside of your <form>, the form attribute is totally unnecessary & superfluous on this element and could/should be removed.)

NOTES:

The inline JavaScript for your placeholders is ugly and unnecessary while using jQuery. You could use a single jQuery handler function instead.

$('input, textarea').on('focus', function () {
    $(this).attr('placeholder', '');
});

Working DEMO: http://jsfiddle.net/b9co72xj/1/

---

If you insist on using an anchor tag where you should be using a type="submit" button or input, there is a workaround...

<a id="button">
    ....
</a>

with a jQuery click handler...

$('#button').on('click', function(e) {
    e.preventDefault();
    $('#test-form').submit();
});

DEMO #2: http://jsfiddle.net/b9co72xj/

---

And finally, to submit the form without a page refresh, you would put your $.ajax() within the submitHandler callback function of the .validate() method.

$('#test-form').validate({
    submitHandler: function(form) {
        var data = $(form).serialize();
        // your ajax goes here
        $.ajax({
            ....
        });
        return false;
    }
});

DEMO #3: http://jsfiddle.net/b9co72xj/2/

Answer 2

USE remote method

      remote: { 
                    param: {
                        url:siteUrlStatic+"checkNameDuplicate/",
                        dataType: "json",

                        data: {
                            full_name: function () {
                                return $("#full_name").val();
                            }

                        },

                        async:false 
                    }
                },