How to validate a modal popup form before submission

Question

I have HTML code like this

HTML:

<form id="online_booking" method="POST" action="book.php" name="former">
    <div id="book_form">
        <p>
            <label for="z_name">Name:<span class="red"> *</span></label>
            <input type="text" placeholder="ENTER NAME.." name="z_name" required>
        </p>

    <p>
            <label for="z_email">EMAIL:<span class="red"> *</span></label>
            <input type="email" placeholder="ENTER EMAIL.." name="z_email" required>
        </p>

        <p>
            <label for="z_subject">PHONE:<span class="red"> *</span> </label>
            <input type="tel" placeholder="ENTER PHONE.." name="z_subject" required>
        </p>

</form>

and jQuery:

$(document).ready(function() {
    $('#book_form').dialog({
        autoOpen: true,
        height: 375,
        width: 350,
        modal: true,
        buttons: [
            {
            text: "Cancel",
            click: function() {
                $(this).dialog("close");
            }},
        {
            text: "Submit",
            click: function() {

                $('#online_booking').submit();
            }}
        ]
    });

});

How can I validate the HTML fields as there is no submit button on the form? In the jQuery code, I created 2 buttons(cancel & submit) but do not know how I would stop the form from submitting if the HTML fields are not properly entered.

Answer 1

You would simply alter your click function like so by creating your own validation function that returns true or false :

click: function () 
{
    if ( someValidationFunction() )
        $('#online_booking').submit();
}

Answer 2

This one is a basic example, but works if you're just checking for blanks:

            $(document).ready(function () {
                $('#book_form').dialog({
                    autoOpen: true,
                    height: 375,
                    width: 350,
                    modal: true,
                    buttons: [
                        {
                            text: "Cancel",
                            click: function () {
                                $(this).dialog("close");
                            }
                        },
                    {
                        text: "Submit",
                        click: function () {
                            if (valid()) {  //Check for Valid
                                $('#online_booking').submit();
                            }
                            else {
                                alert("Invalid");
                            }
                        }
                    }
                    ]
                });

            });
            var valid = function () { //Validation Function - Sample, just checks for empty fields
                var valid;
                $("input").each(function () {
                    if ($(this).val() === "") {
                        var a = $(this).val();
                        valid = false;
                    }
                });
                if (valid !== false) {
                    return true;
                }
                else {
                    return false;
                }
            }