Cách đây không lâu, tôi cần một cái gì đó rất giống ... và tôi đã nhận được nó.
Vì vậy, những gì tôi đặt ở đây là cách tôi thực hiện các thủ thuật để có thể gửi biểu mẫu bằng JavaScript mà không cần xác thực và chỉ thực hiện xác thực khi người dùng nhấn nút (thường là nút gửi).
Ví dụ tôi sẽ sử dụng một hình thức tối thiểu, chỉ với hai trường và nút gửi.
Hãy nhớ những gì đang muốn: Từ JavaScript, nó phải có thể được gửi mà không cần kiểm tra. Tuy nhiên, nếu người dùng nhấn nút như vậy, việc xác thực phải được thực hiện và chỉ gửi mẫu nếu vượt qua xác thực.
Thông thường tất cả sẽ bắt đầu từ một cái gì đó gần này (tôi đã loại bỏ tất cả những thứ không quan trọng):
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>
Xem làm thế nào thẻ biểu mẫu không có onsubmit="..."
(hãy nhớ rằng đó là một điều kiện không có nó).
Vấn đề là biểu mẫu luôn được gửi, bất kể onclick
trả về true
hay false
.
Nếu tôi thay đổi type="submit"
cho type="button"
, có vẻ như để làm việc nhưng không. Nó không bao giờ gửi biểu mẫu, nhưng điều đó có thể được thực hiện dễ dàng.
Vì vậy, cuối cùng tôi đã sử dụng điều này:
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>
Và trên function Validator
, ở đâu return True;
, tôi cũng thêm một câu gửi JavaScript, một cái gì đó tương tự như thế này:
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
}
}
Cái id=""
này chỉ dành cho JavaScript getElementById
, cái name=""
này chỉ để nó xuất hiện trên dữ liệu POST.
Trên đường như vậy nó hoạt động như tôi cần.
Tôi đặt cái này chỉ cho những người không cần onsubmit
chức năng trên biểu mẫu, nhưng thực hiện một số xác nhận khi người dùng nhấn nút.
Tại sao tôi không cần onsubmit trên thẻ mẫu? Thật dễ dàng, trên các phần JavaScript khác tôi cần thực hiện gửi nhưng tôi không muốn có bất kỳ xác nhận nào.
Lý do: Nếu người dùng là người thực hiện việc gửi tôi muốn và cần thực hiện xác thực, nhưng nếu đó là JavaScript đôi khi tôi cần thực hiện việc gửi trong khi xác thực như vậy sẽ tránh được.
Nghe có vẻ lạ, nhưng không phải khi suy nghĩ chẳng hạn: trên Đăng nhập ... với một số hạn chế ... như không cho phép sử dụng các phiên PHP và không cho phép cookie!
Vì vậy, bất kỳ liên kết phải được chuyển đổi để gửi mẫu như vậy, vì vậy dữ liệu đăng nhập không bị mất. Khi chưa đăng nhập xong, nó cũng phải hoạt động. Vì vậy, không có xác nhận phải được thực hiện trên các liên kết. Nhưng tôi muốn trình bày một thông báo cho người dùng nếu người dùng chưa nhập cả hai trường, người dùng và vượt qua. Vì vậy, nếu một trong những mất tích, hình thức không được gửi! có vấn đề
Xem vấn đề: không được gửi biểu mẫu khi một trường trống chỉ khi người dùng nhấn nút, nếu đó là mã JavaScript thì phải gửi được.
Nếu tôi thực hiện công việc trên onsubmit
thẻ biểu mẫu, tôi sẽ cần biết đó là người dùng hay JavaScript khác. Vì không có thông số nào có thể được thông qua, nên không thể trực tiếp, vì vậy một số người thêm một biến để cho biết có phải xác thực hay không. Điều đầu tiên về chức năng xác nhận là kiểm tra giá trị biến đó, v.v ... Quá phức tạp và mã không cho biết điều gì thực sự muốn.
Vì vậy, giải pháp là không có onsubmit trên thẻ biểu mẫu. Insead đặt nó ở nơi thực sự cần thiết, trên nút.
Mặt khác, tại sao lại đặt mã onsubmit vì về mặt khái niệm tôi không muốn xác thực onsubmit. Tôi thực sự muốn xác nhận nút.
Không chỉ mã rõ ràng hơn, đó là nơi nó phải được. Chỉ cần nhớ điều này: - Tôi không muốn JavaScript xác thực biểu mẫu (phải luôn được PHP thực hiện ở phía máy chủ) - Tôi muốn hiển thị cho người dùng một thông báo cho biết tất cả các trường không được để trống, cần JavaScript (máy khách bên)
Vậy tại sao một số người (nghĩ hoặc nói với tôi) nó phải được thực hiện khi xác nhận onsumbit? Không, về mặt khái niệm tôi không thực hiện xác nhận onsumbit ở phía khách hàng. Tôi chỉ đang làm một cái gì đó trên một nút được nhấn, vậy tại sao không để điều đó được thực hiện?
Vâng, mã và phong cách thực hiện các thủ thuật hoàn hảo. Trên bất kỳ JavaScript nào tôi cần gửi biểu mẫu tôi vừa đặt:
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
Và điều đó bỏ qua xác nhận khi tôi không cần nó. Nó chỉ gửi biểu mẫu và tải một trang khác, v.v.
Nhưng nếu người dùng nhấp vào nút gửi (còn gọi là type="button"
không type="submit"
) thì việc xác thực được thực hiện trước khi để biểu mẫu được gửi và nếu không hợp lệ thì không được gửi.
Cũng hy vọng điều này sẽ giúp những người khác không thử mã dài và phức tạp. Chỉ cần không sử dụng onsubmit
nếu không cần thiết, và sử dụng onclick
. Nhưng chỉ cần nhớ thay đổi type="submit"
thành type="button"
và xin đừng quên thực hiện submit()
bằng JavaScript.