Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

tomsmile05

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

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

Code

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

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

Date : 2018-11-27 16:27:22

By : tomsmile05

View : 1820

Reply : 4

No. 1

mr.v

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

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

Date : 2018-11-27 22:06:50

By : mr.v

No. 2

tomsmile05

โพสกระทู้ ( 22 )
บทความ ( 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>   jQuery Validation DEMO   </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=""/> (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">
 
</td>
</tr>
<tr>
<td>
 
</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

mr.v

โพสกระทู้ ( 4,756 )
บทความ ( 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

tomsmile05

โพสกระทู้ ( 22 )
บทความ ( 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 เช็คฟอร์ม หน่อยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

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

โดย

อีเมล์

บวกค่าให้ถูก