Tôi có một mẫu với hai lĩnh vực đầu vào cần thiết:HTML5 thuộc tính cần một trong hai lĩnh vực
<form>
<input type="tel" name="telephone" required />
<input type="tel" name="mobile" required />
<input type="submit" value="Submit" />
</form>
Có thể để có được các trình duyệt để xác nhận như vậy chỉ một trong số họ là cần thiết? ví dụ: nếu điện thoại được lấp đầy, đừng ném lỗi về thiết bị di động bị trống và ngược lại
tôi đã chơi xung quanh với một số ý tưởng và bây giờ có một giải pháp làm việc cho vấn đề này sử dụng jQuery:
jQuery(function ($) {
var $inputs = $('input[name=telephone],input[name=mobile]');
$inputs.on('input', function() {
// Set the required property of the other input to false if this input is not empty.
$inputs.not(this).prop('required', !$(this).val().length);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
Telephone:
<input type="tel" name="telephone" value="" required />
<br />Mobile:
<input type="tel" name="mobile" value="" required />
<br />
<input type="submit" value="Submit" />
</form>này sử dụng sự kiện input trên cả hai đầu vào, và khi một người không có sản phẩm nào nó đặt thuộc tính bắt buộc của đầu vào khác thành false.
Tôi đã viết jQuery plugin gói mã JavaScript ở trên để mã có thể được sử dụng trên nhiều nhóm phần tử.
Với một số điều chỉnh nhất định cho yêu cầu của tôi, điều này đã làm việc rất tốt, cảm ơn .. – Anupam
Tốt hơn bạn nên xác thực dữ liệu biểu mẫu bằng Javascript, vì xác thực HTML5 không hoạt động trong các trình duyệt cũ hơn. Dưới đây là cách thực hiện:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Validation Phone Number</title>
</head>
<body>
<form name="myForm" action="data_handler.php">
<input type="tel" name="telephone">
<input type="tel" name="mobile">
<input type="button" value="Submit" onclick="validateAndSend()">
</form>
<script>
function validateAndSend() {
if (myForm.telephone.value == '' && myForm.mobile.value == '') {
alert('You have to enter at least one phone number.');
return false;
}
else {
myForm.submit();
}
}
</script>
</body>
</html>
.
Bản trình diễn trực tiếp tại đây: http://codepen.io/anon/pen/LCpue?editors=100. Hãy cho tôi biết nếu điều này làm việc cho bạn, nếu bạn sẽ.
Cảm ơn câu trả lời của bạn. Tuy nhiên, việc xác thực biểu mẫu được thực hiện ở phía máy chủ nên tôi không bận tâm về các trình duyệt cũ hơn. Xác thực biểu mẫu HTML5 là một cải tiến nâng cao cho người dùng có trình duyệt mới hơn mà tôi muốn sử dụng và hiển thị thông báo lỗi gốc của trình duyệt – Andy
Tôi nghĩ điều này sẽ nằm ngoài tầm kiểm soát của HTML và bạn sẽ phải triển khai một số chức năng JS. Google nhanh chóng hiển thị jsfiddle này http://jsfiddle.net/LEZ4r/1/ để bạn có thể có câu lệnh if để kiểm soát. Hy vọng điều này sẽ giúp ... – CheckeredMichael
Xem [** this **] (http://stackoverflow.com/a/10694930/3509874) answer! – urbz