สิ่งที่คุณจะสร้าง

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นทีละขั้นตอนถึงวิธีสร้างผลงาน แบบฟอร์มการติดต่อโดยใช้ Bootstrap เฟรมเวิร์กส่วนหน้ายอดนิยมร่วมกับ AJAX และ PHP ที่นี่เราจะดูบางส่วนด้วย คุณสมบัติเพิ่มเติมเช่นเดียวกับแอนิเมชัน CSS แฟนซีบางรายการที่ใช้สไตล์ชีต animate.css การตรวจสอบรูปแบบในภายหลังผ่าน Javascript และการเพิ่มประสิทธิภาพ ความประทับใจทั่วไป ผู้ใช้ปลายทางโดยใช้เนื้อหาแบบอะซิงโครนัส

ในขณะที่เขียน เวอร์ชันล่าสุดของเฟรมเวิร์กคือ Bootstrap 3.3.5 และเป็นที่น่าสังเกตว่าคำสั่งนี้จะใช้ การประกอบตามปกติมีสิบสองคอลัมน์ เมื่อคุณอ่านบทแนะนำสอนการใช้งานนี้ ตรวจสอบให้แน่ใจว่าคุณใช้ส่วนย่อยและโค้ดล่าสุดตามที่แสดงในเอกสารประกอบ Bootstrap

โครงสร้างโดยประมาณไฟล์และโฟลเดอร์

ก่อนอื่นเราสร้าง ไดเรกทอรีรากและใส่มันเข้าไป ไฟล์ต่อไปนี้และโฟลเดอร์:

Bootstrap-แบบฟอร์ม: ├── css/ ├── รูปภาพ/ ├── js/ ├── scripts.js ├── php/ ├── process.php ├── index.html

เราจะต้องเพิ่มไลบรารีส่วนหน้าหลายอันที่จะช่วยเหลือเรา ดังนั้นอย่าอายและดาวน์โหลด (หรือเพิ่ม ลิงค์ภายนอกดังต่อไปนี้:

สมมติว่าเราดาวน์โหลดมันมา ที่เก็บข้อมูลในเครื่องและวางไว้ในโฟลเดอร์โปรเจ็กต์ โครงสร้างไฟล์โครงการของเราจะมีลักษณะดังนี้:

แบบฟอร์ม Bootstrap: ├── css/ ├── bootstrap.min.css ├── รูปภาพ/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min js ├── php/ ├── process.php ├── index.html

การตั้งค่าพื้นฐานของแบบฟอร์ม

เปิด index.html คัดลอกข้อมูลพื้นฐานต่อไปนี้ โครงสร้าง HTML:

แบบฟอร์มการติดต่อโดยใช้ Bootstrap 3.3.4 " ส่งข้อความถึงฉัน

นี่คือพื้นฐานของเรา เทมเพลต HTMLตามที่เราจะสร้างเนื้อหาแบบฟอร์ม คุณจะเห็นได้ว่าเราได้เชื่อมโยงทุกสิ่งที่จำเป็นแล้ว ไฟล์ซีเอสเอสและ JavaScript (โปรดทราบว่าสำหรับสิ่งนี้ ตัวอย่างที่เป็นรูปธรรมเราไม่ต้องการ bootstrap.js) เราได้รวมสิ่งนี้ไว้เพื่อทำให้การทำงานกับการสืบค้นสื่อใน Bootstrap ง่ายขึ้น JavaScript ถูกเขียนที่ด้านล่างของไฟล์เพื่อให้ส่วนหลักของแบบฟอร์มโหลดก่อน

ภายในแท็ก body เราได้รวม div ไว้กับคลาสของ col-sm-6 col-sm-offset-3 โดยพื้นฐานแล้วหมายความว่าบนหน้าจอขนาดเล็กขนาดเล็ก (เล็ก) เราต้องการแสดงคอลัมน์กว้าง 50% (สูงสุด 12 คอลัมน์) คลาส col-sm-offset-3 เพิ่มระยะขอบซ้าย 25% ดังนั้นการสร้างเลย์เอาต์ที่ใช้พื้นที่ครึ่งหนึ่ง หน้าจอที่มีอยู่และจัดให้อยู่ตรงกลาง ที่นี่เราได้เพิ่มแท็ก h3 และนั่นคือจุดเริ่มต้นของฐานของแบบฟอร์มของเรา ตรวจสอบให้แน่ใจว่าคุณใช้ ID กับแบบฟอร์มนี้เพื่อให้เราสามารถผูกเหตุการณ์ jQuery ในภายหลัง

ผู้ที่ไม่เสี่ยงจะไม่ดื่มแชมเปญ

เมื่อสร้างองค์ประกอบแบบฟอร์ม เราสามารถคัดลอก/วางหรือเขียนโค้ดต่อไปนี้ในแท็ก:

ชื่อ อีเมล ข้อความ ส่ง ข้อความ ส่งแล้ว!

ผู้ใช้จะโต้ตอบกับฟิลด์และปุ่มเหล่านี้ทั้งหมด div พาเรนต์กำหนดแถวคลาส - ไวยากรณ์ Bootstrap แบบคลาสสิก สร้างแถวขององค์ประกอบ col คอลัมน์ใน Bootstrap สร้างช่องว่างภายในหรือระยะห่าง - การเพิ่มเส้นรอบๆ คอลัมน์เหล่านั้นจะเป็นการลบช่องว่างด้านซ้ายและด้านขวาออก และคอลัมน์จะพอดีกับคอนเทนเนอร์หลักอย่างสมบูรณ์

เราได้สร้างสองคอลัมน์ด้วยคลาส col-sm-6 (50%) ซึ่งเราจะใช้เพื่อแยกแบบฟอร์มของเรา ในคอลัมน์แรก col-sm-6 เราสร้างป้ายกำกับและฟิลด์สำหรับชื่อ ในคอลัมน์ที่สองเป็นฟิลด์สำหรับ อีเมล- แต่ละรายการมีป้ายกำกับที่มีแอตทริบิวต์ที่สอดคล้องกันซึ่งอ้างอิงถึงฟิลด์ที่เกี่ยวข้อง แต่ละคอลัมน์เหล่านี้ถูกรวมไว้ในคลาสกลุ่มแบบฟอร์มซึ่งจัดกลุ่มป้ายกำกับและฟิลด์เข้าด้วยกันตามความหมาย และยังเพิ่มระยะขอบเล็กน้อยที่ด้านล่าง

วิชาการพิมพ์

Bootstrap ช่วยให้คุณใช้คลาสส่วนหัว H1-H6 คลาสเหล่านี้ช่วยเราใช้ องค์ประกอบแบบอินไลน์โดยไม่ต้องเพิ่ม ช่องว่างภายในเพิ่มเติมหรือการสร้างสรรค์ องค์ประกอบบล็อก- เราใช้คลาส H4 กับป้ายกำกับ โดยเพิ่มขนาดอย่างรวดเร็วและทำให้ชัดเจนยิ่งขึ้น

คลาสการควบคุมแบบฟอร์มที่ใช้กับแต่ละฟิลด์อินพุตช่วยให้สามารถขยายความยาวทั้งหมดของคอนเทนเนอร์ (100%) นอกจากนี้ยังเพิ่มสไตล์ที่หลากหลายเพื่อปรับปรุงให้อ่านข้อความได้ง่ายขึ้น (เพิ่มความสูงของข้อความ เพิ่มเส้นขอบ ฯลฯ)

หลังจากคอลัมน์เหล่านี้ เราจะเพิ่มช่องข้อความ อีกครั้ง เรารวมสิ่งนี้ไว้ในคลาส form-group และใช้สไตล์ที่คล้ายกันกับป้ายกำกับของเราและ ช่องข้อความเหมือนที่เราทำเมื่อก่อน

คำกระตุ้นการตัดสินใจ

และสุดท้าย เราก็เพิ่มปุ่ม Bootstrap มีหลายคลาสสำหรับ ปุ่มต่างๆด้วยสีและเงื่อนไขที่แตกต่างกัน เราตัดสินใจใช้ปุ่ม "สำเร็จ" (btn-success) ซึ่งโดยค่าเริ่มต้นจะมี สีเขียว- นอกจากนี้ เราจำเป็นต้องเพิ่มคลาส btn เพื่อรีเซ็ตสไตล์ปุ่มเริ่มต้น (เส้นขอบ ช่องว่างภายใน การจัดแนวข้อความ น้ำหนักแบบอักษร) เราใช้คลาส btn-lg ซึ่งขยายปุ่มและสุดท้ายคือคลาส pull-right เพื่อจัดตำแหน่งปุ่มไปทางขวา

หลังจากปุ่มของเรา เราได้เพิ่ม div ด้วย ID #msgSubmit และใช้คลาสต่อไปนี้: " h3 text-center Hidden " h3 สร้างส่วนหัวที่ใหญ่ขึ้น text-center (คุณคงเดาได้) ทำให้ศูนย์ข้อความอยู่ในแนวเดียวกัน และในที่สุด เราก็สร้างคลาสที่ซ่อนอยู่ซึ่งตั้งค่าคุณสมบัติทั้งสอง แสดงเป็น ไม่มีค่าเลยและคุณสมบัติการมองเห็นเป็นซ่อน (แสดง: ไม่มี; การมองเห็น: ซ่อน;)

การเพิ่มฟังก์ชั่นการส่ง

ดังที่คุณเห็นในเบราว์เซอร์ของคุณ เราได้สร้างฐานแบบฟอร์ม Bootstrap แต่จนถึงตอนนี้เธอไม่ได้ทำอะไรเลยอย่างแน่นอน ขั้นตอนต่อไปคือการสร้างฟังก์ชันที่รับอินพุตของผู้ใช้และส่งไปยังเราแบบอะซิงโครนัส คลาส PHPจดหมาย

เปิด scripts.js และคัดลอกโค้ดต่อไปนี้:

$("#contactForm").submit(function(event)( // ยกเลิกการส่งแบบฟอร์ม event.preventDefault(); sendForm(); ));

โค้ดชิ้นนี้เป็นตัวอย่างข้อมูล jQuery ที่ยอมรับฟังก์ชันส่งบน #contactForm id ของเรา (ตามที่กำหนดไว้ก่อนหน้านี้) เมื่อใช้ฟังก์ชันนี้ เราจะแยกวิเคราะห์ตัวแปรเหตุการณ์ ซึ่งจัดเก็บการดำเนินการของการส่งแบบฟอร์มไปยังฟังก์ชัน เหตุการณ์ event.preventDefault(); หยุดส่งข้อมูลแบบฟอร์มตามปกติเพื่อรีเฟรชเพจเนื่องจากไม่ได้ตั้งค่าการดำเนินการของแบบฟอร์ม ในที่สุด ฟังก์ชัน sendForm() ก็ถูกเรียก; -

ส่งแบบฟอร์ม();

ต่อไปเราจะสร้างฟังก์ชัน sendForm(); -

ฟังก์ชั่น sendForm())( // เริ่มต้นตัวแปรด้วยเนื้อหาแบบฟอร์ม var name = $("#name").val(); var email = $("#email").val(); var message = $("# ข้อความ ").val(); $.ajax(( ประเภท: "POST", url: "php/form-process.php", ข้อมูล: "name=" + name + "&email=" + email + "&message= " + ข้อความ สำเร็จ: function(text)( if (text == "success")( formSuccess(); ) ) ) function formSuccess())( $("#msgSubmit").removeClass("hidden"); )

ตัวแปรสามตัวเก็บค่าของอินพุตทั้งหมดจากแบบฟอร์มและกำหนดให้กับมัน ตัวแปรจาวาสคริปต์ซึ่งจะถูกนำมาใช้ในภายหลัง

เริ่มต้นวัตถุ AJAX ใน jQuery และตั้งค่าประเภท โพสต์คำขอ, URL คือลิงก์ไปยังไฟล์ PHP ข้อมูลที่เราต้องการส่ง และหากประมวลผลสำเร็จ ฟังก์ชั่นความสำเร็จจะถูกเรียกใช้ ข้อมูลประกอบด้วยตัวแปรทั้งสามตัวรวมกับ ID/ป้ายกำกับที่เกี่ยวข้อง ฟังก์ชันการโทรกลับจะถูกเรียกเมื่อวัตถุ Ajax ได้รับข้อมูลสำเร็จ สคริปต์ PHP- ฟังก์ชันเปรียบเทียบข้อความที่ส่งคืนและตรวจสอบว่าเท่ากับสตริง "success" หรือไม่ หากทุกอย่างถูกต้อง ฟังก์ชัน formSuccess จะทำงาน

ฟังก์ชัน formSuccess จะลบคลาสที่ซ่อนอยู่ออกจาก div ด้วย id #msgSubmit ที่เราใช้ก่อนหน้านี้ ดังนั้นจึงเผยให้เห็นข้อความ

การเชื่อมต่อฟังก์ชันเมล PHP

สิ่งที่เราต้องทำคือเขียน สคริปต์ PHPเพื่อรับข้อมูลและส่งข้อมูลของเราโดยใช้ในตัว ฟังก์ชั่น PHPจดหมาย เปิด process.php และเพิ่มโค้ดต่อไปนี้:

เช่นเดียวกับข้อมูลโค้ด jQuery ด้านบน เราสร้างและจัดเก็บตัวแปรที่เราต้องการใช้ จากฟังก์ชัน post เราได้รับตัวแปรอินพุตสามตัวและเขียนค่าลงในตัวแปร PHP เดียวกัน ตัวแปร $EmailTo – กำหนดไว้ล่วงหน้า ที่อยู่อีเมลซึ่งระบุไว้ในสคริปต์และส่งไปยังอีเมลของคุณจากแบบฟอร์ม $Subject คือสตริงที่ใช้เป็นหัวเรื่องของอีเมล

ข้อความหลักถูกสร้างขึ้นจากตัวแปรสามตัว ขั้นแรก ระบุว่าข้อความ “ชื่อ:” มาจากใคร จากนั้นจึงเพิ่มสัญลักษณ์การเปลี่ยนภาพ บรรทัดใหม่/n. (ขึ้นบรรทัดใหม่/ขึ้นบรรทัดใหม่) สิ่งนี้ถูกวนซ้ำและรวมกับตัวแปร $body

เพื่อส่งข้อความในที่สุด เราเขียนฟังก์ชันเพื่อส่งข้อความ ในตัวแปร $success เราจะส่งคืนผลลัพธ์ของการส่ง ซึ่งรวมถึง: ผู้รับ หัวเรื่อง ข้อความเนื้อหา และผู้ส่ง

เพื่อเริ่มต้นกระบวนการส่งอีเมล เราสามารถเรียกมันได้ในคำสั่ง if นอกจากนี้ยังช่วยตรวจสอบว่าทุกอย่างสำเร็จหรือไม่ ถ้า ฟังก์ชั่นจดหมายส่งคืนค่า "true" สคริปต์จะส่งกลับค่า "success" และหากเป็น false แสดงว่า "ไม่ถูกต้อง"

ผลลัพธ์นี้จะถูกส่งกลับไปยังออบเจ็กต์ AJAX และประมวลผลกลับไปยังฝั่งไคลเอ็นต์ ข้อดีของ AJAX คือทุกอย่างเกิดขึ้นแบบอะซิงโครนัสบนฝั่งไคลเอ็นต์ ทำให้ไคลเอ็นต์สามารถใช้ไซต์ในขณะที่ส่งข้อความได้

คำสั่งซื้อที่สมบูรณ์แบบ

โดยคำนึงถึงโครงสร้างพื้นฐานและ ฟังก์ชั่นแบบฟอร์มของเราในช่วงครึ่งแรกของบทช่วยสอนนี้ ตอนนี้เราจะพูดถึงวิธีให้คำติชมแก่ผู้ใช้โดยใช้วิธีต่างๆ ฟังก์ชั่นเพิ่มเติมที่เราสามารถเพิ่มได้ โดยเฉพาะเราจะพิจารณารูปแบบ ข้อเสนอแนะผ่านการจัดการข้อผิดพลาดทั้งฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์

เราจะใช้เครื่องมือบางอย่างเพื่อตรวจสอบความถูกต้องของแบบฟอร์มอีกครั้ง ซึ่งรวมถึง:

เพิ่มลงในโปรเจ็กต์เช่นเดียวกับที่เราทำก่อนหน้านี้กับ Bootstrap และ jQuery เครื่องมือเหล่านี้จะช่วยให้ผู้ใช้แสดงความคิดเห็นเมื่อส่งแบบฟอร์ม มีเครื่องมือและเฟรมเวิร์กมากมายสำหรับการตรวจสอบความถูกต้องของแบบฟอร์ม (รวมถึงเครื่องมือตรวจสอบ HTML5 ในตัว) แต่ฉันใช้ Bootstrap Validator เนื่องจากมันทำงานร่วมกับแบบฟอร์มปัจจุบันของเราได้ดี

โครงสร้างโครงการควรมีลักษณะดังนี้:

Bootstrap-แบบฟอร์ม: ├── css/ ├── bootstrap.min.css ├── animate.css ├── รูปภาพ/ ├── js/ ├── scripts.js ├── bootstrap.js ├── jquery- 1.11.2.min.js ├── validator.min.js ├── php/ ├── process.php ├── index.html

กำลังตรวจสอบแบบฟอร์มของเรา

เริ่มต้นด้วยการสร้างเครื่องมือตรวจสอบความถูกต้องเพื่อตรวจสอบแบบฟอร์มเมื่อมีการคลิกปุ่ม ย้อนกลับไปในไฟล์ scripts.js เราจำเป็นต้องแก้ไขโค้ดชิ้นแรกที่เรียกใช้ฟังก์ชัน sendForm() เมื่อส่งแบบฟอร์ม

ตอนนี้โค้ดมีลักษณะดังนี้:

$("#contactForm").validator().on("submit", function (event) ( if (event.isDefaultPrevented()) ( // handle the invalid form... ) else ( // ทุกอย่างดูดี! event.preventDefault(); ส่งแบบฟอร์ม();

โค้ดใหม่นี้จะตรวจสอบเพื่อดูว่า Bootstrap Validator พบข้อผิดพลาดใดๆ และหยุดกระบวนการหรือไม่ หากไม่เป็นเช่นนั้นเราจะดำเนินการต่อ เรายังจำเป็นต้องป้องกันการดำเนินการเริ่มต้น (การรีเฟรชหน้า) เมื่อส่งแบบฟอร์มสำเร็จ ดังนั้นเราจะบันทึกสิ่งนั้น

ตอนนี้เมื่อคุณคลิกที่ปุ่มส่งแบบฟอร์ม เมื่อกรอกไม่ครบถ้วน แบบฟอร์มจะถูกตรวจสอบความถูกต้องและช่องต่างๆ จะถูกไฮไลต์เป็นสีแดง ระบุสิ่งที่ต้องกรอก ง่ายมาก!

ในกระบวนการเพิ่มการตรวจสอบนี้ เราได้ลบหรือปิดใช้งานการตรวจสอบ HTML5 แบบเนทีฟ เราสามารถปรับปรุงการตรวจสอบของเราโดยการใส่ข้อความแสดงข้อผิดพลาด Bootstrap Validator มีฟีเจอร์ที่ยอดเยี่ยมที่ทำให้ง่ายต่อการแสดงข้อความแสดงข้อผิดพลาดข้างช่องป้อนข้อมูลแต่ละช่อง หากต้องการเพิ่ม คุณจะต้องเขียนโค้ด HTML เพิ่มเติม

ในแต่ละกลุ่มแบบฟอร์ม ภายใต้ช่องป้อนข้อมูล คุณต้องวางโค้ด html ต่อไปนี้:

ตัวอย่างเช่นที่นี่ บล็อกเพิ่มเติม div ถูกเพิ่มลงในฟิลด์ชื่อและอีเมล:

ชื่อ อีเมล์

ตอนนี้ เมื่อส่งแบบฟอร์มอีกครั้ง หากฟิลด์ว่างไว้ ข้อความแสดงข้อผิดพลาดควรปรากฏขึ้นตามค่าเริ่มต้น “กรุณากรอกข้อมูลในช่องนี้”- คุณสามารถเพิ่มข้อความแสดงข้อผิดพลาดที่กำหนดเองได้โดยการเพิ่มแอตทริบิวต์ "data-error" ลงในช่องป้อนข้อมูล ตัวอย่างเช่น:

มีคุณลักษณะอื่นๆ มากมาย เช่น รูปแบบนิพจน์ทั่วไป ที่สามารถนำไปใช้กับเครื่องมือตรวจสอบ Bootstrap ได้ คุณสามารถดูเพิ่มเติมได้บน Github

การเพิ่มภาพเคลื่อนไหว

การตรวจสอบลูกค้าของเราดูดีมาก เรามีไฮไลท์ที่เรียบร้อยของช่องว่างเปล่าที่เป็นสีแดง อย่างไรก็ตาม เป็นการดีที่จะเพิ่มภาพเคลื่อนไหวเพิ่มเติมลงในแบบฟอร์มและเพิ่ม ข้อความเพิ่มเติมแจ้งให้ผู้ใช้ทราบว่าเกิดอะไรขึ้น ขณะนี้เรามีข้อความ "ส่งข้อความแล้ว!",ซึ่งปรากฏเมื่อส่งสำเร็จ แต่ข้อความแสดงข้อผิดพลาดล่ะ?

เราจะเปลี่ยนโค้ดของเราให้เป็นแบบทั่วไปมากขึ้น โดยเปลี่ยนข้อความแสดงความสำเร็จให้ยอมรับข้อความแสดงข้อผิดพลาดด้วย

ก่อนอื่น เรามาลบข้อความกันก่อน “ส่งข้อความแล้ว!”จากโค้ด HTML แล้วปล่อยทิ้งไว้ บล็อกว่างเปล่า div:

ตอนนี้เราจำเป็นต้องสร้าง คุณลักษณะใหม่เพื่อประมวลผลสถานะข้อความ เพิ่มฟังก์ชันนี้ที่ส่วนท้ายของสคริปต์ scripts.js ของคุณ

ฟังก์ชั่น sendMSG(valid, msg)( var msgClasses; if(valid)( msgClasses = "h3 text-center tada Animated text-success"; ) else ( msgClasses = "h3 text-center text-danger"; ) $("# msgSubmit").removeClass().addClass(msgClasses).text(msg); )

ฟังก์ชันนี้รับสองอาร์กิวเมนต์ valid จะเป็นตัวแปรบูลีน: หากเป็นจริง ข้อความแสดงความสำเร็จจะปรากฏขึ้น หากเป็นเท็จ ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น msg มีข้อความที่จะแสดงใน div

ขั้นแรก ฟังก์ชันจะตรวจสอบว่าสำเร็จหรือล้มเหลวโดยการตรวจสอบค่าที่ถูกต้อง ไม่ว่าในกรณีใดตัวแปรจะถูกเขียน ชื่อที่ต้องการ คลาสซีเอสเอส(คุณต้องรวม h3 และ text-center อีกครั้ง เนื่องจากเราจะลบออกตามค่าเริ่มต้นในภายหลัง)

หมายเหตุ: เรากำลังใช้คลาส animate.css บางคลาส คลาสทาดาจะใช้ภาพเคลื่อนไหวเมื่อส่งข้อความสำเร็จ

สุดท้ายนี้ ฟังก์ชันจะลบคลาสทั้งหมดออกจาก #msgSubmit (หลีกเลี่ยงคลาสที่ขัดแย้งกัน) จากนั้นจึงเพิ่มคลาสที่ติดตั้งไว้ก่อนหน้านี้ จากนั้นเพิ่มข้อความภายใน องค์ประกอบ div.

ในแบบฟอร์มการตรวจสอบของเราที่เราอัปเดตเมื่อตอนต้นของส่วนนี้ เราสามารถเพิ่มการเรียกใช้ฟังก์ชันต่อไปนี้ภายในคำสั่ง if เมื่อเป็นจริง

SubmitMSG(false, "คุณกรอกแบบฟอร์มถูกต้องหรือไม่?");

ข้อความแสดงข้อผิดพลาดควรปรากฏขึ้นเมื่อส่งแบบฟอร์มที่มีฟิลด์ว่าง “คุณกรอกแบบฟอร์มถูกต้องหรือไม่”

ขั้นตอนสุดท้ายสำหรับฟังก์ชัน sendMSG ใหม่นี้คือการเรียกใช้เมื่อส่งข้อความสำเร็จแล้ว อัพเดตฟังก์ชัน formSuccess() ดังนี้:

$("#แบบฟอร์มการติดต่อ").รีเซ็ต(); sendMSG(true, "ส่งข้อความแล้ว!")

ขั้นแรก เราต้องการรีเซ็ตข้อมูลแบบฟอร์มและล้างค่าฟิลด์เมื่อส่งสำเร็จ จากนั้นเรียกใช้ฟังก์ชัน sendMSG ของเราเหมือนเดิม การส่งที่สำเร็จควรแสดงข้อความพร้อมเอฟเฟกต์ภาพเคลื่อนไหว tada จาก animate.css

เขย่า

อนิเมชั่นอีกเรื่องใช่ไหม? มาเพิ่มภาพเคลื่อนไหวอื่นสำหรับทั้งแบบฟอร์มเมื่อรายงานข้อผิดพลาด ภาพเคลื่อนไหว "กระวนกระวายใจ" น่าจะดูดีจริงๆ!

สร้างฟังก์ชันใหม่ทันทีหลังจาก formSuccess() และเรียกมันว่า formError()

ฟังก์ชัน formError())( $("#contactForm").removeClass().addClass("shake Animated").one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend Animationend", function())( $(this).removeClass(); )) )

ฟังก์ชันนี้ใช้วิธีการที่พบในหน้าสาธิต animate.css ซึ่งช่วยให้คุณสามารถเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบ จากนั้นจึงเรียกซ้ำ/เพิ่มซ้ำแล้วซ้ำอีก กับ ภาพเคลื่อนไหว CSSหนึ่งผูก ปัญหาเล็ก ๆหากคุณเพิ่มภาพเคลื่อนไหวให้กับองค์ประกอบหนึ่งครั้งแล้วลบสไตล์ แล้วเพิ่มอีกครั้ง ภาพเคลื่อนไหวจะไม่เกิดซ้ำ คุณสมบัตินี้ช่วยรีเซ็ตคลาสเมื่อแอนิเมชั่นเสร็จสมบูรณ์ จากนั้นให้คุณเพิ่มคลาสเหล่านั้นอีกครั้งได้ เมื่อผู้ใช้คลิกปุ่ม "ส่ง" บนแบบฟอร์มที่กรอกไม่ครบถ้วน เราต้องการให้ภาพเคลื่อนไหวกระวนกระวายใจ และถ้าเป็นฟอร์ม นิ่งกรอกไม่ถูกต้อง ภาพเคลื่อนไหวจำเป็นต้องทำงานอีกครั้ง

เราสามารถเรียกฟังก์ชัน formError() นี้เหนือฟังก์ชัน sendMSG() ได้ ตัวอย่างเช่น:

แบบฟอร์มข้อผิดพลาด(); sendMSG(false, "คุณกรอกแบบฟอร์มถูกต้องหรือไม่?");

ตอนนี้เมื่อเราส่งแบบฟอร์มเปล่า มันจะเกิดความกระวนกระวายใจเพื่อแจ้งให้ผู้ใช้ทราบว่ามีบางอย่างผิดปกติ

การตรวจสอบเพิ่มเติม

การตรวจสอบฝั่งไคลเอ็นต์ทั้งหมดนี้ดูดี แต่ผู้ใช้สามารถปิดใช้งานการวัดเหล่านี้ และส่งแบบฟอร์มที่มีฟิลด์ว่างโดยการแก้ไขโค้ดในเบราว์เซอร์ของตน ดังนั้นจึงควรเพิ่มการตรวจสอบฝั่งเซิร์ฟเวอร์เพื่อบันทึกทุกสิ่งที่หลุดรอด

เปิดไฟล์ process.php ของเรา เราต้องเปลี่ยนแปลงเล็กน้อย เพิ่มการตรวจสอบช่องว่าง หากไม่ว่างเปล่า เราจะส่งข้อความกลับไปยังส่วนหน้า เราจะสร้างตัวแปรชื่อ $errorMSG เพื่อบันทึกข้อผิดพลาดแล้วเปิดใช้งาน ตรวจสอบเพิ่มเติม$_โพสต์

โค้ด PHP นี้จะตรวจสอบว่าฟิลด์ว่างหรือไม่ก่อนที่จะเขียนลงในตัวแปรที่เกี่ยวข้อง (แทนที่โค้ดที่มีอยู่โดยการตั้งค่าตัวแปรจาก $_POST) หากว่างเปล่า เราจะสร้างข้อความพื้นฐานเพื่อส่งกลับไปยังไคลเอนต์ เราสามารถตรวจสอบได้ละเอียดกว่าแค่ตรวจสอบช่องว่าง (หากค่าสั้น/ยาวเกินไป เราก็จะตรวจสอบ การแสดงออกปกติ) ใน PHP และ JavaScript อย่างไรก็ตาม เพื่อความเรียบง่าย เราจะจำกัดตัวเองให้ตรวจสอบเฉพาะความว่างเปล่าเท่านั้น

คุณต้องส่งคืนข้อความไปยังฟังก์ชัน AJAX ที่จะแสดงในเบราว์เซอร์ เราจะแก้ไขเงื่อนไข if ที่เราสร้างไว้ก่อนหน้านี้ที่ด้านล่างของไฟล์ PHP

ในเงื่อนไข if ของเรา เรายังตรวจสอบเพื่อดูว่าตัวแปร $errorMSG ว่างเปล่า ("") หรือไม่ ซึ่งเป็นสิ่งที่เราใช้ในตัวแปร $success ในเงื่อนไขอื่นของเรา เราได้รวมการตรวจสอบเพิ่มเติมไว้ด้วย นี่เป็นเพียงการตรวจสอบ หากผลลัพธ์เป็นเท็จถูกส่งกลับในตัวแปร $success ก็จะถูกส่งกลับ “มีบางอย่างผิดพลาด:(“.มิฉะนั้น เราจะแสดงข้อความที่รวบรวมไว้เมื่อตรวจสอบค่าว่าง

ขั้นตอนสุดท้ายคือการยอมรับข้อความใหม่ใน AJAX และแสดงไว้ในแบบฟอร์ม เราจำเป็นต้องอัปเดตวัตถุ Ajax ในไฟล์ scripts.js ดังนี้:

$.ajax(( ประเภท: "POST", url: "php/form-process.php", ข้อมูล: "name=" + ชื่อ + "&email=" + อีเมล + "&message=" + ข้อความ, ความสำเร็จ: function( ข้อความ)( if (text == "success")( formSuccess(); ) else ( formError(); sendMSG(false,text); ) ) ));

เราเพิ่งอัปเดต สภาพอื่นซึ่งจะตรวจสอบว่า text == Success หรือไม่ ในอีกกรณีหนึ่ง เราเรียกว่าฟังก์ชัน formError() ซึ่งเปิดใช้งานภาพเคลื่อนไหวแบบสั่น ส่วนฟังก์ชัน sendMSG() จะแสดงข้อความจากไฟล์ PHP ข้อความที่ส่งคืนจะเป็นอย่างใดอย่างหนึ่ง “มีบางอย่างผิดพลาด :(”หรือข้อมูลเกี่ยวกับช่องว่าง

บทสรุป

ไปที่ Github เพื่อดูโค้ดทั้งหมดที่เราเขียน!

ขณะนี้แบบฟอร์มของเราให้ข้อเสนอแนะแก่ผู้ใช้และแสดงว่าช่องใดกรอกไม่ถูกต้องหรือว่างเปล่า ในแบบฟอร์มเราได้จัดเตรียมข้อความตามบริบทตามสถานะของค่าที่ส่งคืน ไฟล์ PHPและใช้ระดับการตรวจสอบเพิ่มเติมในฝั่งเซิร์ฟเวอร์ โดยจับผู้ใช้ที่ต้องการข้ามการตรวจสอบความถูกต้องส่วนหน้า

โดยรวมแล้ว ตอนนี้คุณมีรูปแบบที่มีชีวิตชีวาอยู่ในมือคุณแล้ว พร้อมที่จะจัดสไตล์และผสานรวมกับเว็บไซต์ของคุณ ฉันหวังว่าคุณจะสนุกกับบทช่วยสอนนี้ โปรดฝากคำถามหรือความคิดเห็นไว้ในความคิดเห็นด้านล่าง!

ขอให้เป็นวันที่ดีทุกคน Alexey Gulynin ติดต่ออยู่ ในบทความที่แล้ว คุณได้เรียนรู้ว่า Serialization คืออะไรใน php ในบทความนี้ ฉันอยากจะพูดถึงวิธีการทำงานกับแบบฟอร์มใน PHP ภาษาพีพีพีได้รับการออกแบบมาสำหรับการเขียนโปรแกรมสคริปต์เว็บ และการประมวลผลแบบฟอร์มอาจเป็นส่วนที่สำคัญที่สุดในกระบวนการนี้ ปัจจุบันนี้คุณไม่สามารถหาเว็บไซต์ที่ไม่มี เช่น การลงทะเบียนหรือแบบฟอร์มแสดงความคิดเห็น หรือแบบสอบถามได้ กระดานสนทนา ร้านค้าออนไลน์ แสดงความคิดเห็น ส่งข้อความถึง เครือข่ายทางสังคม- ทั้งหมดนี้คือการประมวลผลข้อมูลที่อยู่ในช่องแบบฟอร์ม ลองใช้ตัวอย่างเพื่อหาวิธีการประมวลผลแบบฟอร์มใน PHP
เราจะใช้งานง่ายๆ: เราต้องสร้าง 2 ฟิลด์ (ชื่อและนามสกุล) ส่งข้อมูลนี้ไปยังสคริปต์ action.php และด้วยเหตุนี้คำทักทาย "ยินดีต้อนรับ นามสกุล ชื่อ" ควรปรากฏขึ้น ส่วนใครที่ลืมไปแล้วว่าสร้างแบบฟอร์มอย่างไร และมีช่องอะไรบ้าง เข้าไปดูได้เลย มาสร้างไฟล์ test.html กัน:

ชื่อ: นามสกุล:

โปรดทราบว่าไฟล์ action.php (ในกรณีของเรา) จะต้องอยู่ในโฟลเดอร์เดียวกันกับไฟล์ test.html ที่นี่คุณสามารถระบุทั้งแบบสัมพันธ์และ เส้นทางที่แน่นอน- โปรดใช้ความระมัดระวัง ข้อผิดพลาดจำนวนมากเกี่ยวข้องกับการระบุเส้นทางไปยังสคริปต์ตัวจัดการแบบฟอร์มอย่างไม่ถูกต้อง

มาสร้างไฟล์ action.php โดยมีเนื้อหาดังต่อไปนี้:

หากตอนนี้เราเปิดไฟล์ test.html กรอกข้อมูลในฟิลด์แบบฟอร์มแล้วคลิกที่ปุ่มเราจะไปสิ้นสุดที่ไฟล์ action.php ซึ่งจะมีข้อความปรากฏขึ้น ใน ในกรณีนี้เบราว์เซอร์เข้าถึงสคริปต์ action.php และส่งผ่านไปยังสคริปต์ "?"

ค่าทั้งหมดของแอตทริบิวต์ชื่อที่อยู่ภายในแท็ก คั่นด้วยอักขระ & โปรดทราบว่าสิ่งที่ทดแทน $_SERVER ได้ เราสามารถแก้ไขปัญหาของเราได้โดยแยกวิเคราะห์สตริง QUERY_STRING โดยใช้คุณสมบัติมาตรฐาน

ในการทำงานกับสตริงใน PHP แต่ควรใช้กลไกอื่นดีกว่า - ใช้อาร์เรย์ $_REQUEST PHP จะวางข้อมูลทั้งหมดที่ได้รับจากช่องแบบฟอร์มลงในอาร์เรย์ $_REQUEST ไม่ว่าข้อมูลจะถูกส่งด้วยวิธีใดก็ตาม: POST หรือ GET (คุณสามารถดูข้อมูลได้จาก $_SERVER["REQUEST_METHOD"] ) ฉันขอเตือนคุณว่าวิธีการเหล่านี้แตกต่างกันอย่างไร:

วิธี GET เป็นแบบสาธารณะ วิธี POST เป็นแบบส่วนตัว เช่น มันแตกต่างกันในวิธีการส่งพารามิเตอร์ ตัวอย่าง: 1) หากเราใช้วิธีการโพสต์
: mysite.ru/request.php 2) หากเราใช้รับวิธีการ

: mysite.ru/request.php?myname=”อเล็กซ์”&surname=”Gulynin”

หากเรากรอกแบบฟอร์มแล้วคลิกที่ปุ่มเราจะเห็นว่าสคริปต์ action.php ทักทายเราด้วยนามสกุลและชื่อ ทุกอย่างทำงานได้อย่างถูกต้อง

ทุกอย่างเรียบร้อยดีที่นี่ แต่ถ้าเราเปลี่ยนชื่อสคริปต์ เราจะต้องเปลี่ยนแปลงไฟล์ test.html มาแก้ไขไฟล์ action.php เพื่อที่เมื่อเราเข้าถึงมัน มันจะแสดงแบบฟอร์มเมื่อเรายังไม่ได้ส่งอะไรเลย หรือแสดงข้อความต้อนรับเมื่อเราคลิกปุ่ม: