使用引导程序验证表单 (novalidate)

Question

我在使用 bootstrap novalidate 验证表单时遇到问题。 一些表单域包含“必填”标签，而另一些则不包含。

为了验证，我提交了没有数据的表单，并且“已验证” class 使所有字段都经过验证，带有“必需”标签的字段标记为红色，其他字段标记为绿色。

这个想法是指定验证哪些字段而不是整个表单。

请问你能帮帮我吗？

形式

<form id="Data" method="POST" class="needs-validation mt-0" novalidate>
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Name: <span class="text-danger">*</span></label>
                <input type="text" id="name" name="Name" class="form-control" autocomplete="off" required>
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Lastname: <span class="text-danger">*</span></label>
                <input type="text" id="lastname" name="lastname" class="form-control" autocomplete="off" required>
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
    <div class="row mb-1">
        <div class="col-lg-12 ">
            <div class="form-group">
                <label class="d-block font-weight-semibold">Street: <span class="text-danger">*</span></label>
                <input type="number" id="Street" name="Street" class="form-control">
            </div>
        </div> <!-- / col -->
    </div> <!-- / row-->
</form>

JS

<script type="text/javascript">
    $('#Data').on('submit', function(e){
        e.preventDefault();
        var form = document.getElementById('Data');
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        else {
            $.ajax({
                //url: "",
                type: $('#Data').attr('method'),
                data: $('#Data').serialize(),
                //dataType: 'json',
                beforeSend: function(){ },
                success:function(response) {
                    if (response.success == true) {
                    }
                    else {
                    }
                }
            })
        }
        $('#Data').addClass('was-validated');
    });
</script>

Answer 1

为需要检查的每个字段调用 checkValidity()，而不是完整的表单：

    var formFlag = true;

    var nameField = document.getElementById("name");
    if (!nameField.checkValidity()) {
        nameField.classList.add("is-invalid");
        formFlag = false;
    }

    var lastnameField = document.getElementById("lastname");
    if (!lastnameField.checkValidity()) {
        lastnameField.classList.add("is-invalid");
        formFlag = false;
    }

    if (!formFlag) {
        e.preventDefault();
        e.stopPropagation();
        return;
    } else {