HTML 5 มี attribute อย่าง required ช่วยตรวจสอบฟอร์ม แต่มันยังไม่สมบูรณ์ เช่น ใช้ required กับกลุ่ม checkbox ไม่ได้ มันตรวจได้แค่เลือก checkbox ตัวนั้นๆเท่านั้น จะบังคับให้เลือก 1 ในตัวเลือกไม่ได้
ทำให้ต้องใช้เจคิวรี่อย่าง jQuery Validation Plugin ช่วย
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery Validation : html5 / inline</title><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css"><!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]> <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><form action="validation.php" enctype="multipart/form-data" id="formA" method="post"> <div class="form-group"> <p>เครื่องปรุง</p> <!-- ใส่ required ใน input ตัวแรกก็พอ --> <label> <input type="checkbox" name="flavoring[]" value="1" required> เกลือ</label> <label> <input type="checkbox" name="flavoring[]" value="2"> น้ำตาล</label> <label> <input type="checkbox" name="flavoring[]" value="3"> น้ำปลา</label> <label> <input type="checkbox" name="flavoring[]" value="4"> พริกป่น</label> <!-- แสดง error ตรงนี้ อย่าลืม class="error" --> <label for="flavoring[]" class="error"></label> </div> <div class="form-inline"> <div class="form-group"><!-- input text ธรรมดา --> <label>สั่งวันที่ <input type="text" name="dateOrder" required data-rule-date="true"> </label> </div> <div class="form-group"><!-- input date --> <label>ส่งวันที่ <input type="date" name="dateDelivery" required> </label> </div> </div> <div class="form-inline"> <div class="form-group"><!-- min and max length --> <label> <input type="text" id="sendto" name="sendto" required minlength="10" maxlength="50" data-rule-email="true"> Email</label> </div> <div class="form-group"> <!-- data-rule-equalTo id sendto --> <label> <input type="email" id="sendtoSame" name="sendtoSame" required data-rule-equalTo="#sendto"> Email Confirm</label> </div> </div> <div class="form-inline"> <div class="form-group"> <label>รับเฉพาะภาพ <input type="file" name="image" accept="image/*"> </label> </div> <div class="form-group"><!-- style input --> <label class="btn btn-primary">รับแต่ .jpeg <input type="file" name="jpeg" accept="image/jpeg" style="display:none;"> </label> </div> </div> <div class="form-inline"> <div class="form-group"> <label>ข้าวเปล่า <input type="text" name="rice" data-rule-number="true"> </label> </div> <div class="form-group"> <label>แคปหมู (ปลีก สั่งเป็นขีดได้ เช่น 0.5) <input type="number" name="friedPorkSkin" step="0.1"> </label> </div> <div class="form-group"><!-- custom message --> <label>แคปหมู (ส่ง kg.) <input type="number" name="friedPorkSkin" data-rule-digits="true" data-message-digits="ขายแต่เป็น KG ครับ"> </label> </div> </div> <div class="form-group"> <p>เส้น</p> <!-- ใส่ required ใน input ตัวแรกก็พอ --> <label> <input type="radio" name="noodle" value="1" required> เส้นหมี่</label> <label> <input type="radio" name="noodle" value="2"> เส้นเล็ก</label> <label> <input type="radio" name="noodle" value="3"> เส้นใหญ่</label> <label> <input type="radio" name="noodle" value="4"> เส้นหมี่</label> <!-- แสดง error ตรงนี้ อย่าลืม class="error" --> <label for="noodle" class="error"></label> </div> <div class="form-group"> <label>ลวกนานมั๋ย <input type="range" min="2" max="8" step="1"> </label> </div> <div class="form-inline"> <div class="form-group"> <label>เว็บบริษัท <input type="text" name="officeUrl" data-rule-url="true"> </label> </div> <div class="form-group"> <label>เว็บส่วนตัว <input type="url" name="blogUrl"> </label> </div> </div> <input type="submit" value="Submit"></form><script src="assets/jQuery/jquery.min.js"></script><script src="plus/jQuery/jquery-validation/jquery.validate.min.js"></script><script>$(function(){ $('#formA').validate();});</script></body></html> |
About the author