การใช้งาน JavaScript Form Validations

ข้อมูลอื่น ๆ เพิ่มเติม และ Download JavaScript Form Validations ได้ที่ http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

1. ทำการแทรก

PLAIN TEXT

CODE:

<script language="JavaScript" src="gen_validatorv2.js" type="text/javascript"></script>

ไว้ก่อนหน้า </head>

2. สร้าง form โดยมีการตั้งชื่อ form ด้วย เช่น

PLAIN TEXT

CODE:

<form name="myform" action="">
    <!----Your input fields go here -->
</form>

3. แทรกคำสั่งด้านล่างต่อไปนี้

PLAIN TEXT

CODE:

<script language="JavaScript">
    var frmvalidator  = new Validator("myform");
</script>

โดยที่ myform คือชื่อของ form นั้นๆ

4. คำสั่งสำหรับตรวจสอบ form input ต่าง ๆ ใช้คำสั่งนี้

PLAIN TEXT

CODE:

<script language="JavaScript">
    var frmvalidator  = new Validator("myform");
    frmvalidator.addValidation("nameforminput","validation", "textalert");
</script>

โดยที่

nameforminput คือชื่อของ form input ของเรา
validation คือคำสั่งที่ต้องการตรวจสอบ ซึ่งจะมีดังต่อไปนี้

required หรือ req เป็นการตั้งให้ใส่ form input นี้เสมอ
maxlen=??? หรือ maxlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่เกินค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "maxlen=25"
minlen=??? หรือ minlength=??? เป็นการตรวจสอบค่าที่ใส่ลงไปว่ามีจำนวนตัวอักษรได้ไม่ต่ำกว่าค่าที่กำหนด เช่น ไม่เกิน 25 ตัวอักษรก็ใช้คำสั่ง "minlen=25"
alphanumeric หรือ alnum เป็นการตรวจสอบค่าที่ใส่ที่ครอบคลุมทั้งตัวเลขและตัวอักษร
num หรือ numeric เป็นการตรวจสอบตัวเลข
alpha หรือ alphabetic เป็นการตรวจสอบตัวอักษร
email เป็นการตรวจสอบความถูกต้องของรูปแบบอีเมล
lt=??? หรือ lessthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่าไม่เกินเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและไม่เกิน 1000 ก็ใส่ "lt=1000"
gt=??? หรือ greaterthan=??? เป็นการตรวจสอบค่าของข้อมูลว่าต้องเป็นตัวเลข และมีค่ามากกว่าเท่าไหร่ เช่น ต้องการค่าที่เป็นตัวเลขและมากกว่า 1000 ก็ใส่ "gt=1000"
regexp=??? เป็นการสร้าง regular expression ตามรูปแบบอื่น ๆ เช่นต้องการให้ใส่ตัวอักษรได้ไม่เกิน 10 ก็ใช้คำสั่ง "regexp=^[A-Za-z]{1,20}$"
dontselect=?? เป็นการตรวจสอบค่าใน selected input items ว่ามีการเลือกค่าไว้หรือเปล่า โดยกำหนดว่าค่าเริ่มต้นที่ห้ามเลือกคืออะไร เช่น selected input items กำหนดค่าเริ่มต้นไว้ที่ 0 ที่มี label ว่า Select one นั้นหมายความว่าห้ามเลือก label Select one เพราะเป็นค่าเริ่มต้น เราจะกำหนดแบบนี้ "dontselect=0"

textalert ส่วนนี้เป็นใส่คำเตือนมีมีการตรวจสอบค่านั้น ๆ แล้วตรงตามเงื่อนไข จะได้เป็น

PLAIN TEXT

CODE:

<script language="JavaScript">
    var frmvalidator  = new Validator("myform");
    frmvalidator.addValidation("FirstName","alpha","Please insert alphabetic character"); 
</script>

ตัวอย่างการใช้งานโดยรวมทั้งหมด

PLAIN TEXT

CODE:

<form action="" name="myform">
    <table cellspacing="2" cellpadding="2" border="0">
        <tbody>
            <tr>
                <td align="right">First Name</td>
                <td><input type="text" name="FirstName" /></td>
            </tr>
            <tr>
                <td align="right">Last Name</td>
                <td><input type="text" name="LastName" /></td>
            </tr>
            <tr>
                <td align="right">EMail</td>
                <td><input type="text" name="Email" /></td>
            </tr>
            <tr>
                <td align="right">Phone</td>
                <td><input type="text" name="Phone" /></td>
            </tr>
            <tr>
                <td align="right">Address</td>
                <td><textarea cols="20" rows="5" name="Address"></textarea></td>
            </tr>
            <tr>
                <td align="right">Country</td>
                <td>   <select name="Country">
                <option value="" selected="">[choose yours] </option>
                <option value="008">Albania </option>
                <option value="012">Algeria </option>
                <option value="016">American Samoa </option>
                <option value="020">Andorra </option>
                <option value="024">Angola </option>
                <option value="660">Anguilla </option>
                <option value="010">Antarctica </option>
                <option value="028">Antigua And Barbuda </option>
                <option value="032">Argentina </option>
                <option value="051">Armenia </option>
                <option value="533">Aruba  </option>
                </select> </td>
            </tr>
            <tr>
                <td align="right">&nbsp;</td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </tbody>
    </table>
</form>
<script language="JavaScript" type="text/javascript">
 var frmvalidator = new Validator("myform");
 frmvalidator.addValidation("FirstName","req","Please enter your First Name");
 frmvalidator.addValidation("FirstName","maxlen=20","Max length for FirstName is 20");
 frmvalidator.addValidation("FirstName","alpha");
 
 frmvalidator.addValidation("LastName","req");
 frmvalidator.addValidation("LastName","maxlen=20");
 
 frmvalidator.addValidation("Email","maxlen=50");
 frmvalidator.addValidation("Email","req");
 frmvalidator.addValidation("Email","email");
 
 frmvalidator.addValidation("Phone","maxlen=50");
 frmvalidator.addValidation("Phone","numeric");
 
 frmvalidator.addValidation("Address","maxlen=50");
 frmvalidator.addValidation("Country","dontselect=0");
</script>