my form like the picture and my validate script is below
//Validation
jQuery(document).ready(function () {
jQuery.extend(jQuery.validator.messages, {
required: "กรุณาใส่ข้อมูล.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date (ISO).",
number: "Please enter a number only.",
digits: "Please enter only digits.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
maxlength: jQuery.validator.format("ใส่ขั้นต่ำ {0} ตัว."),
minlength: jQuery.validator.format("ใส่มากสุดได้ {0} ตัว."),
rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
range: jQuery.validator.format("Please enter a value between {0} and {1}."),
max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
min: jQuery.validator.format("Please enter a value greater than or equal to {0}."),
});
$.validator.setDefaults({
ignore: [],
});
var form = $("#formRegister");
form.each(function () {
var elem = $(this);
elem.validate({
errorClass: "is-invalid",
validClass: "is-valid",
errorElement: "div",
focusInvalid: true,
messages: {
payerUser: {
remote: "มีชื่อ ID นี้ในระบบแล้วลองใช้ชื่อใหม่",
minlength: "ใส่ขั้นต่ำ {0} ตัวอักษรขึ้นไป"
},
payerPasswordConfirm: {
equalTo: "ใส่ให้เหมือนกับ ช่องรหัสผ่าน"
}
},
rules: {
payerUser: {
required: true,
minlength: 4,
remote: {
url: "/auth/ajaxCheckRegisterEmail",
type: "POST",
dataType: "json",
data: "payer_email=" + $("#payerUser").val(),
dataFilter: function (data) {
//console.log(data);
//var json = JSON.parse(data);
return data.success;
},
beforeSend: function (xhr, opts) {
//console.log( $('#payerEmail').val());
//console.log( opts );
opts.data = "payer_email=" + $("#payerUser").val();
},
},
},
payerName: { required: true },
payerPassword: {
required: true,
minlength: 6,
maxlength: 12
},
payerPasswordConfirm: {
required: true,
equalTo: "#payerPassword",
},
code: {
required: true,
},
},
errorPlacement: function (error, element) {
element.parent().append(error);
$("#btnReg").html("ลงทะเบียน");
},
invalidHandler: function (elem, validator) {
$("html, body").stop(true, false).animate({
scrollTop: $(validator.errorList[0].element).offset().top - 200
}, 1500, "easeInOutExpo");
$("#btnReg").html("ลงทะเบียน");
},
submitHandler: function(form) {
jQuery('input,textarea,select', form).attr('readonly', 'readonly');
console.log("pass");
//$(form).submit();
return true;
}
});
});
});