Menu

September 22, 2018

Validate form sử dụng jQuery Validation

Giới thiệu

jQuery Validation là 1 thư viện cung cấp các phương thức và API giúp cho việc validate dữ liệu đầu vào ở phía client trở nên đơn giản hơn với khả năng customize dễ dàng. Việc tích hợp thư viện này vào các dự án base cũng như các hệ thống được xây dựng sẵn cũng rất nhanh chóng.

Sử dụng cơ bản

Form nhập dữ liệu cơ bản như sau:

<form id="createForm" method="post" action="/">
    <div class="control">
        <label for="id">ID</label>
        <input type="text" name="id" id="id"/>
    </div>
    <div class="control">
        <label for="firstName">First Name</label>
        <input type="text" name="firstName" id="firstName"/>
    </div>
    <div class="control">
        <label for="lastName">Last Name</label>
        <input type="text" name="lastName" id="lastName"/>
    </div>
    <div class="control">
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="info@gmail.com"/>
    </div>
    <div class="control">
        <label for="confirmEmail">Confirm Email</label>
        <input type="text" name="confirmEmail" id="confirmEmail" value="info@gmail.com"/>
    </div>
    <div class="control">
        <label for="tel">Tel</label>
        <input type="text" name="tel" id="tel" value="012-345-678"/>
    </div>
    <div class="control">
        <label for="date">Date</label>
        <input type="text" name="date" id="date"/>
    </div>
    <div class="control">
        <input type="submit" name="submit" id="submit" value="Submit"/>
    </div>
</form>

Tích hợp jQuery validate:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="formValidation.js" type="text/javascript"></script>

Toàn bộ code validate sẽ viết trong formValidation.js
Khai báo 1 object validate config cơ bản:

var validateConfig = {
    rules: {
        "id": {
            required: true,
            minlength: 3,
            maxlength: 20,
            number: true
        },
        "firstName": {
            required: true
        },
        "lastName": {
            required: true
        },
        "email": {
            required: true,
            email: true
        },
        "confirmEmail": {
            required: true,
            email: true,
            equalTo: "#email"
        },
        "tel": {
            validateTel: "Telephone"
        }
    },
    messages: {
        "id": {
            required: "ID is required",
            number: "ID must be number"
        },
        "firstName": {
            required: "Name is required"
        },
        "lastName": {
            required: "Name is required"
        },
        "email": {
            required: "Email is required",
            email: "Email is format wrong"
        }
    }
};

Trong đó thuộc tính rule sẽ chứa các method validate cho cái trường được xác định qua thuộc tính name của trường.
Các method này có thể xem tại https://jqueryvalidation.org/category/methods/
Thuộc tính messages sẽ chứa nội dung thông báo lỗi theo từng rule của từng trường, nếu muốn dùng message default của jQuery validation thì không cần khai báo.
Áp dụng validate config này cho form:

var createForm = $('#createForm');
createForm.validate(validateConfig);
// Check whether form is valid
createForm.valid();

Bổ sung thêm rule dynamically:

$('#date').rules('add', {
    required: true,
    date: true,
    messages: {
        required: "Date is required",
        date: "Date format is wrong"
    }
});

Bổ sung thêm validate method:

$.validator.addMethod("validateTel",
    function (value, element, param) {
        if (!value) {
            this.message = param + " is empty";
            return false;
        }
        if (!value.match(/^[\d]{3}-[\d]{3}-[\d]{3}$/)) {
            this.message = param + " must be format as xxx-xxx-xxx";
            return false;
        }
        return true;
    },
    function () {
        return this.message;
    });

Một số event method:

// Whenever form submit success
submitHandler: function (form) {
    alert('Submit successful');
},
// Whenever form invalid
invalidHandler: function (event, validator) {
    var numberErrors = validator.numberOfInvalids();
    if (numberErrors) {
        alert('Total: ' + numberErrors + ' errors');
    }
},
errorPlacement: function (error, element) {
    alert(error[0].innerText);
}

Config error messages hiển thị ở element có sẵn:

errorLabelContainer: "#errorBlock",
errorElement: "label",
wrapper: "p",

Gom nhóm các validate field:

groups: {
    nameGroup: "firstName lastName"
},

Khi một trong các trường trong group không thõa mãn điều kiện validate thì message của trường không hợp lệ đầu tiên được hiển thị.
Config các thuộc tính liên quan đến validate behavior:

onfocusout: false,
onkeyup: false,
onclick: false,

File formValidation.js hoàn chỉnh:

Extra

Regex for Japanese

Coding

See the Pen jQuery Validation by Duc Dao (@ducdh) on CodePen.


Magento 2 Validation

https://github.com/magento/magento2/blob/2.3-develop/lib/web/mage/validation.js

Japanese Forms Regex

https://codepen.io/KUROKUMO/post/japanese-forms-regex-cheatsheet#numericals-0

References

https://jqueryvalidation.org/documentation/
https://viblo.asia/p/tim-hieu-ve-jquery-validation-phan-1-E375zEqRlGW

Go to top of page