HTML JS - 引导表单验证

Question

我有一个简单的模型出现，允许用户填写一些信息。但是，我想要一个验证过程；

<form class="form-default" role="form" id="MyForm" action="form.php" method="POST">

            <label class="control-label text-uppercase">Name</label>
            <input type="text" class="form-control form-control-lg" name="name">
            <div class="alert alert-danger" id="name" hidden="true">Your name is required.</div>

</form>

<button type="button" class="btn btn-styled btn-base-1" id="submitForm">Submit</button>

当用户提交这个时，它被传递给一个 JS/Ajax 函数；

<script>
    /* must apply only after HTML has loaded */
    $(document).ready(function () {
        $(“#MyForm”).on("submit", function(e) {
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            //I assume I need to check here for validation first.
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $('#myModal .modal-body').html(data);
                    $("#closeForm").html("Finish");
                    $("#submitForm").remove();
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        });

        $("#submitForm").on('click', function() {
            $("#MyForm").submit();
        });
    });
</script>

这被传递给处理表单数据的 PHP 脚本。但是，我希望事先检查任何丢失的数据/验证它。如果是这样，那么我需要将 'alert-danger div' hidden 设置为 false。

有什么想法可以编辑 $(“#MyForm”) 脚本来处理这样的任务吗？ 谢谢。

Answer 1

在submitForm按钮的onclick事件中，在调用submit进程之前，使用jQuery检查所需的文本字段name是否有数据。如果它有数据return true 或return false。

if($("input[name='name']").val()=="") {
   return false;
}
return true;

return false 将防止提交表单过程被触发