Thuộc tính bắt buộc HTML5

81

Trong ứng dụng web của mình, tôi đang sử dụng một số xác thực tùy chỉnh cho các trường biểu mẫu của mình. Trong cùng một biểu mẫu, tôi có hai nút: một để thực sự gửi biểu mẫu và nút kia để hủy / đặt lại biểu mẫu.

Phần lớn tôi sử dụng Safari làm trình duyệt mặc định của mình. Bây giờ Safari 5 đã ra ngoài và đột nhiên nút hủy / đặt lại của tôi không hoạt động nữa. Mỗi khi tôi nhấn nút đặt lại, trường đầu tiên trong biểu mẫu của tôi sẽ được lấy tiêu điểm. Tuy nhiên, đây là hành vi giống như xác thực biểu mẫu tùy chỉnh của tôi. Khi thử nó với một trình duyệt khác, mọi thứ vẫn hoạt động tốt. Tôi đã phải là một vấn đề Safari 5.

Tôi đã thay đổi một chút mã Javascript của mình và tôi phát hiện ra rằng dòng sau đây đang gây ra sự cố:

document.getElementById("somefield").required = true;

Để chắc chắn đó thực sự là vấn đề, tôi đã tạo một kịch bản thử nghiệm:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>

<body>
    <form id="someform">
        <label>Name:</label>&nbsp;<input type="text" id="name" required="true" /><br/>
        <label>Car:</label>&nbsp;<input type="text" id="car" required="true" /><br/>
        <br/>
        <input type="submit" id="btnsubmit" value="Submit!" />
    </form>
</body>
</html>

Điều tôi mong đợi sẽ xảy ra đã xảy ra. Trường đầu tiên "tên" đã tự động lấy tiêu điểm.

Có ai khác tình cờ gặp phải điều này không?

html

— Joop
nguồn

2

Bây giờ không cần đặt thuộc tính bắt buộc thành true. Ví dụ: <input type = "text" id = "name" required = "true" /> và <input type = "text" id = "name" required /> giống nhau

— RSK

Đúng, đó là một thói quen xấu của tôi, khi tôi đã quen viết mã trong XHTML ... Nhưng có phải tất cả các trình duyệt hiện đại đều hỗ trợ thẻ này mà không có = "Required" không? Tôi tin rằng Safari không ...

— Loic Cara

Hành vi thực tế và mong đợi là gì?

— Ciro Santilli 郝海东冠状病六四事件法轮功

theo blog.grayghostvisuals.com/html/using-html-required-attribute "Nếu thuộc tính hiện diện, giá trị của nó phải là chuỗi trống hoặc giá trị không phân biệt chữ hoa chữ thường cho tên chuẩn của thuộc tính, không khoảng trắng đầu hoặc cuối. " cho các thuộc tính "boolean", do đó thay vì yêu cầu = "true" nên đã yêu cầu = "cần" hay chỉ cần

— George Birbilis

49

Tôi vừa gặp sự cố này với Safari 5 và nó đã xảy ra với Opera 10 một thời gian, nhưng tôi chưa bao giờ dành thời gian để khắc phục nó. Bây giờ tôi cần sửa nó và thấy bài đăng của bạn nhưng vẫn chưa có giải pháp về cách hủy biểu mẫu. Sau nhiều tìm kiếm, cuối cùng tôi đã tìm thấy một thứ:

http://www.w3.org/TR/html5/forms.html#attr-fs-formnovalidate

<input type=submit formnovalidate name=cancel value="Cancel">

Hoạt động trên Safari 5 và Opera 10.

— Darrik Spaude
nguồn

8

Bạn cũng có thể sử dụng novalidatethẻ biểu mẫu để thực hiện việc này cho toàn bộ biểu mẫu.

— Michael Mior

Tôi đã đóng gói một tiện ích mở rộng Chrome nhỏ thêm thuộc tính này vào tất cả các biểu mẫu trong tab hiện tại, cảm ơn vì mẹo này! chrome.google.com/webstore/detail/html5-form-validation-rem/…

— Damien

Là quan trọng đối với trường hợp của tôi, formnovalidatelàm việc với loại nút gửi quá: <button type="submit" formnovalidate>Submit</button>.

— Mayeenul Islam

256

Lưu ý rằng

<input type="text" id="car" required="true" />

là sai, nó phải là một trong số

<input type="text" id="car" required />
<input type="text" id="car" required="" />
<input type="text" id="car" required='' />
<input type="text" id="car" required=required />
<input type="text" id="car" required="required" />
<input type="text" id="car" required='required' />

Điều này là do truegiá trị gợi ý rằng falsegiá trị sẽ làm cho điều khiển biểu mẫu là tùy chọn, điều này không đúng trong trường hợp này.

— Ms2ger
nguồn

7

Câu trả lời này đúng, nhưng tôi nghĩ đó không phải là vấn đề mà chúng ta gặp phải ở đây.

— PhoneixS

cái này có an toàn để sử dụng không ... Ý tôi là tôi có nên sử dụng cái này hay chỉ bám vào xác thực javascript? bởi an toàn Tôi có nghĩa là, làm giải pháp sản phẩm này bất thường trên trình duyệt khác nhau / thiết bị ...

— kebyang

8

Tôi muốn chỉ ra rằng mã gốc không "sai", nó chỉ ngụ ý rằng bạn có thể sử dụng falseđể tạo một trường tùy chọn (không bắt buộc) - không phải vậy. Điều bạn phải hiểu là sự hiện diện của requiredthuộc tính làm cho trường bắt buộc. Cách duy nhất để làm cho trường trở thành tùy chọn là xóa thuộc tính. Và XÁC NHẬN BÊN MÁY CHỦ LÀ TẤT CẢ ĐỀU THỰC SỰ LÀ VẤN ĐỀ (xin lỗi vì đã la hét).

— Ryan Wheale

@RyanWheale Tôi nghĩ xác nhận phía khách hàng (trong khi không đủ bởi chính nó) thực sự quan trọng quá

— jinglesthula

1

@jinglesthula - Xác thực phía máy khách không có gì khác ngoài sự tiện lợi cho người dùng (tiết kiệm các chuyến đi khứ hồi đến máy chủ, dẫn đến UX tốt hơn). Tôi đã giải quyết một nhận xét trước đây "điều này có an toàn để sử dụng [trên các trình duyệt]" - và câu trả lời là nó không thực sự quan trọng miễn là xác thực phía máy chủ của bạn đang hoạt động (ví dụ: trình duyệt cũ hơn sẽ không nhận dạng HTML5 xác nhận và sẽ gửi trường "bắt buộc" có giá trị null).

— Ryan Wheale

19

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, thì thực tế là requiredthuộc tính dường như có hành vi mặc định trong Safari có khiến bạn bối rối không? Nếu vậy, hãy xem: http://w3c.github.io/html/sec-forms.html#the-required-attribute

required không phải là một thuộc tính tùy chỉnh trong HTML 5. Nó được định nghĩa trong thông số kỹ thuật và được sử dụng chính xác theo cách bạn hiện đang sử dụng.

CHỈNH SỬA : Chà, không chính xác . Như ms2ger đã chỉ ra, requiredthuộc tính này là thuộc tính boolean và đây là những gì thông số kỹ thuật HTML 5 nói về những điều đó:

Lưu ý: Các giá trị "true" và "false" không được phép trên các thuộc tính boolean. Để thể hiện một giá trị sai, thuộc tính phải được bỏ qua hoàn toàn.

Xem: http://w3c.github.io/html/infraosystem.html#sec-boolean-attributes

— David Foster
nguồn

2

Và đó là lý do tại sao chúng ta không nên tạo các thuộc tính hoặc thuộc tính tùy chỉnh trên các đối tượng tiêu chuẩn.

— Quentin

Bất kỳ ý tưởng nào về cách tắt tính năng này cho Chrome và Safari cho trang cụ thể?

— Restuta

@Restuta đi tới about: flags để tắt tính năng này trong Chrome. Firefox, tôi không chắc.

— therealklanni

8

Safari 7.0.5 vẫn không hỗ trợ thông báo xác thực các trường đầu vào.

Để khắc phục có thể viết đoạn mã dự phòng như sau: http://codepen.io/ashblue/pen/KyvmA

Để xem các tính năng HTML5 / CSS3 nào được trình duyệt hỗ trợ, hãy kiểm tra: http://caniuse.com/form-validation

function hasHtml5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') && 
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
    if(!hasHtml5Validation())
    {
        var isValid = true;
        var $inputs = $(this).find('[required]');
        $inputs.each(function(){
            var $input = $(this);
            $input.removeClass('invalid');
            if(!$.trim($input.val()).length)
            {
                isValid = false;
                $input.addClass('invalid');                 
            }
        });
        if(!isValid)
        {
            return false;
        }
    }
});

SASS / LESS:

input, select, textarea {
    @include appearance(none);
    border-radius: 0px;

    &.invalid {
        border-color: red !important;
    }
}

— Đánh giá Urtans
nguồn

Cảm ơn bạn. Điều này đã giúp tôi rất nhiều.

— theGreenCabbage,

Đó là CSS thuần túy hay Ít hơn?

— James A Mohler

Tôi có một chiếc iPod touch suốt đời của mình, vẫn cháy khi đầu vào được đánh dấu là bắt buộc không hoạt động và tìm thấy Câu hỏi và Đáp này. Câu trả lời này là câu trả lời duy nhất phù hợp với tôi. Chỉ nghĩ rằng tôi sẽ chia sẻ điều đó.

— Funk Forty Niner

7

Một lưu ý nhỏ về thuộc tính tùy chỉnh: HTML5 cho phép tất cả các loại thuộc tính tùy chỉnh, miễn là chúng có tiền tố là hạt data-, tức là data-my-attribute="true".

— Ludder
nguồn

1

Và những thứ này hoạt động tốt trong các trình duyệt cũ hơn (ngoại trừ bạn sẽ cần mã của riêng mình để truy cập các giá trị của chúng, thay vì API mới), vì vậy chúng là lựa chọn tốt hơn so với việc tạo ra các thuộc tính của riêng bạn (vì chúng sẽ không đụng độ với bất kỳ các thuộc tính chính thức được thêm vào trong tương lai).

— Paul D. Waite,

1

Trên thực tế, các thuộc tính tùy chỉnh theo nghĩa đen có thể là bất kỳ thứ gì. element.datasetTuy nhiên, những tiền tố có tiền tố "data-" sẽ xuất hiện trong đối tượng, cũng như các ưu điểm khác (ví dụ: jQuery sẽ tự động có thể lấy giá trị của bất kỳ thuộc tính tùy chỉnh có tiền tố "data-" nào bằng .data()phương thức, tức là .data("myAttribute")= giá trị của data-my-attribute). Sử dụng các thuộc tính tùy chỉnh ngắn hơn đôi khi có thể hữu ích để tạo bộ chọn CSS3 tùy chỉnh.

— therealklanni

3

Được chứ. Cùng lúc tôi viết ra câu hỏi của mình, một trong những đồng nghiệp của tôi đã cho tôi biết đây thực sự là hành vi HTML5. Xem http://dev.w3.org/html5/spec/Overview.html#the-required-attribute

Có vẻ như trong HTML5 có một thuộc tính mới "bắt buộc". Và Safari 5 đã có một triển khai cho thuộc tính này.

— Joop
nguồn

Mẹ kiếp, bạn đã trả lời câu hỏi của chính bạn trong vài giây sau khi tôi đăng cùng một câu trả lời!

— David Foster

Cảm ơn một trong những đồng nghiệp của tôi thực sự. Điều này có thể thú vị đối với những người khác, tôi cho là?

— Joop

Chắc chắn! Tôi rất vui khi thấy thông số kỹ thuật HTML5 cuối cùng sẽ phải cung cấp ở mặt trước biểu mẫu.

— David Foster

2

Chỉ cần đặt thông tin sau vào bên dưới biểu mẫu của bạn. Đảm bảo các trường đầu vào của bạn required.

<script>
    var forms = document.getElementsByTagName('form');
    for (var i = 0; i < forms.length; i++) {
        forms[i].noValidate = true;
        forms[i].addEventListener('submit', function(event) {
            if (!event.target.checkValidity()) {
                event.preventDefault();
                alert("Please complete all fields and accept the terms.");
            }
        }, false);
    }
</script>

— tính emotality
nguồn