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脚本。但是，我希望事先检查是否有任何缺失的数据/验证它。如果是这样，那么我需要转动警告危险div＆＃39;隐藏到假。

我是如何编辑$（“＃MyForm”）脚本来处理这样的任务的？感谢。

Answer 1

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

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

return false会阻止提交表单流程被解雇

HTML JS - Bootstrap表单验证

1 个答案: