248
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Làm thế nào tôi có thể ngăn chặn trang làm mới khi nhấn nút Gửi mà không có bất kỳ dữ liệu nào trong các trường?
Việc xác thực được thiết lập hoạt động tốt, tất cả các trường đều đỏ nhưng sau đó trang được làm mới ngay lập tức. Kiến thức của tôi về JS là tương đối cơ bản.
Cụ thể tôi nghĩ rằng hàm $("#prospects_form").submit(function(e) { e.preventDefault(); }); 4 ở phía dưới là 'xấu'.
HTML
<form id="prospects_form" method="post"> <input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" /> <input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" /> <input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" /> <textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea> <button id="form_send" tabindex="5" class="btn" type="submit" title="return processForm()">Send</button> <div id="form_validation"> <span class="form_captcha_code"></span> <input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" /> </div> <div class="clearfix"></div> </form>JS
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// });Đã hỏi ngày 18 tháng 10 năm 2013 lúc 16:15Oct 18, 2013 at 16:15
0
Bạn có thể ngăn biểu mẫu gửi với
$("#prospects_form").submit(function(e) { e.preventDefault(); });Tất nhiên, trong chức năng, bạn có thể kiểm tra các trường trống và nếu có bất cứ điều gì không đúng, $("#prospects_form").submit(function(e) { e.preventDefault(); }); 5 sẽ dừng gửi.
Không có jQuery:
var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm);Đã trả lời ngày 18 tháng 10 năm 2013 lúc 16:16Oct 18, 2013 at 16:16
OvercodeOvercodeOvercode
3,8441 Huy hiệu vàng20 Huy hiệu bạc24 Huy hiệu đồng1 gold badge20 silver badges24 bronze badges
5
Thêm mã $("#prospects_form").submit(function(e) { e.preventDefault(); }); 6 này:
<form onsubmit="return false">Điều đó đã sửa nó cho tôi. Nó vẫn sẽ chạy chức năng title bạn chỉ định.
Đã trả lời ngày 31 tháng 3 năm 2014 lúc 21:27Mar 31, 2014 at 21:27
user3413723user3413723user3413723
10k6 huy hiệu vàng 50 huy hiệu bạc62 huy hiệu đồng6 gold badges50 silver badges62 bronze badges
4
Thay thế loại nút thành $("#prospects_form").submit(function(e) { e.preventDefault(); }); 7:
<button type="button">My Cool Button</button>Đã trả lời ngày 18 tháng 10 năm 2013 lúc 16:18Oct 18, 2013 at 16:18
Vicky Gonsalvesvicky GonsalvesVicky Gonsalves
11.4K2 Huy hiệu vàng36 Huy hiệu bạc58 Huy hiệu Đồng2 gold badges36 silver badges58 bronze badges
5
Một cách tuyệt vời để tránh tải lại trang khi gửi bằng biểu mẫu là thêm $("#prospects_form").submit(function(e) { e.preventDefault(); }); 8 với thuộc tính onSubmit của bạn.
<form onsubmit="yourJsFunction();return false"> <input type="text"/> <input type="submit"/> </form>
Vegas
7.2571 Huy hiệu vàng10 Huy hiệu bạc13 Huy hiệu đồng1 gold badge10 silver badges13 bronze badges
Đã trả lời ngày 26 tháng 7 năm 2019 lúc 20:43Jul 26, 2019 at 20:43
3
Bạn có thể sử dụng mã này để gửi biểu mẫu mà không cần làm mới trang. Tôi đã làm điều này trong dự án của tôi.
$(function () { $('#myFormName').on('submit',function (e) { $.ajax({ type: 'post', url: 'myPageName.php', data: $('#myFormName').serialize(), success: function () { alert("Email has been sent!"); } }); e.preventDefault(); }); });Đã trả lời ngày 11 tháng 1 năm 2014 lúc 5:48Jan 11, 2014 at 5:48
safeer008safeer008safeer008
3234 Huy hiệu bạc8 Huy hiệu Đồng4 silver badges8 bronze badges
1
Vấn đề này trở nên phức tạp hơn khi bạn cung cấp cho người dùng 2 khả năng để gửi biểu mẫu:
- bằng cách nhấp vào nút ad hoc
- bằng cách nhấn vào khóa nhập
Trong trường hợp như vậy, bạn sẽ cần một chức năng phát hiện phím được nhấn trong đó bạn sẽ gửi biểu mẫu nếu phím Enter được nhấn.
Và bây giờ vấn đề với IE (trong mọi trường hợp phiên bản 11) Nhận xét: Vấn đề này không tồn tại với Chrome cũng như với Firefox!
- Khi bạn nhấp vào nút Gửi, biểu mẫu được gửi một lần; khỏe.
- Khi bạn nhấn Enter, biểu mẫu được gửi hai lần ... và servlet của bạn sẽ được thực thi hai lần. Nếu bạn không có máy chủ Kiến trúc PRG (Post Redirect GET) thì kết quả có thể bất ngờ.
Mặc dù giải pháp trông tầm thường, nhưng tôi đã mất nhiều giờ để giải quyết vấn đề này, vì vậy tôi hy vọng nó có thể hữu ích cho những người khác. Giải pháp này đã được thử nghiệm thành công, trong số các giải pháp khác, trên IE (v 11.0.9600.18426), FF (v 40.03) & Chrome (v 53.02785.143 m 64 bit)
Mã nguồn HTML & JS nằm trong đoạn trích. Nguyên tắc được mô tả ở đó. Cảnh báo:
Bạn không thể kiểm tra nó trong đoạn trích vì hành động bài đăng không được xác định và nhấn phím Enter có thể can thiệp với StackOverflow.
Nếu bạn phải đối mặt với vấn đề này, thì chỉ cần sao chép/dán mã JS vào môi trường của bạn và điều chỉnh nó theo ngữ cảnh của bạn.
/* * inForm points to the form */ var inForm = document.getElementById('idGetUserFrm'); /* * IE submits the form twice * To avoid this the boolean isSumbitted is: * 1) initialized to false when the form is displayed 4 the first time * Remark: it is not the same event as "body load" */ var isSumbitted = false; function checkEnter(e) { if (e && e.keyCode == 13) { inForm.submit(); /* * 2) set to true after the form submission was invoked */ isSumbitted = true; } } function onSubmit () { if (isSumbitted) { /* * 3) reset to false after the form submission executed */ isSumbitted = false; return false; } }<!DOCTYPE html> <html> <body> <form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()"> First name:<br> <input type="text" name="firstname" value="Mickey"> <input type="submit" value="Submit"> </form> </body> </html>
Đã trả lời ngày 11 tháng 10 năm 2016 lúc 20:06Oct 11, 2016 at 20:06
Giải pháp tốt nhất là onsubmit gọi bất kỳ chức năng nào bạn muốn và trả lại sai sau khi nó.
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 0Đã trả lời ngày 6 tháng 11 năm 2019 lúc 8:56Nov 6, 2019 at 8:56
AtiqgauriatiqgauriAtiqGauri
1.26311 huy hiệu bạc23 Huy hiệu đồng11 silver badges23 bronze badges
Hầu hết mọi người sẽ ngăn chặn biểu mẫu gửi bằng cách gọi hàm $("#prospects_form").submit(function(e) { e.preventDefault(); }); 9.
Một phương tiện khác là xóa thuộc tính title của nút và lấy mã trong $("#prospects_form").submit(function(e) { e.preventDefault(); }); 4 thành var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 1 vì var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 2 khiến biểu mẫu không gửi. Ngoài ra, làm cho các chức năng var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 3 trả về Boolean dựa trên tính hợp lệ, để sử dụng trong var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 4
________ 35 Câu trả lời là giống nhau, chỉ dễ tiêu hóa hơn.
(Nhân tiện, tôi chưa quen với Stackoverflow, xin vui lòng cho tôi hướng dẫn.)
Đã trả lời ngày 18 tháng 10 năm 2013 lúc 16:48Oct 18, 2013 at 16:48
1
Trong JavaScript thuần túy, sử dụng: $("#prospects_form").submit(function(e) { e.preventDefault(); }); 5
$("#prospects_form").submit(function(e) { e.preventDefault(); }); 5 được sử dụng trong jQuery nhưng hoạt động trong JavaScript.
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 1Đã trả lời ngày 1 tháng 3 năm 2018 lúc 18:10Mar 1, 2018 at 18:10
DekedekeDeke
4.2663 Huy hiệu vàng41 Huy hiệu bạc61 Huy hiệu Đồng3 gold badges41 silver badges61 bronze badges
Cá nhân tôi muốn xác thực biểu mẫu khi gửi và nếu có lỗi, chỉ cần trả về sai.
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 2//jsfiddle.net/dfyXY/
Đã trả lời ngày 18 tháng 10 năm 2013 lúc 16:27Oct 18, 2013 at 16:27
Sqramsqramsqram
6.8998 Huy hiệu vàng46 Huy hiệu bạc63 Huy hiệu Đồng8 gold badges46 silver badges63 bronze badges
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 3
Đã trả lời ngày 5 tháng 9 năm 2018 lúc 8:17Sep 5, 2018 at 8:17
AlexalexAlex
8.30627 Huy hiệu vàng95 Huy hiệu bạc152 Huy hiệu Đồng27 gold badges95 silver badges152 bronze badges
Cách tốt nhất để làm như vậy với JS là sử dụng hàm centredefault (). Xem xét mã bên dưới để tham khảo:
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 4Đã trả lời ngày 11 tháng 11 năm 2020 lúc 17:09Nov 11, 2020 at 17:09
1
Nếu bạn muốn sử dụng JavaScript thuần túy thì đoạn trích sau đây sẽ tốt hơn bất cứ thứ gì khác.
Suppose:
HTML::
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 5Hy vọng vì vậy nó hoạt động cho bạn !!
Đã trả lời ngày 11 tháng 1 năm 2018 lúc 5:44Jan 11, 2018 at 5:44
Chỉ cần sử dụng "JavaScript:" trong thuộc tính hành động của bạn nếu bạn không sử dụng hành động.
Đã trả lời ngày 8 tháng 6 năm 2019 lúc 12:36Jun 8, 2019 at 12:36
1
Theo tôi, hầu hết các câu trả lời đang cố gắng giải quyết vấn đề được hỏi về câu hỏi của bạn, nhưng tôi không nghĩ đó là cách tiếp cận tốt nhất cho kịch bản của bạn.
Làm thế nào tôi có thể ngăn chặn trang làm mới khi nhấn nút Gửi mà không có bất kỳ dữ liệu nào trong các trường?
Một var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 8 thực sự không làm mới trang. Nhưng tôi nghĩ rằng một var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 9 đơn giản trên các trường bạn muốn có dữ liệu, sẽ giải quyết vấn đề của bạn.
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 6Lưu ý thẻ var form = document.getElementById("myForm"); function handleForm(event) { event.preventDefault(); } form.addEventListener('submit', handleForm); 9 được thêm vào cuối mỗi <form onsubmit="return false"> 1. Kết quả sẽ giống nhau: không làm mới trang mà không có bất kỳ dữ liệu nào trong các trường.
Đã trả lời ngày 22 tháng 5 năm 2020 lúc 8:36May 22, 2020 at 8:36
ZebianozebianoZebiano
3537 Huy hiệu bạc12 Huy hiệu Đồng7 silver badges12 bronze badges
0
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 7
Đã trả lời ngày 2 tháng 12 năm 2020 lúc 0:17Dec 2, 2020 at 0:17
1
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 8
Không kiểm tra cách nó hoạt động. Bạn cũng có thể liên kết (cái này) vì vậy nó sẽ hoạt động như JQuery AjaxForm
Sử dụng nó như:
$(document).ready(function() { // Add active class to inputs $("#prospects_form .boxsize").focus(function() { $(this).addClass("hasText"); }); $("#form_validation .boxsize").focus(function() { $(this).parent().addClass("hasText"); }); // Remove active class from inputs (if empty) $("#prospects_form .boxsize").blur(function() { if ( this.value === "") { $(this).removeClass("hasText"); } }); $("#form_validation .boxsize").blur(function() { if ( this.value === "") { $(this).parent().removeClass("hasText"); } }); /////////////////// // START VALIDATION $("#prospects_form").ready(function() { // DEFINE GLOBAL VARIABLES var valName = $('#form_name'), valEmail = $("#form_email"), valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, valMsg = $('#form_message'), valCaptcha = $('#form_captcha'), valCaptchaCode = $('.form_captcha_code'); // Generate captcha function randomgen() { var rannumber = ""; // Iterate through 1 to 9, 4 times for(ranNum=1; ranNum<=4; ranNum++){ rannumber+=Math.floor(Math.random()*10).toString(); } // Apply captcha to element valCaptchaCode.html(rannumber); } randomgen(); // CAPTCHA VALIDATION valCaptcha.blur(function() { function formCaptcha() { if ( valCaptcha.val() == valCaptchaCode.html() ) { // Incorrect valCaptcha.parent().addClass("invalid"); return false; } else { // Correct valCaptcha.parent().removeClass("invalid"); return true; } } formCaptcha(); }); // Remove invalid class from captcha if typing valCaptcha.keypress(function() { valCaptcha.parent().removeClass("invalid"); }); // EMAIL VALIDATION (BLUR) valEmail.blur(function() { function formEmail() { if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" ) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmail(); }); // Remove invalid class from email if typing valEmail.keypress(function() { valEmail.removeClass("invalid"); }); // VALIDATION ON SUBMIT $('#prospects_form').submit(function() { console.log('user hit send button'); // EMAIL VALIDATION (SUBMIT) function formEmailSubmit() { if (!valEmailFormat.test(valEmail.val())) { // Incorrect valEmail.addClass("invalid"); } else { // Correct valEmail.removeClass("invalid"); } } formEmailSubmit(); // Validate captcha function formCaptchaSubmit() { if( valCaptcha.val() === valCaptchaCode.html() ) { // Captcha is correct } else { // Captcha is incorrect valCaptcha.parent().addClass("invalid"); randomgen(); } } formCaptchaSubmit(); // If NAME field is empty function formNameSubmit() { if ( valName.val() === "" ) { // Name is empty valName.addClass("invalid"); } else { valName.removeClass("invalid"); } } formNameSubmit(); // If MESSAGE field is empty function formMessageSubmit() { if ( valMsg.val() === "" ) { // Name is empty valMsg.addClass("invalid"); } else { valMsg.removeClass("invalid"); } } formMessageSubmit(); // Submit form (if all good) function processForm() { if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() ) { $("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php"); $("#form_send").attr("type", "submit"); return true; } else if( !formEmailSubmit() ) { valEmail.addClass("invalid"); return false; } else if ( !formCaptchaSubmit() ) { valCaptcha.parent().addClass("invalid"); return false; } else if ( !formNameSubmit() ) { valName.addClass("invalid"); return false; } else if ( !formMessageSubmit() ) { valMsg.addClass("invalid"); return false; } else { return false; } } }); }); // END VALIDATION ///////////////// }); 9nó trả về các nút để bạn có thể làm một cái gì đó như gửi ví dụ về tôi
Cho đến nay là sự hoàn hảo nhưng giả sử là hoạt động, bạn nên thêm xử lý lỗi hoặc xóa điều kiện vô hiệu hóa
Đã trả lời ngày 31 tháng 7 năm 2018 lúc 8:46Jul 31, 2018 at 8:46
Đôi khi E.PreventDefault (); Công việc sau đó các nhà phát triển hạnh phúc nhưng đôi khi không hoạt động thì các nhà phát triển buồn thì tôi tìm thấy giải pháp tại sao đôi khi không hoạt độnge.preventDefault(); works then developers are happy but sometimes not work then developers are sad then I found solution why sometimes not works
Mã đầu tiên đôi khi hoạt động
$("#prospects_form").submit(function(e) { e.preventDefault(); });Tùy chọn thứ hai tại sao không hoạt động? Điều này không hoạt động vì JQuery hoặc thư viện JavaScript khác không tải đúng cách, bạn có thể kiểm tra nó trong bảng điều khiển rằng tất cả các tệp jquery và javascript được tải đúng cách hay không.
Điều này giải quyết vấn đề của tôi. Tôi hy vọng điều này sẽ hữu ích cho bạn.
Đã trả lời ngày 20 tháng 11 năm 2019 lúc 12:41Nov 20, 2019 at 12:41
Tôi hy vọng đây sẽ là câu trả lời cuối cùng
$("#prospects_form").submit(function(e) { e.preventDefault(); }); 1$("#prospects_form").submit(function(e) { e.preventDefault(); }); 2Đã trả lời ngày 5 tháng 6 năm 2020 lúc 13:07Jun 5, 2020 at 13:07
1
Bạn có thể làm điều này bằng cách xóa trạng thái như dưới đây. Thêm điều này vào rất bắt đầu chức năng tài liệu.
$("#prospects_form").submit(function(e) { e.preventDefault(); }); 3Đã trả lời ngày 23 tháng 5 lúc 9:40May 23 at 9:40