Forgot Password ??

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

	Registered : 109,038

HOME > PHP > PHP Forum > ช่วยดูให้หน่อยจ้า เกี่ยวกับการ validate form และการส่งค่า ด้วย prototype

ช่วยดูให้หน่อยจ้า เกี่ยวกับการ validate form และการส่งค่า ด้วย prototype

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

Avrill.NET

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

Code
Code (PHP)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<title>Report</title>
<link rel="stylesheet" type="text/css" href="../css/style-2.css"/>
<script type="text/javascript" src="../js/prototype.js"></script>
<script type="text/javascript" src="../js/validation.js"></script>

<script type="text/javascript" >

function sendReport()
{

var url ='insert.php';
new Ajax.Request(url,{method : "POST",parameters: $('frmInst').serialize(true),onComplete : redirect});
}

function redirect()
{

window.location.href = 'index.php';

}
</script>

</head> 
<body>

<div class="contenReport">
  <form id="frmInst" name="frmInst" onsubmit='sendReport(); return false;'>
                  <table width="100%" border="0" align="center" cellpadding="3" cellspacing="0">
                    <tr>
                      <td width="31%" align="right" nowrap="nowrap">ประเภทงาน : </td>
                      <td width="69%" nowrap="nowrap" align="left"><input name="joptype" type="text"  class="required" /> </td>
                    </tr>
                    <tr>
                      <td align="right" nowrap="nowrap">เวลาเข้างาน: </td>
                      <td nowrap="nowrap" align="left"><input name="timestart" type="text" class="required"/></td>
                    </tr>
                    <tr>
                      <td align="right">เวลาออกจากงาน : </td>
                      <td align="left"><input name="timeout" type="text" class="required" /></td>
                    </tr>
                    <tr>
                      <td align="right">&nbsp;</td>
                      <td align="left"><input type="submit" name="Submit" value="Submit"  />
                          <input type="reset" name="reset" value="Reset" onclick="valid.reset(); return false" /></td>
                    </tr>
                  </table>
                </form>
                
 <script type="text/javascript">
    var valid = new Validation('frmInst');
 </script>

</div>

</body>
<html>

สามารถ insert ลงฐานข้อมูลได้เรียบร้อย

แต่มีปัญหาคือ
มันทำงานพร้อมกันค่ะ พอกด submit มันก็ตรวจสอบให้อยู่นะค่ะ และมันก้ submit ค่าว่างลงฐานข้อมูลเลย

มีวิธีจัดการปัญหานี้ยังไงค่ะ ให้มันตรวจสอบค่าในฟอร์มห้ามมีค่าว่างถึงจะ submit ได้

ช่วยแนะนำมือใหม่หัดใช้ ajax ด้วยค่ะ

Tag : - - - -

Date : 2010-07-19 16:09:37

By : Avrill

View : 3837

Reply : 9

No. 1

เอี่ยว

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

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

แต่โค้ดของคุณ มันฟอร์ม ไม่เห็นมีคำสั่งเกี่ยวกับ validate ใน sendReport()

Date : 2010-07-19 16:30:41

By : pjgunner

No. 2

Avrill.NET

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

Code

ใช่แค่นี้ค่ะ แล้วมาใส่ class="required" ใน อิลิเม้นต์ของ form ค่ะ

คือว่าตอนยังไม่ใช้การส่งค่าแบบ ajax มันก็ทำงานได้ปกติค่ะ

Date : 2010-07-19 16:40:56

By : Avrill

No. 3

เอี่ยว

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

มี หน้าเอกสารของคลาส Validation มั้ยคับ

Date : 2010-07-19 16:48:33

By : pjgunner

No. 4

Avrill.NET

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

นี่เลยค่ะ
Code

var Validator = Class.create();

Validator.prototype = {
initialize : function(className, error, test, options) {
if(typeof test == 'function'){
this.options = $H(options);
this._test = test;
} else {
this.options = $H(test);
this._test = function(){return true};
}
this.error = error || 'Validation failed.';
this.className = className;
},
test : function(v, elm) {
return (this._test(v,elm) && this.options.all(function(p){
return Validator.methods[p.key] ? Validator.methods[p.key](v,elm,p.value) : true;
}));
}
}
Validator.methods = {
pattern : function(v,elm,opt) {return Validation.get('IsEmpty').test(v) || opt.test(v)},
minLength : function(v,elm,opt) {return v.length >= opt},
maxLength : function(v,elm,opt) {return v.length <= opt},
min : function(v,elm,opt) {return v >= parseFloat(opt)},
max : function(v,elm,opt) {return v <= parseFloat(opt)},
notOneOf : function(v,elm,opt) {return $A(opt).all(function(value) {
return v != value;
})},
oneOf : function(v,elm,opt) {return $A(opt).any(function(value) {
return v == value;
})},
is : function(v,elm,opt) {return v == opt},
isNot : function(v,elm,opt) {return v != opt},
equalToField : function(v,elm,opt) {return v == $F(opt)},
notEqualToField : function(v,elm,opt) {return v != $F(opt)},
include : function(v,elm,opt) {return $A(opt).all(function(value) {
return Validation.get(value).test(v,elm);
})}
}

var Validation = Class.create();

Validation.prototype = {
initialize : function(form, options){
this.options = Object.extend({
onSubmit : true,
stopOnFirst : false,
immediate : false,
focusOnError : true,
useTitles : false,
onFormValidate : function(result, form) {},
onElementValidate : function(result, elm) {}
}, options || {});
this.form = $(form);
if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);
if(this.options.immediate) {
var useTitles = this.options.useTitles;
var callback = this.options.onElementValidate;
Form.getElements(this.form).each(function(input) { // Thanks Mike!
Event.observe(input, 'blur', function(ev) { Validation.validate(Event.element(ev),{useTitle : useTitles, onElementValidate : callback}); });
});
}
},
onSubmit : function(ev){
if(!this.validate()) Event.stop(ev);
},
validate : function() {
var result = false;
var useTitles = this.options.useTitles;
var callback = this.options.onElementValidate;
if(this.options.stopOnFirst) {
result = Form.getElements(this.form).all(function(elm) { return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback}); });
} else {
result = Form.getElements(this.form).collect(function(elm) { return Validation.validate(elm,{useTitle : useTitles, onElementValidate : callback}); }).all();
}
if(!result && this.options.focusOnError) {
Form.getElements(this.form).findAll(function(elm){return $(elm).hasClassName('validation-failed')}).first().focus()
}
this.options.onFormValidate(result, this.form);
return result;
},
reset : function() {
Form.getElements(this.form).each(Validation.reset);
}
}

Object.extend(Validation, {
validate : function(elm, options){
options = Object.extend({
useTitle : false,
onElementValidate : function(result, elm) {}
}, options || {});
elm = $(elm);
var cn = elm.classNames();
return result = cn.all(function(value) {
var test = Validation.test(value,elm,options.useTitle);
options.onElementValidate(test, elm);
return test;
});
},
test : function(name, elm, useTitle) {
var v = Validation.get(name);
var prop = '__advice'+name.camelize();
try {
if(Validation.isVisible(elm) && !v.test($F(elm), elm)) {
if(!elm[prop]) {
var advice = Validation.getAdvice(name, elm);
if(advice == null) {
var errorMsg = useTitle ? ((elm && elm.title) ? elm.title : v.error) : v.error;
advice = '<div class="validation-advice" id="advice-' + name + '-' + Validation.getElmID(elm) +'" style="display:none">' + errorMsg + '</div>'
switch (elm.type.toLowerCase()) {
case 'checkbox':
case 'radio':
var p = elm.parentNode;
if(p) {
new Insertion.Bottom(p, advice);
} else {
new Insertion.After(elm, advice);
}
break;
default:
new Insertion.After(elm, advice);
}
advice = Validation.getAdvice(name, elm);
}
if(typeof Effect == 'undefined') {
advice.style.display = 'block';
} else {
new Effect.Appear(advice, {duration : 1 });
}
}
elm[prop] = true;
elm.removeClassName('validation-passed');
elm.addClassName('validation-failed');
return false;
} else {
var advice = Validation.getAdvice(name, elm);
if(advice != null) advice.hide();
elm[prop] = '';
elm.removeClassName('validation-failed');
elm.addClassName('validation-passed');
return true;
}
} catch(e) {
throw(e)
}
},
isVisible : function(elm) {
while(elm.tagName != 'BODY') {
if(!$(elm).visible()) return false;
elm = elm.parentNode;
}
return true;
},
getAdvice : function(name, elm) {
return $('advice-' + name + '-' + Validation.getElmID(elm)) || $('advice-' + Validation.getElmID(elm));
},
getElmID : function(elm) {
return elm.id ? elm.id : elm.name;
},
reset : function(elm) {
elm = $(elm);
var cn = elm.classNames();
cn.each(function(value) {
var prop = '__advice'+value.camelize();
if(elm[prop]) {
var advice = Validation.getAdvice(value, elm);
advice.hide();
elm[prop] = '';
}
elm.removeClassName('validation-failed');
elm.removeClassName('validation-passed');
});
},
add : function(className, error, test, options) {
var nv = {};
nv[className] = new Validator(className, error, test, options);
Object.extend(Validation.methods, nv);
},
addAllThese : function(validators) {
var nv = {};
$A(validators).each(function(value) {
nv[value[0]] = new Validator(value[0], value[1], value[2], (value.length > 3 ? value[3] : {}));
});
Object.extend(Validation.methods, nv);
},
get : function(name) {
return Validation.methods[name] ? Validation.methods[name] : Validation.methods['_LikeNoIDIEverSaw_'];
},
methods : {
'_LikeNoIDIEverSaw_' : new Validator('_LikeNoIDIEverSaw_','',{})
}
});

Validation.add('IsEmpty', '', function(v) {
return ((v == null) || (v.length == 0)); // || /^\s+$/.test(v));
});

Validation.addAllThese([
['required', 'This is a required field.', function(v) {
return !Validation.get('IsEmpty').test(v);
}],
['validate-number', 'Please enter a valid number in this field.', function(v) {
return Validation.get('IsEmpty').test(v) || (!isNaN(v) && !/^\s+$/.test(v));
}],
['validate-digits', 'Please use numbers only in this field. please avoid spaces or other characters such as dots or commas.', function(v) {
return Validation.get('IsEmpty').test(v) || !/[^\d]/.test(v);
}],
['validate-alpha', 'Please use letters only (a-z) in this field.', function (v) {
return Validation.get('IsEmpty').test(v) || /^[a-zA-Z]+$/.test(v)
}],
['validate-alphanum', 'Please use only letters (a-z) or numbers (0-9) only in this field. No spaces or other characters are allowed.', function(v) {
return Validation.get('IsEmpty').test(v) || !/\W/.test(v)
}],
['validate-date', 'Please enter a valid date.', function(v) {
var test = new Date(v);
return Validation.get('IsEmpty').test(v) || !isNaN(test);
}],
['validate-email', 'Please enter a valid email address. For example [email protected] .', function (v) {
return Validation.get('IsEmpty').test(v) || /\w{1,}[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(v)
}],
['validate-url', 'Please enter a valid URL.', function (v) {
return Validation.get('IsEmpty').test(v) || /^(http|https|ftp):\/\/(([A-Z0-9][A-Z0-9_-]*)(\.[A-Z0-9][A-Z0-9_-]*)+)(:(\d+))?\/?/i.test(v)
}],
['validate-date-au', 'Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006.', function(v) {
if(Validation.get('IsEmpty').test(v)) return true;
var regex = /^(\d{2})\/(\d{2})\/(\d{4})$/;
if(!regex.test(v)) return false;
var d = new Date(v.replace(regex, '$2/$1/$3'));
return ( parseInt(RegExp.$2, 10) == (1+d.getMonth()) ) &&
(parseInt(RegExp.$1, 10) == d.getDate()) &&
(parseInt(RegExp.$3, 10) == d.getFullYear() );
}],
['validate-currency-dollar', 'Please enter a valid $ amount. For example $100.00 .', function(v) {
// [$]1[##][,###]+[.##]
// [$]1###+[.##]
// [$]0.##
// [$].##
return Validation.get('IsEmpty').test(v) || /^\$?\-?([1-9]{1}[0-9]{0,2}(\,[0-9]{3})*(\.[0-9]{0,2})?|[1-9]{1}\d*(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(v)
}],
['validate-selection', 'Please make a selection', function(v,elm){
return elm.options ? elm.selectedIndex > 0 : !Validation.get('IsEmpty').test(v);
}],
['validate-one-required', 'Please select one of the above options.', function (v,elm) {
var p = elm.parentNode;
var options = p.getElementsByTagName('INPUT');
return $A(options).any(function(elm) {
return $F(elm);
});
}]
]);

Date : 2010-07-19 17:08:45

By : Avrill

No. 5

เอี่ยว

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

คับ ผมไม่เคยใช้ prototype มาก่อน

แต่ลอง เอา onsubmit ของฟอร์มออกก่อน แล้ว ช่วยบอกหน่อยคับ ว่าได้ตามต้องการหรือยัง

Date : 2010-07-19 17:34:48

By : pjgunner

No. 6

เอี่ยว

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

โค้ด js oop มันแสนสาหัสจริงๆ (no comment. no desciption, it's magic !!)

ถ้าเกิดว่ามันไม่ส่งทาง ajax ให้ คิดว่าต้อง override ซักเมธอดนึงที่มันถูกเรียกก่อน submit จะทำงาน

Date : 2010-07-19 17:40:49

By : pjgunner

No. 7

Avrill.NET

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

คือมันเป็นอย่างงี้ค่ะ ถ้าไม่ใช้ ajax ในการส่งค่า ตัว validate มันใช้งานได้ปกติ

แต้ถ้าไม่ใช้ validate ใช้การส่งค่าผ่าน ajax อย่างเดียว มันก็ส่งค่าได้ค่ะ

จุดประสงค์คือจะให้มันทำการ validate ก่อน ที่จะส่งค่าไปค่ะ

Date : 2010-07-20 08:10:24

By : Avrill

No. 8

เอี่ยว

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

บอกตรงๆ ผมไม่เคยเขียน prototype และ prototype base oop จากโค้ดผมคิดว่า ควร override เมธอด onSubmit ในคลาส Validation

จาก

onSubmit : function(ev){
if(!this.validate()) Event.stop(ev);
},

ไม่รู้ว่าจะ override อย่างไร แต่ลองแก้ดูก่อน
onSubmit : function(ev){
// ถ้าผ่านให้เรียก sendReport
if(this.validate()) sendReport();

// หยุด submit event ทุกกรณี
Event.stop(ev);
},

คับ ลองแก้ดูก่อน ถ้า ok ค่อยหาวิธีที่ไม่แก้คลาสต้นแบบ ก็คือ override ใน คลาสลูกเอา

ปล. คิดว่าน่าจะทำงานนะครับ

http://gunner.freetzi.com

Date : 2010-07-20 08:27:27

By : pjgunner

No. 9

luk101

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

เขียนแบบ html5 ไปเลยครับ <input name=" " id="" type="text" required />
จบ ไม่ต้องใช้ ajax jquery javascript ให้ยุ่งยาก

Date : 2012-12-06 20:09:37

By : luk101

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยดูให้หน่อยจ้า เกี่ยวกับการ validate form และการส่งค่า ด้วย prototype

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); ช่วยดูให้หน่อยจ้า เกี่ยวกับการ validate form และการส่งค่า ด้วย prototype

No. 1

No. 2

No. 3

No. 4

No. 5

No. 6

No. 7

No. 8

No. 9

ค้นหาข้อมูล

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

Notice

ช่วยดูให้หน่อยจ้า เกี่ยวกับการ validate form และการส่งค่า ด้วย prototype