Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 106,787

HOME > PHP > PHP Forum > สอบถามเกี่ยวกับ jQuery + Validate Plugin เช็คฟอร์ม หน่อยครับ


 

สอบถามเกี่ยวกับ jQuery + Validate Plugin เช็คฟอร์ม หน่อยครับ

 



Topic : 132652



โพสกระทู้ ( 16 )
บทความ ( 0 )



สถานะออฟไลน์




พอดีผมได้ลองใช้ jQuery + Validate Plugin เช็คฟอร์มค่าว่าง มาจากหลายๆที่ อยากสอบถามว่าปกติเค้าเช็คค่าจาก name อย่างเดียวใช่ไหมครับ มันสามารถเช็คค่าจาก id ได้ไหมครับ อย่างตัวอย่าง

Code
<script>
$("#myForm").validate({
rules: {
Firstname : "required",
Lastname : "required",
},
messages: {

Firstname: "กรุณากรอกชื่อจริงของท่าน",
Lastname : "กรุณากรอกนามสกุลของท่าน",
</script>
<input type="text" name="Firstname" id="FirstnameTest">
<input type="text" name="Lastname" id="LastnameTest">


จากตัวอย่าง สคริปของ jQuery + Validate Plugin จะตรวจสอบค่าจาก name ก็คือ Firstname และ Lastname ได้ปกติ แต่ผมอยากให้มันตรวจสอบค่าว่างจาก id คือ FirstnameTest และ LastnameTest ได้ไหมอะครับ มีใครพอจะแนะนำแนวทางได้บ้างไหมครับ ผมลองทำแล้วมันไม่ตรวจสอบให้อะครับ



Tag : PHP, CSS, HTML5, JavaScript, jQuery, JAVA







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2018-11-27 16:27:22 By : tomsmile05 View : 96 Reply : 4
 

 

No. 1



โพสกระทู้ ( 3,199 )
บทความ ( 8 )



สถานะออฟไลน์


มันไม่ใช่ของ jQuery โดยตรง เป็นปลั๊กอิน แล้วก็ไม่มีลิ้งค์ที่มา จะเข้าไปดูเอกสารก็ไม่รู้ว่าของอะไรกันแน่และอยู่เว็บไหน ดังนั้นคงตอบไม่ได้.
การตรวจฟอร์ม ใช้ JS อย่างเดียวไม่พอ เพราะว่าผู้ใช้สามารถปิด JS บนเบราเซอร์ได้แล้วลัดขั้นตอนตรวจสอบได้เลย ควรตรวจที่ฝั่ง server (PHP) ด้วย. ถ้าจะเอาให้ไม่ต้องทำงานซ้ำซ้อน ก็ส่งไป server เลยแล้วให้ทางนั้นตรวจแล้วแจ้ง error เอามาแสดง.






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-11-27 22:06:50 By : mr.v
 


 

No. 2



โพสกระทู้ ( 16 )
บทความ ( 0 )



สถานะออฟไลน์


code ที่ผมนำมาประยุกต์ใช้ก็จะประมาณนี้ครับ

Code
<!doctype html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="noindex,nofollow" />
<title>jQuery HTML page Validation Plugin</title>
<link rel="stylesheet" href="/resources/themes/master.css" type="text/css" />
<link
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<style>

.myErrors {
color:red;
}

</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"
type="text/javascript"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<script
src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"
type="text/javascript"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script src="/resources/scripts/date.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {

// attach datepicker to the input field
// an interactive calendar appears as soon as you focus on the field
// for more information read http://jqueryui.com/demos/datepicker/
$("#myDate").datepicker();

// modify default settings for validation
jQuery.validator.setDefaults({
// where to display the error relative to the element
errorPlacement: function(error, element) {
error.appendTo(element.parent().find('div.myErrors'));
}
});

// custom validation method to make sure the date is in mm/dd/yyyy format
jQuery.validator.addMethod(
"usaDate",
function(value, element) {
console.log(value);
var date = getDateFromFormat(value,'MM/dd/yyyy');
console.log(date);
if (date == 0) {
return false;
}
return true;
},
"Please enter a date in the format mm/dd/yyyy"
);


$("#samplecode").validate({
rules: {

// mandatory entry
myInputBox: "required",

// mandatory entry and valid email address
myEmail: {
required: true,
email: true
},

// mandatory entry and valid URL
myURL: {
required: true,
url: true
},

// madatory date entry and valid date format
myDate : {
required: true,
usaDate : true
},

// mandatory radio button selection
myRadioButton: "required",

// mandatory checkbox selection
myCheckbox: "required",

// mandatory drop down selection
mySelect: "required",

//conditional validation of the textarea based on the radion button selection
convicted: "required",
explain: {
required: function(element) {
return $("input:radio[name=convicted]:checked").val() == 'Y';
}
}
},

//custom error messages
messages: {
myRadioButton:{
required: "Please choose a Color."
},
myCheckbox:{
required: "Please select the Fruits that you love."
},
},

// on page submit
submitHandler: function(){
alert('Form validation was a success, please proceed!');
}

});


});
</script>
</head>
<body>
<div id="allContent">
<div id="myContent">
<form id="samplecode" name="samplecode" method="POST" action="">
<fieldset>
<legend><b>&nbsp;&nbsp;&nbsp;jQuery Validation DEMO&nbsp;&nbsp;&nbsp;</b></legend>
<table>
<tr>
<td valign="top">
<label for="myInputBox"> Input Text Box </label>
</td>
<td>
<input id="myInputBox" type="text" name="myInputBox" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myEmail"> Email Address </label>
</td>
<td>
<input id="myEmail" type="text" name="myEmail" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myURL"> Website URL </label>
</td>
<td>
<input id="myURL" type="text" name="myURL" size="50" value=""/>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myDate"> Date of Birth </label>
</td>
<td>
<input id="myDate" type="text" name="myDate" size="10" value=""/>&nbsp;(mm/dd/yyyy)
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myRadioButton"> Radio Buttons </label>
</td>
<td>
<input type="radio" name="myRadioButton" value="R" /> Red
<input type="radio" name="myRadioButton" value="G" /> Green
<input type="radio" name="myRadioButton" value="B" /> Blue
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="myCheckbox"> Some fruits to Choose from </label>
</td>
<td>
<input type="checkbox" name="myCheckbox" value="apple" /> Apple
<input type="checkbox" name="myCheckbox" value="orange" /> Orange
<input type="checkbox" name="myCheckbox" value="banana" /> Banana
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="mySelect"> Drop down for car models </label>
</td>
<td>
<select id="mySelect" name="mySelect" title="Please select your Car">
<option value="">Choose one</option>
<option value="toyota">Toyota</option>
<option value="honda">Honda</option>
<option value="ford">Ford</option>
<option value="other">Others</option>
</select>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="convicted"> Have you ever been convicted of a crime? </label>
</td>
<td>
<input type="radio" name="convicted" value="Y" /> Yes
<input type="radio" name="convicted" value="N" /> No
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td valign="top">
<label for="explain"> If yes, please explain </label>
</td>
<td>
<textarea id="explain" name="explain" rows="5" cols="60" maxlength="300"></textarea>
<div class="myErrors"></div>
</td>
</tr>
<tr>
<td colspan="2">
&nbsp;
</td>
</tr>
<tr>
<td>
&nbsp;
</td>
<td>
<input id="processForm" type="submit" value="Process Form" />
</td>
</tr>
</table>
</fieldset>
</form>
</div>
</div>
</body>
</html>


http://www.mysamplecode.com/2012/09/jquery-form-validation-plugin-example.html ผมเอามาจากตัวอย่างนี้ครับ

มันพอจะมีวิธีไหนบ้างไหมอ่าครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-11-28 09:06:49 By : tomsmile05
 

 

No. 3



โพสกระทู้ ( 3,199 )
บทความ ( 8 )



สถานะออฟไลน์


https://jqueryvalidation.org/validate/
Quote:
Key/value pairs defining custom rules. Key is the name of an element (or a group of checkboxes/radio buttons)

คงไม่ได้ครับ เพราะมันจับเอาแต่ชื่อ name
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-11-28 20:09:57 By : mr.v
 


 

No. 4



โพสกระทู้ ( 16 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากๆเลยครับ ได้ความรู้เพิ่มอีกแล้ว^^ พอดีผมจำเป็นต้องเก็บ name ในรูปแบบ array ตอนแรกไม่ได้ แต่ตอนนี้ผมทำได้ตามที่ต้องการแล้วครับ จากตัวอย่าง code ตามนี้ครับ

Code
เดิม
<script>
$("#myForm").validate({
rules: {
a: "required",
b: "required",
},
messages: {

a: "กรุณากรอกข้อมูล",
b: "กรุณากรอกข้อมูล",
</script>
<input type="text" name="a" id="a_id">
<input type="text" name="a" id="b_id">

ใหม่
$("#myForm").validate({
rules: {
"a[ ]" : "required",
"b[ ]" : "required",
},
messages: {

"a[ ]" : "กรุณากรอกชื่อจริงของท่าน",
"b[ ]" : "กรุณากรอกนามสกุลของท่าน",
</script>
<input type="text" name="a[ ]" id="a_id">
<input type="text" name="b[ ]" id="b_id">

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2018-11-29 09:07:11 By : tomsmile05
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามเกี่ยวกับ jQuery + Validate Plugin เช็คฟอร์ม หน่อยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, vps | เช่า vps , รับทำเว็บไซต์ รับเขียนโปรแกรม

Load balance : Server 04
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2019 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
for Contact Us : [Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 , 08-9968-0655 อัตราราคา คลิกที่นี่