How to activate jquery validation?

Question

I am trying to integrate Jquery Validation plugin into my website but validation not working.

I added validate method into document.ready() but not working.

I added it outside of document.ready() but again not working.

I included jquery validation file into my html file.

This is my 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>

This is my 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();
        }
    });
});

Could you help me with that?

Why do you think you need a `onclick` handler in the `button`? Did you look at any of the online examples of jQuery Validate? NONE of them have inline handlers. Also, the plugin automatically works with a `type="submit"`, not a `type="button"`. — Sparky, Oct 30 '19 at 16:05

score 1 · Answer 1 · answered Oct 30 '19 at 08:55

Change your button type attribute from button to submit.
Remove on onclick handler from the button and put your handler function into submitHandler function body like that:

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

score 0 · Accepted Answer · answered Oct 30 '19 at 08:57

0

You are not validating the form. Please follow this. I have done like this and it works, follow this it will help you.

form class is addAmmentiesForm in my case.

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

Button class is saveBtn

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

if(!valid) { 
  return false;
}

answered Oct 30 '19 at 08:57

sibabrat swain

1,277
8
20

1

This solved my problem. Thank you. – Mümin Celal Pinar Oct 30 '19 at 11:12
Great - you're showing a working example just like the Wiki and the docs. Would be better learning experience for everyone if you could explain where the OP made the mistake(s). Also, why are you targeting the `form` by class? If you have more than one `form` on the page using this class, the `.validate()` method will only be applied to the first one. – Sparky Oct 30 '19 at 16:05
The plugin automatically works with a `type="submit"`. Not sure why you're going through the trouble of writing a `click` handler to get around the `type="button"` when you could just use the `type="submit"` in the first place. – Sparky Oct 30 '19 at 16:07

How to activate jquery validation?

2 Answers2