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

您只需通过创建自己的验证函数来更改click函数，该函数将返回true或false：

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

如何在提交之前验证模式弹出窗体

2 个答案: