Xác thực tất cả các trường cùng một lúc bằng HTML5 thay vì một lần tại một thời điểm

Có cách nào để làm cho HTML5 xác thực tất cả các trường cùng một lúc thay vì một trường cùng một lúc không?Xác thực tất cả các trường cùng một lúc bằng HTML5 thay vì một lần tại một thời điểm

Sử dụng một vài dòng mã JavaScript là OK nhưng tôi thực sự không muốn sử dụng toàn bộ mô-đun cho việc này.

Tôi đã tìm kiếm khá một chút nhưng không thể tìm thấy giải pháp sạch cho việc này.

Đây là một mẫu:

<html> 
    <head> 
     <title>Validation Test</title> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <form action="" id="myForm" method="post"> 
     <input id="name" name="name" required type="text"> 
     <input id="phone" name="phone" required type="text"> 
     <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

Css file:

input:focus:required:invalid { 
    border: 2px solid red !important; 
}

Các bài gợi ý như là một bản sao có thể là vì có nhiều điều kiện xác nhận cho một lĩnh vực, Tôi tìm cách xác thực/hiển thị tất cả các trường không hợp lệ cùng một lúc.

Nguồn

2015-09-29 Mankind1023

thể trùng lặp của [làm thế nào để thực hiện nhiều xác nhận đầu vào sử dụng HTML5?] (Http://stackoverflow.com/questions/14114267/how-to-make-multiple-input-validation-using-html5) – halfzebra

Cảm ơn, nhưng bài đăng đó là để có nhiều điều kiện xác thực cho một trường, tôi đang tìm cách xác thực/hiển thị tất cả các trường không hợp lệ cùng một lúc. – Mankind1023

Bạn chỉ đang thực hiện xác thực cơ bản (không có trường rỗng), hoặc một cái gì đó phức tạp hơn? –

Nếu bạn không muốn sử dụng jQuery, đó là tốt. Bạn có thể dễ dàng làm điều này với các trình xử lý sự kiện vani và bộ chọn DOM. Tôi đang sử dụng jQuery vì lợi ích của việc tiết kiệm thời gian cho tôi.

$('#myForm').on('submit', function() { 
    var $inputs = $(this).find(':input'), 
     isValid = true; 

    $inputs.each(function() { 
    if ($(this).val() == '') { 
     isValid = false; 
     $(this).addClass('error-control'); 
    } else { 
     $(this).removeClass('error-control'); 
    } 
    }); 

    return isValid 
});

Nguồn

2015-09-29 17:30:32

Điều này thực sự làm việc độc đáo với những gì tôi đã làm, cảm ơn. – Mankind1023

Sử dụng onSubmit trên thẻ Form:

Xem: http://www.w3schools.com/js/js_validation.asp

<form action="" id="myForm" method="post" onsubmit="return validateForm()">

Js:

function validateForm() { 
    // validate form here 
    // return false if there are errors 
    // return true to submit the form 
}

Nguồn

2015-09-29 17:25:41

Xác thực tất cả các trường cùng một lúc bằng HTML5 thay vì một lần tại một thời điểm

Trả lời

Các vấn đề liên quan