提交之前如何驗證模式彈出式表單

Question

我有這樣的HTML代碼

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>

和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();
            }}
        ]
    });

});

由於表單上沒有提交按鈕，如何驗證HTML字段？ 在jQuery代碼中，我創建了2個按鈕（取消並提交），但是如果HTML字段輸入不正確，我不知道如何阻止表單提交。

Answer 1

您只需創建返回true或false的驗證函數，就可以像這樣簡單地更改click函數：

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

Answer 2

這是一個基本示例，但僅在檢查空白時可用：

            $(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;
                }
            }