Validating a Form with JQuery.validate + Submitting via Ajax

https://jqueryvalidation.org/

<div class="my-form-module">
    <div class="my-form">
        <form>
            <fieldset>
                <div class="my-form-field-wrap row">
                    <div class="my-form-field column">
                        <label class="field-label" for="field-id-1">
                            User Name
                        </label>
                        <input class="field field-type-2" data-field-id="1" id="field-id-1" name="field-id-1" placeholder="Your Name" type="text" value="" />
                    </div>
                </div>
                <div class="my-form-field-wrap row">
                    <div class="my-form-field column">
                        <label class="field-label" for="field-id-2">
                            User Email
                        </label>
                        <input class="field field-type-1" data-field-id="2" id="field-id-2" name="field-id-2" placeholder="Your Email*" type="text" value="" />
                    </div>
                </div>
                <div class="my-form-field-wrap row">
                    <div class="my-form-field column">
                        <label class="field-label" for="field-id-3">
                            User Phone
                        </label>
                        <input class="field field-type-4" data-field-id="3" id="field-id-3" name="field-id-3" placeholder="Your Telephone" type="text" value="" />
                    </div>
                </div>
                <div class="my-form-field-wrap row">
                    <div class="my-form-field column">
                        <label class="field-label" for="field-id-4">
                            User Enquiry
                        </label>
                        <textarea class="field field-type-3" cols="20" data-field-id="4" id="field-id-4" name="field-id-4" placeholder="Your Enquiry*" rows="2">
                        </textarea>
                    </div>
                </div>
                <div class="toolbar-wrap row">
                    <div class="toolbar column">
                        <div class="send-button">
                            <label>Send</label>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
 
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js">
</script>
<script>
    (function () {
        var form = $(".my-form-module form");
        var formFields = form.find(".field");
        var sendButton = form.find(".send-button");
 
        form.submit(function (event) {
 
            //We prevent the form normal
            //behavior to submit via Ajax
            event.preventDefault();
            if (!form.valid())
                return;
 
            //We get the fields' values
            var fieldValues = [];
            for (var i = 0; i < formFields.length; i++) {
                var formField = $(formFields[i]);
                fieldValues.push({
                    fieldId: formField.data("field-id"),
                    fieldValue: formField.val()
                });
            }
 
            //We send the values via ajax
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                url: "<data submit url>",
                data: JSON.stringify(fieldValues),
                success: function () {
                    formFields.val("");
                    alert("saved!");
                },
            });
        });
 
        //We bootstrap the validation
        //plugin with the configuration
        form.validate({
            "rules": {
                "field-id-2": {
                    "required": true,
                    "email": true
                },
                "field-id-3": {
                    "number": true
                },
                "field-id-5": {
                    "required": true
                },
                "field-id-4": {
                    "required": true
                }
            },
            "messages": {
                "field-id-2": {
                    "required": "Required",
                    "email": "Invalid email"
                },
                "field-id-3": {
                    "number": "Invalid phone number"
                },
                "field-id-5": {
                    "required": "Required"
                },
                "field-id-4": {
                    "required": "Required"
                }
            }
        });
 
        sendButton.on("click", function () {
            form.submit();
        });
    })();
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s