如何激活jquery验证？

Question

我正在尝试将 Jquery 验证 插件集成到我的网站中，但验证不起作用。

我在 document.ready() 中添加了验证方法但没有用。

我在 document.ready() 之外添加了它，但仍然无法正常工作。

我将 jquery 验证文件包含到我的 html 文件中。

这是我的 html:

<form class="form" id="documentationForm" name="documentationForm">
            <div class="form-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentationType">Doküman Tipi *</label>
                            <select id="documentationType" name="documentationType" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Tipi"></select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentationCategory">Doküman Kategorisi *</label>
                            <select id="documentationCategory" name="documentationCategory" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Kategorisi"></select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="project">Proje</label>
                            <select id="project" name="project" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Proje"></select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="placeOfOrigin">Geldiği Yer/Kişi *</label>
                            <input type="text" id="placeOfOrigin" class="form-control" placeholder="Geldiği Yer/Kişi" name="placeOfOrigin" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Geldiği Yer/Kişi">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentationStatus">Doküman Durumu *</label>
                            <select id="documentationStatus" name="documentationStatus" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Durumu"></select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentationSubject">Doküman Konusu *</label>
                            <select id="documentationSubject" name="documentationSubject" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Konusu"></select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentOrderNo">Doküman Sıra No *</label>
                            <input type="text" id="documentOrderNo" class="form-control" placeholder="Doküman Sıra No" name="documentOrderNo" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Sıra No">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentNo">Doküman No *</label>
                            <input type="text" id="documentNo" class="form-control" placeholder="Doküman No" name="documentNo" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman No">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="startDate">Başlangıç Tarihi *</label>
                                    <div class="input-group">
                                        <input type="text" id="startDate" class="form-control" name="startDate" />
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <span class="la la-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6" id="endDateElement" style="display: none;">
                                <div class="form-group">
                                    <label for="endDate">Bitiş Tarihi</label>
                                    <div class="input-group">
                                        <input type="text" id="endDate" class="form-control" />
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <span class="la la-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="folderNo">Klasör No *</label>
                            <input type="number" min="0" id="folderNo" class="form-control" placeholder="Klasör No" name="folderNo" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Klasör No">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="documentationArrivalType">Doküman Geliş Şekli *</label>
                            <select id="documentationArrivalType" name="documentationArrivalType" class="form-control select2" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Doküman Geliş Tipi" onchange="DocumentationManagement_ManageDocumentation.ToggleDocumentationArrivalTypeElements(this.value)"></select>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row" id="documentationArrivalTypeByHandElements" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fullName">Adı Soyadı</label>
                                    <input type="text" id="fullName" class="form-control" placeholder="Adı Soyadı" name="fullName" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Adı Soyadı">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phoneNumber">Telefon No</label>
                                    <input type="tel" id="phoneNumber" class="form-control" placeholder="Telefon No" name="phoneNumber" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Telefon No">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row" id="documentationArrivalTypeByCargoElements" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cargoCarrier">Kargo Firması</label>
                                    <input type="text" id="cargoCarrier" class="form-control" placeholder="Kargo Firması" name="cargoCarrier" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Kargo Firması">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="cargoTrackingNumber">Takip No</label>
                                    <input type="text" id="cargoTrackingNumber" class="form-control" placeholder="Takip No" name="Takip No" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Takip No">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row" id="circulationElements" style="display: none;">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="jobDepartment">İş Departmanı</label>
                                    <select id="jobDepartment" name="jobDepartment" class="form-control select2" multiple="multiple" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="İş Departmanı"></select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="personnel">Personel</label>
                                    <select id="personnel" name="personnel" class="form-control select2" multiple="multiple" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Personel"></select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="description">Açıklama</label>
                            <textarea id="description" rows="5" class="form-control required" name="description" placeholder="Açıklama" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Açıklama"></textarea>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="dropzone" id="fileUpload" multiple></div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="row skin skin-square">
                            <div class="col-md-6">
                                <input type="checkbox" id="hasDueDate">
                                <label for="hasDueDate">Son Geçerlilik Tarihi</label>
                            </div>
                            <div class="col-md-6">
                                <fieldset>
                                    <input type="checkbox" id="hasCirculation">
                                    <label for="hasCirculation">Sirkülasyon</label>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions text-right">
                <button type="button" class="btn btn-success" onclick="DocumentationManagement_ManageDocumentation.Save();">Kaydet</button>
            </div>
        </form>

这是我的 javascript:

$(document).ready(() => {
    $("#documentationForm").validate({
        rules: {
            documentationType: {
                required: true
            },
            documentationCategory: {
                required: true
            },
            placeOfOrigin: {
                required: true
            },
            documentationStatus: {
                required: true
            },
            documentationSubject: {
                required: true
            },
            documentOrderNo: {
                required: true
            },
            documentNo: {
                required: true
            },
            startDate: {
                required: true
            },
            folderNo: {
                required: true
            },
            documentationArrivalType: {
                required: true
            }
        },
        messages: {
            documentationType: {
                required: "Required"
            },
            documentationCategory: {
                required: "Required"
            },
            placeOfOrigin: {
                required: "Required"
            },
            documentationStatus: {
                required: "Required"
            },
            documentationSubject: {
                required: "Required"
            },
            documentOrderNo: {
                required: "Required"
            },
            documentNo: {
                required: "Required"
            },
            startDate: {
                required: "Required"
            },
            folderNo: {
                required: "Required"
            },
            documentationArrivalType: {
                required: "Required"
            }
        },
        submitHandler: (form) => {
            form.submit();
        }
    });
});

你能帮我吗？

Answer 1

将您的按钮 type 属性从 button 更改为 submit。
从按钮中删除 onclick 处理程序并将处理函数放入 submitHandler 函数体中，如下所示：

submitHandler: (form) => {
  DocumentationManagement_ManageDocumentation.Save();
}

Answer 2

您没有验证表单。请按照这个。我已经这样做了并且有效，按照这个对你有帮助。

form class 在我的例子中是 addAmmentiesForm。

<form class="addAmmentiesForm">
.
.
.
</form

<div>
   <button type="button" class="btn btn-block btn-info btn-xs saveBtn">Save</button>
</div>

$('.addAmmentiesForm').validate({
            doNotHideMessage: true,
            rules: {
                ammenty_name:{
                    required: true
                }
            },
            messages: {
                ammenty_name:{
                    required: "Please enter Amenity name"
                }
            },
            errorElement: 'span'
        });

按钮 class 是 saveBtn

$('.saveBtn').on('click',function (e) {
        e.preventDefault();
        var valid = $('.addAmmentiesForm').valid();
});

if(!valid) { 
  return false;
}

如何激活jquery验证？

How to activate jquery validation?

javascript

jquery

jquery-validate