cách kiểm tra xem biểu mẫu có hợp lệ theo chương trình hay không bằng cách sử dụng Plugin xác thực jQuery

Tôi có một biểu mẫu với một vài nút và tôi đang sử dụng Plugin xác thực jQuery từ http://jquery.bassistance.de/validate/ . Tôi chỉ muốn biết liệu có cách nào tôi có thể kiểm tra xem biểu mẫu có được coi là ở trạng thái hợp lệ hay không bằng plugin xác thực jquery từ bất kỳ đâu trong mã javascript của tôi.

Sử dụng .valid()từ plugin jQuery Validation:

$("#form_id").valid();

Kiểm tra xem biểu mẫu đã chọn có hợp lệ hay không hoặc liệu tất cả các phần tử đã chọn có hợp lệ hay không. validate () cần được gọi trên biểu mẫu trước khi kiểm tra nó bằng phương pháp này.

Trong đó biểu mẫu với id='form_id'là biểu mẫu đã được .validate()gọi trên nó.

Câu trả lời năm 2015: chúng tôi đã có điều này trên các trình duyệt hiện đại, chỉ cần sử dụng API HTML5 CheckValidity từ jQuery. Tôi cũng đã tạo một mô-đun jquery-html5-valid để thực hiện việc này:

npm install jquery-html5-validity

Sau đó:

var $ = require('jquery')
require("jquery-html5-validity")($);

thì bạn có thể chạy:

$('.some-class').isValid()

true

@mikemaccana câu trả lời rất hữu ích.

Và tôi cũng đã sử dụng https://github.com/ryanseddon/H5F . Tìm thấy trên http://microjs.com . Đó là một số loại polyfill và bạn có thể sử dụng nó như sau (jQuery được dùng trong ví dụ):

if ( $('form')[0].checkValidity() ) {
    // the form is valid
}

phương thức valid ().

http://docs.jquery.com/Plugins/Validation/valid

iContribute: Không bao giờ là quá muộn cho một câu trả lời đúng.

var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
  form.submit();
}else{
  console.log("Required field missing.");
}

Bằng cách này, xác thực HTML5 cơ bản cho các trường 'bắt buộc' sẽ diễn ra mà không ảnh hưởng đến quá trình gửi tiêu chuẩn bằng cách sử dụng các giá trị 'tên' của biểu mẫu.

Đối với một nhóm đầu vào, bạn có thể sử dụng phiên bản cải tiến dựa trên câu trả lời của @ mikemaccana

$.fn.isValid = function(){
    var validate = true;
    this.each(function(){
        if(this.checkValidity()==false){
            validate = false;
        }
    });
};

bây giờ bạn có thể sử dụng điều này để xác minh xem biểu mẫu có hợp lệ không:

if(!$(".form-control").isValid){
    return;
}

Bạn có thể sử dụng cùng một kỹ thuật để nhận được tất cả các thông báo lỗi:

$.fn.getVelidationMessage = function(){
    var message = "";
    var name = "";
    this.each(function(){
        if(this.checkValidity()==false){
            name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
            message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
        }
    })
    return message;
}

Đối với Magento, bạn kiểm tra xác thực của biểu mẫu bằng cách như bên dưới.

Bạn có thể thử điều này:

require(["jquery"], function ($) {
    $(document).ready(function () {
        $('#my-button-name').click(function () { // The button type should be "button" and not submit
            if ($('#form-name').valid()) {
                alert("Validation pass");
                return false;
            }else{
                alert("Validation failed");
                return false;
            }
        });
    });
});

Hy vọng điều này có thể giúp bạn!