วันอังคารที่ 14 กันยายน พ.ศ. 2553

ระบบสมัครสมาชิก ตอนที่ 2 การเขียนโค๊ดJqueryตรวจสอบความถูกต้องของข้อมูล

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

กรณีที่ไม่กรอกข้อมูลอะไรเลย แต่ดันทะลึ่งไปกดปุ่ม Register มันจะแสดงไดอะล็อกฟ้องดังรูปข้างล่าง

กรณีที่กรอกข้อมูลแต่ดั๊นกรอกไม่ถูกต้อง มันจะแสดงไดอะล็อกฟ้องดังรูปข้างล่าง


++อันดับแรกเปิดไฟล์ register.php ขึ้นมา เลือกมุมมอง เป็น show view code จากนั้นให้ สร้างTag span เพื่อใช้สำหรับแสดงไดอะล็อก และกำหนดค่าให้กับ form ตามรูปนี้เลยคับ


++ต่อมาให้เขียนคำสั่งตามนี้คับ เพื่อ import CSS Style , Jquery , Jquery UI เข้ามา


บรรทัดที่ 4 กำหนด stylesheet เพื่อใช้แสดงผลไดอะล็อกบ๊อก
บรรทัดที่ 7 Import Jquery เข้ามาใช้งาน
บรรทัดที 8 Import Jquery UI เข้ามา เพราะมันมีฟังก์ชั่น Dialog ซึ่งจำเป็นต่อการเรียกใช้งาน

+++จากนั้นผมได้สร้างฟังก์ชั่น DialogAlert() เอาไว้เรียกใช้ตอนกรอกข้อมูลมีปัญหา ดังรูป

+++จากนั้นผมก็สร้างฟังก์ชั่น chkform() เพื่อรับค่าจากการกรอกข้อมูลมาตรวจสอบ ดังรูป
  


ผมไม่ขออธิบายอะไรมากนะคับ  หากสงสัยหรือติดปัญหาอะไร สามารถคอมเม้นท์ถามผมได้นะคับ

 บทความที่เกี่ยวข้อง
>>ระบบสมัครสมาชิก ตอนที่1
>>สร้างฐานข้อมูล
>>สร้างไฟล์config.php
>>PHP คืออะไร
>>MySQL คืออะไร
>>ADODB คืออะไร
>>Dreamweaver คืออะไร
>>Apperv คืออะไร

56 ความคิดเห็น :

  1. Dialog ไม่ขึ้นอ่ะครับ T T

    ตอบลบ
  2. ดาวน์โหลด Code ที่ใช้สอนทั้งหมด >>http://www.4shared.com/file/ASJptEkC/exshops.html

    ตอบลบ
    คำตอบ
    1. มีอันใหม่ไหมครับ นี้ลิ้งเสี่ย

      ลบ
    2. โหลดไม่ได้แล้วคับบท่าน ได้โปรดกรุณาด้วยคับท่าน

      ลบ
  3. ดีเลยครับผมกำลังทำขายของอยู่พอดีเลยครับ
    ขอบคุณสำหรับการแบ่งปันความรู้ครับ
    jakkhpon@gmail.com

    ตอบลบ
  4. Warning: mysql_connect() [function.mysql-connect]: Access denied for user 'root'@'localhost' (using password: YES) in C:\AppServ\www\db_exshop\adodb\drivers\adodb-mysql.inc.php on line 362
    แก้ไขอย่างไรค่ะ ช่วยตอบด้วย
    ขอบพระคุณอย่างสูง

    ตอบลบ
    คำตอบ
    1. รหัสผ่านฐานข้อมูลไม่ถูกต้องครับ ลองเช็คคำสั่ง
      $conn->Connect('ชื่อผู้ใช้งาน','รหัสผ่าน','ชือฐานข้อมูล');
      หรือ mysql_connect('ชื่อผู้ใช้งาน','รหัสผ่าน','ชือฐานข้อมูล');

      ลบ
  5. ไม่ระบุชื่อ6 มีนาคม 2555 เวลา 22:19

    ขอบคุณมากค่ะ
    แก้ได้แล้ว
    ต้องขออภัยที่รบกวนน่ะค่ะ
    ขอบคุณจริงๆ

    ตอบลบ
    คำตอบ
    1. ยินดีที่จะช่วยเหลือครับ :) ขอบคุณที่แวะมาเยี่ยมเยือนนะครับ

      ลบ
  6. ไม่ระบุชื่อ20 มีนาคม 2555 เวลา 19:50

    ขอบคุณมากๆ คร่า ตอนนี้ทำวิจัย อยุ่เคียดๆๆ มากค่ะ อยากให้สอนเยอะ เพราะหนูไม่รุ้เรื่อง เรยอ.ก้ไม่สอน เวบนี้เปนประโยชน์จริงๆ ค่ะ

    ตอบลบ
    คำตอบ
    1. สู้ๆครับ ตนเป็นที่พึ่งแห่งตน ^__^

      ลบ
  7. code ทั่เปิดสอน มันโดนลบไปแล้วอ่ะคับ

    ตอบลบ
  8. ผมโหลดตัว exshop ผมใส่ข้อมูลหมดแล้วอะครับ แต่ไม่สามารถสมัครได้ต้องแก้ยังไงอะครับ มือใหม่ครับ
    ตัว fregister.php

    http://www.4shared.com/file/RGBLk8Yq/fregister.html?

    ปัญหา

    http://image.ohozaa.com/view2/wDfLnYuCHPvVUYQO

    ต้องแก้ที่ไหนหรอครับ

    ตอบลบ
    คำตอบ
    1. Char set ที่ใช้ใน exshop คือ window-874 ครับ ของคุณน่าจะ utf-8 ครับ

      ลบ
  9. ใช่ค่ะเป็นเหมือนกันแล้วจะแก้ยังไงดีค่ะ พอดีเริ่มหัดทำเว็บค่ะ กรุณาด้วยนะค่า

    ตอบลบ
    คำตอบ
    1. โค๊ดที่ให้ไปจะเป็น window-874 ซึ่ง ขอยอมรับว่า ตอนนั้นยังไม่ค่อยรู้เรื่องการเขียนเว็บซักเท่าไหร่ ^^'' ของคุณน่าจะเป็น utf-8 ซึ่งเลือกใช้ถูกแล้ว เพราะตอนนี้ utf-8 เป็นมาตรฐานไปแล้ว นักพัฒนาเว็บไซต์ส่วนมากนิยมใช้กัน เพราะรองรับหลายภาษาทั่วโลก แต่ window-874 จะรองรับภาษาไทยกับภาษาอังกฤษเท่านั้น
      ดังนั้นถ้าเจอเครื่องหมาย ???? แสดงว่าไม่สามารถเรียกภาษาไทยกลับคืนได้แล้วครับ ต้องพิมพ์เข้าไปเองครับ คำว่า "พบข้อผิดพลาดบางอย่าง" ครับ

      ลบ
    2. ขอบคุงค่า สำหรับคำแนะนำดี ๆ

      ลบ
  10. พี่ค่า พอดีว่ากรอกสมัครสมาชิกไปแล้ว แต่มันขึ้นว่า
    ........ตรวจสอบUsernameให้ถูกต้อง,ตรวจสอบรหัสผ่านให้ถูกต้อง,รหัสผ่านทั้งสองช่องไม่ตรงกัน>>>>

    ทั้งๆ ๆๆ ที่ไม่ได้เปลี่ยนปรับโค้ดเลยอ่ะค่ะ และรหัสผ่านก็ใส่เหมือนกันอ่ะค่ะ หรือว่าต้องเน้นให้ใส่ภาษาอังกฤษตัวเล็ก ตัวใหญ่และตัวเลขด้วยหรือป่าวค่า หรือต้องใส่ให้ครบจำนวนที่เราได้ทำไว้ในฐานข้อมูลค่า รบกวนตอบด้วยนะค่า

    ตอบลบ
    คำตอบ
    1. ต้องตั้งชื่อInputกับคำสั่งjQueryให้ตรงกันครับ เช่น ต้้งชื่อ id ช่องกรอก username ว่า id="User" ในคำสั่ง jQuery ต้องเขียนว่า $('#User').val(); ครับ
      ลองดูตอนที่ 1 ที่นี่ -> http://php-for-ecommerce.blogspot.com/2010/09/1.html

      ลบ
    2. พี่ค่าหนูก็ตรวจสอบแล้วนะค่ามันก็ตรงกัน แต่ไม่เข้าใจทำไมไม่ได้สักกะที รบกวนหน่อยนะค่า

      ลบ
    3. ดูตัวเล็กตัวใหญ่ด้วยครับ

      ลบ
    4. โอเค ค่า !!!!! ขอบคุงมาก ๆๆ นะค่าที่ให้คำปรึกษา ถ้าไม่มีเว็บไซต์นี้ งานของมีนคงไม่มีเสนออาจารย์แน่ ๆๆ นะ ขอบคุงจิง ๆๆ

      ลบ
    5. พี่ครับผมก้เกิดปัญหาแบบนี้อะครับ ผมลองทำหลายรอบแล้ว มัน ก็บอก
      "ตรวจสอบUsernameให้ถูกต้อง,ตรวจสอบรหัสผ่านให้ถูกต้อง,รหัสผ่านทั้งสองช่องไม่ตรงกัน"
      เฉพาะ ส่วนนี้อะครับ

      ลบ
    6. ลองทำตามความคิดเห็นของผมข้างบนเลยครับ

      ####ต้องตั้งชื่อInputกับคำสั่งjQueryให้ตรงกันครับ เช่น ต้้งชื่อ id ช่องกรอก username ว่า id="User" ในคำสั่ง jQuery ต้องเขียนว่า $('#User').val(); ครับ
      ลองดูตอนที่ 1 ที่นี่ -> http://php-for-ecommerce.blogspot.com/2010/09/1.html#######

      ลบ
    7. ผมตั้งตรงกันครบหมดละนะครับ ยังงง อยู่ดีอะครับผม เช่น
      input name="User" type="text" id="User" size="20" value=""" /
      $("#User").val(); เนี่ยครับ ผมยังงง อยู่อะครับ ละอีกอย่าง ในบทความของท่า ใช้ ฟันหนูสองขีด " " แต่ตอบคำถามใช้ฟันหนูหนึ่งขีด ' ' ตกลงใช้อันไหนอะครับ

      ลบ
  11. ขอบคุงค่า!!!!!!!

    แต่มีข้อสงสัยอีก ค่า รบกวนตอบด้วยนะค่า

    ไฟล์ jquery ,adodb , time, time2,tengine,jason,jason2 คืออะไรค่า ถ้าจะทำเว็บตามที่บอกจำเป็นต้องเก็บไว้ในโฟล์เดอร์งานเราไหมค่า

    ตอบลบ
    คำตอบ
    1. time, time2,tengine,jason,jason2 ไม่ต้องมีครับ ผมเอาไว้ทดสอบเฉยๆครับ
      ส่วน jquery adodb ต้องมีครับ

      ลบ
  12. มีปัญหาตอนกด register อะครับ
    "ตรวจสอบUsernameให้ถูกต้อง,ตรวจสอบรหัสผ่านให้ถูกต้อง,รหัสผ่านทั้งสองช่องไม่ตรงกัน"
    รูป
    http://image.ohozaa.com/view2/wEHJysZDs05SQlCq

    ช่วยดู code ไห้หน่อยครับ

    http://www.mediafire.com/?x8ay7ub6p9no25s

    รบกวนพี่จริงๆครับ ขอบคุณครับ

    ตอบลบ
    คำตอบ
    1. เปลียน???ให้เป็นคำว่า มีปัญหาเกิดขึ้น หรือ Error ครับ เพราะข้อความมันเสียแล้วครับ เกิดจากการใช้ Char set ไม่ตรงกันครับ

      ลบ
    2. แก้ได้แล้วครับ

      คือตรง


      var User = $("#User").val();
      var Pass = $("#Pass").val();
      var Repass=$("#Repass").val();

      เปลี่ยนเป็น

      var User = $("#User1").val();
      var Pass = $("#Pass1").val();
      var Repass=$("#Repass1").val();

      ขอบคุณมากครับ


      ลบ
  13. http://www.mediafire.com/view/?jpgabu4amrl4bnb

    รบกวนตรวจสอบ code ให้ผมหน่อยครับ คือ ผมเพิ่มเติม code ตามทุกอย่างเลยครับ ที่ต่างคือชื่อและฟอร์มเฉย ๆ แต่ผมสงสัยว่าทำไม MsgError ผมไม่เด้งเลยครับ

    ตอบลบ
  14. MsgError ไม่โชว์ เหมือนกันค่ะ ไม่ทราบว่าต้องไปตรวจสอบตรงไหนคะ

    ตอบลบ
    คำตอบ
    1. น่าจะใส่ path jquery หรือ jquery ui ไม่ถูกต้องนะครับ
      ตรงคำสั่ง <script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script> และ
      <script type="text/javascript" src="jquery/jquery-ui-1.7.1.custom.min.js"></script>
      ถ้ามองแบบ tree จะเป็นแบบนี้ครับ
      --jquery (โฟลเดอร์ jquery)
      ------jquery-1.4.2.min.js (ไฟล์ jquery.js)
      ------jquery-ui-1.7.1.custom.min.js (ไฟล์ jquery-ui.js)
      --register.php (ไฟล์สมัครสมาชิก)

      ลบ
  15. Dialog ไม่ขึ้นเลยค่ะ แก้ตามที่บอกก้แล้ว T T

    ตอบลบ
    คำตอบ
    1. ขอดูโค๊ดหน่อยได้ป่าวครับ
      ใช้ Firebug Add on ของ Firefox เป็นหรือป่าวคับ ถ้าใช้เป็นมันแจ้ง error ว่ายังไงครับ
      หรือไม่ก็ error ของ IE ก็ได้ครับ

      ลบ
  16. เอ่อคือว่า ของผมทำแล้ว แต่แบบมันก็สมัครสมาชิกไม่ได้อ่าีครับ
    มันขึ้นแบบนี้ตลอดเลยอ่าครับ
    http://image.ohozaa.com/view2/wV8xs7HcvBO8imih
    ต้องแก้ไข ยังไงครับผม แล้วเครื่องหมาย ??????? แก้ตรงไหนอ่าครับ
    รบกวนด้วยนะครับ ผมมือใหม่

    ตอบลบ
    คำตอบ
    1. เปลี่ยน ??? ให้เป็นว่า พบข้อผิดพลาดครับ เกิดจากการเข้ารหัสไม่เหมือนกันครับ

      ลบ
    2. ไม่ระบุชื่อ18 กรกฎาคม 2556 เวลา 14:48

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

      ลบ
    3. เปลี่ยนชื่อ textfield ใหม่ครับ
      จาก User เป็น User1
      Pass เป็น Pass1
      Repass เป็น Repass1

      และในโค๊ด PHP

      var User = $("#User1").val();
      var Pass = $("#Pass1").val();
      var Repass=$("#Repass1").val();

      ลบ
    4. ไม่ระบุชื่อ18 กรกฎาคม 2556 เวลา 16:56

      ขอโค้ดทั้งหมด อันล่าสุด ทีครับผม ขอบคุณมากๆครับ

      ลบ
    5. นี่เป็นโค๊ดล่าสุดแล้วครับ แนะนำให้แก้ไขตามวิธีข้างต้น

      ลบ
    6. ไม่ระบุชื่อ18 กรกฎาคม 2556 เวลา 17:19

      อ่อได้แล้วครับ ขอบคุณมากๆนะครับ ต้องแก้
      $user=$_POST["User1"];
      $pass=$_POST["Pass1"];
      แล้วก็
      " />
      " />
      " />

      ลบ
    7. ใช่แล้วครับ โค๊ดข้างบนผมบอกผิด มันคือคำสั่งของ jQuery

      ลบ
    8. รบกวนขอไฟล์ทั้งหมดยังได้อยู่มั๊ยครับ พอดีลิง http://www.4shared.com/file/ASJptEkC/exshops.html เสียแล้ว

      ลบ
  17. file dialog ไม่ขึ้นคราป มันลิ้งไปหน้าใหม่เลยคราป ทำไงดีคราป

    http://upload.one2car.com/download.aspx?pku=28711BCF2UGEON5OSKIK4L3UVU6YJ

    ตอบลบ
    คำตอบ
    1. สงกะสัยคุณลอกโค๊ดผิดคราปโผม ลองตรวจสอบดูให้ดี มันต้อง return false; ถ้าข้อมูลไม่ได้กรอก
      แต่ถ้ามันเด้งไปอีกหน้า ทั้งที่ไม่ได้กรอกข้อมูล แสดงแว้ คุณลอกโค๊ดของโผมผิดคราป

      ลบ
  18. คือตตอนนี้หนูจะสร้างฟอร์มแต่มีรูปภาพด้วยต้องทำอย่างไงมั้งค่ะ เพราะ บทความนี้หนู งง อ่ะค่ะ

    ตอบลบ
  19. คำตอบ
    1. มันจะมีฟ้องเอ่อเร่อขึ้นมาครับ ผมว่าน่าจะมีปัญหาตรงการเรียกพาธ jquery กับ jquery ui ครับ
      ให้ดูบรรทัดที่ 7 กับ 8 ว่าเรียกพาธถูกป่าวครับ

      ลบ
  20. ตรงปุ่ม Register ผมกดแล้วไม่เห็นมีอะไร ขึ้นเลยอะไร ทำไงให้มันเชื่อน ต่อได้ บอกที่ครับ ผมทำฟรอมแล้วนะ แล้ว เขียนcode ตามที่บอก แต่กดปุ่มแล้วไม่เห็นมีอะไรขึ้นเลย ช่วยบอกที่ครับๆ Register ผมใช้ Button สร้างนะครับๆ ช่วยบอกที่ทำไงให้มันเชื่อนกัน

    ตอบลบ
  21. ขอlink
    ดาว์โหลด ่jquery_ui 1.7.2. custom css

    ตอบลบ
  22. ความคิดเห็นนี้ถูกผู้เขียนลบ

    ตอบลบ
  23. ช่วยแก้โค้ด jquery ให็ดูหน่อยได้มั้ยค่ะ พอดีมันเปนเวร์ชั่นใหม่แล้วมันไม่เหมือนเดิม แก้ไม่ถูกอ่ะค่ะ ช่วยหน่อยน่ะค่ะ พอดีกำลังศึกษาอยุ่อ่าค่ะ

    ตอบลบ
  24. กำลังศึกษาหาข้อมูลอยู่เหมือนกันครับ"มือใหม่"ครับ ขอคำแนะนำหน่อยครับ เว็บเซอร์วิสขายของ
    kanapat@srru.ac.th ขอบคุณครับ

    ตอบลบ