Jquery 如何在提交前验证模式弹出表单

我有这样的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>

由于表单上没有提交按钮，如何验证HTML字段？在里面

---

对于jQuery代码，我创建了两个按钮（cancel&submit），但不知道如果HTML字段输入不正确，我将如何阻止表单提交。

您只需通过创建自己的验证函数来更改

单击

函数，返回

true

或

false

：

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

---

这是一个基本示例，但如果您只是检查空格，则可以使用：

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

---

谢谢现在希望彻底验证各个字段。

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