การตรวจสอบแบบฟอร์ม AngularJS เมื่อส่ง: ตัวอย่างการลงทะเบียน

การตรวจสอบแบบฟอร์มใน AngularJS

การตรวจสอบแบบฟอร์ม ใน AngularJS เป็นกระบวนการตรวจสอบว่าข้อมูลที่ป้อนในแบบฟอร์มถูกต้องและครบถ้วนหรือไม่ เมื่อผู้ใช้ส่งแบบฟอร์ม การตรวจสอบจะเกิดขึ้นก่อนส่งรายละเอียดไปยังเซิร์ฟเวอร์ กระบวนการตรวจสอบจะทำให้แน่ใจได้ในระดับสูงสุดว่ารายละเอียดสำหรับช่องป้อนข้อมูลถูกป้อนในลักษณะที่ถูกต้อง

ในตัวอย่างโลกแห่งความเป็นจริง ลองสมมติว่าไซต์หนึ่งต้องกรอกแบบฟอร์มลงทะเบียนก่อนจึงจะเข้าถึงไซต์นี้ได้อย่างสมบูรณ์ หน้าลงทะเบียนจะมีช่องสำหรับป้อนข้อมูล เช่น ชื่อผู้ใช้ รหัสผ่าน รหัสอีเมล เป็นต้น

ตัวอย่างเช่น รหัสอีเมลจะต้องอยู่ในรูปแบบ ชื่อผู้ใช้@site.domainหากใครก็ตามใส่เพียงชื่อผู้ใช้ในรหัสอีเมล การตรวจสอบความถูกต้องควรจะล้มเหลว ดังนั้น การตรวจสอบความถูกต้องจะพิจารณาจากการตรวจสอบพื้นฐานเหล่านี้ก่อนที่จะส่งรายละเอียดไปยังเซิร์ฟเวอร์เพื่อดำเนินการประมวลผลเพิ่มเติม

การตรวจสอบแบบฟอร์มโดยใช้ HTML5

การตรวจสอบความถูกต้องของแบบฟอร์มคือกระบวนการตรวจสอบข้อมูลที่ผู้ใช้กรอกลงในแบบฟอร์มบนเว็บก่อนที่จะถูกส่งไปยังเซิร์ฟเวอร์ การตรวจสอบข้อมูลในฝั่งไคลเอ็นต์จะดีกว่าเสมอ เนื่องจากจะเพิ่มค่าใช้จ่ายน้อยลงหากผู้ใช้ต้องแสดงแบบฟอร์มอีกครั้งหากข้อมูลที่ป้อนไม่ถูกต้อง

มาดูกันว่าการตรวจสอบความถูกต้องของแบบฟอร์ม AngularJS สามารถดำเนินการใน HTML5 ได้อย่างไร

ในตัวอย่างของเรา เราจะแสดงแบบฟอร์มการลงทะเบียนง่าย ๆ หนึ่งแบบให้ผู้ใช้ดู โดยผู้ใช้จะต้องป้อนรายละเอียด เช่น ชื่อผู้ใช้ รหัสผ่าน รหัสอีเมล และอายุ

แบบฟอร์มจะมีการควบคุมการตรวจสอบเพื่อให้แน่ใจว่าผู้ใช้ป้อนข้อมูลในลักษณะที่เหมาะสม

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

คำอธิบายรหัส

สำหรับประเภทการป้อนข้อความ เราใช้แอตทริบิวต์ 'required' ซึ่งหมายความว่ากล่องข้อความไม่สามารถว่างเปล่าได้เมื่อส่งแบบฟอร์ม และควรมีข้อความบางประเภทอยู่ในกล่องข้อความ
ประเภทการป้อนข้อมูลถัดไปคือรหัสผ่าน เนื่องจากประเภทอินพุตถูกทำเครื่องหมายว่าเป็นรหัสผ่าน เมื่อผู้ใช้ป้อนข้อความใดๆ ลงในฟิลด์ ข้อความนั้นจะถูกปกปิด
เนื่องจากชนิดอินพุตระบุเป็นอีเมล ข้อความในกล่องจึงต้องตรงกับรูปแบบ name@site.domain.
เมื่อประเภทอินพุตถูกทำเครื่องหมายเป็นตัวเลข หากผู้ใช้พยายามป้อนอักขระใดๆ โดยใช้แป้นพิมพ์หรือตัวอักษร ระบบจะไม่ป้อนอักขระนั้นลงในกล่องข้อความ

หากดำเนินการโค้ดสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์สำหรับการตรวจสอบแบบฟอร์ม AngularJS เมื่อส่ง

เอาท์พุต

หากต้องการดูการดำเนินการตรวจสอบแบบฟอร์ม ให้คลิกปุ่มส่งโดยไม่ต้องป้อนข้อมูลใดๆ บนหน้าจอ

หลังจากที่คลิกปุ่มส่งแล้ว จะมีหน้าต่างป๊อปอัปแสดงข้อผิดพลาดในการตรวจสอบซึ่งจำเป็นต้องกรอกข้อมูลในช่อง

ดังนั้นการตรวจสอบความถูกต้องของตัวควบคุมที่ถูกทำเครื่องหมายว่าจำเป็น ทำให้เกิดข้อความแสดงข้อผิดพลาดหากผู้ใช้ไม่ได้ป้อนค่าใดๆ ในช่องข้อความ

เมื่อผู้ใช้ป้อนค่าใดๆ ในการควบคุมรหัสผ่าน คุณจะสังเกตเห็นสัญลักษณ์ '*' ที่ใช้ปกปิดอักขระที่ป้อน

จากนั้นให้ใส่รหัสอีเมลผิดแล้วคลิกปุ่มส่ง เมื่อคลิกปุ่มส่งแล้ว จะมีหน้าต่างป๊อปอัปปรากฏขึ้นเพื่อแจ้งข้อผิดพลาดในการตรวจสอบว่าช่องดังกล่าวต้องมีสัญลักษณ์ @

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

สุดท้ายนี้ เมื่อคุณพยายามป้อนอักขระใดๆ ในตัวควบคุมข้อความอายุ อักขระนั้นจะไม่ถูกป้อนบนหน้าจอ ตัวควบคุมจะเติมข้อมูลด้วยค่าเมื่อมีการป้อนตัวเลขในตัวควบคุมเท่านั้น

การตรวจสอบแบบฟอร์มโดยใช้ $dirty, $valid, $invalid, $pristine

AngularJS ให้คุณสมบัติเพิ่มเติมสำหรับการตรวจสอบ AngularJS ให้คุณสมบัติต่อไปนี้สำหรับการควบคุมเพื่อวัตถุประสงค์ในการตรวจสอบ

$สกปรก – ผู้ใช้โต้ตอบกับตัวควบคุม
$ถูกต้อง – เนื้อหาของฟิลด์ถูกต้อง
$ไม่ถูกต้อง – เนื้อหาของฟิลด์ไม่ถูกต้อง
$บริสุทธิ์ – ผู้ใช้ยังไม่ได้โต้ตอบกับส่วนควบคุมในขณะนี้

ด้านล่างนี้เป็นขั้นตอนที่ต้องปฏิบัติตามเพื่อดำเนินการตรวจสอบเชิงมุม

ขั้นตอน 1) ใช้คุณสมบัติ no validate เมื่อประกาศแบบฟอร์ม คุณสมบัตินี้บอก HTML5 ว่า AngularJS จะทำการตรวจสอบความถูกต้อง

ขั้นตอน 2) ตรวจสอบให้แน่ใจว่าแบบฟอร์มมีชื่อที่กำหนดไว้ เหตุผลในการทำเช่นนี้ก็คือ เมื่อดำเนินการตรวจสอบเชิงมุม ชื่อแบบฟอร์มจะถูกนำมาใช้

ขั้นตอน 3) ตรวจสอบให้แน่ใจว่าแต่ละตัวควบคุมมีชื่อที่กำหนดไว้ด้วย เหตุผลในการทำเช่นนี้คือ เมื่อดำเนินการตรวจสอบเชิงมุม ชื่อตัวควบคุมจะถูกนำมาใช้

ขั้นตอน 4) ใช้ ng-แสดง คำสั่งเพื่อตรวจสอบคุณสมบัติ $dirty, $invalid และ $valid สำหรับการควบคุม

ลองดูตัวอย่างซึ่งรวมขั้นตอนที่กล่าวมาข้างต้น

ในตัวอย่างของเรา

เราจะสร้างช่องข้อความธรรมดาที่ผู้ใช้ต้องป้อนชื่อหัวข้อในกล่องข้อความ หากไม่ทำเช่นนี้ ข้อผิดพลาดในการตรวจสอบจะถูกเรียกใช้งาน และข้อความแสดงข้อผิดพลาดจะปรากฏให้ผู้ใช้เห็น

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

คำอธิบายรหัส

โปรดทราบว่าเราได้ตั้งชื่อให้กับแบบฟอร์มซึ่งก็คือ "myForm" สิ่งนี้จำเป็นเมื่อเข้าถึงการควบคุมบนแบบฟอร์มสำหรับการตรวจสอบ AngularJS
การใช้คุณสมบัติ “novalidate” เพื่อให้แน่ใจว่าแบบฟอร์ม HTML อนุญาตให้ AngularJS ดำเนินการตรวจสอบได้
เรากำลังใช้ไดเร็กทิฟ ng-show เพื่อตรวจสอบคุณสมบัติ “$dirty” และ “$invalid” ซึ่งหมายความว่าหากมีการแก้ไขกล่องข้อความแล้ว ค่าคุณสมบัติ “$dirty” จะเป็น true นอกจากนี้ ในกรณีที่ค่ากล่องข้อความเป็นค่าว่าง คุณสมบัติ “$invalid” จะกลายเป็น true ดังนั้นหากคุณสมบัติทั้งสองเป็นจริง การตรวจสอบความถูกต้องสำหรับการควบคุมจะล้มเหลว ดังนั้นหากค่าทั้งสองเป็นจริง ng-show จะกลายเป็น true เช่นกัน และการควบคุมสแปนที่มีอักขระสีแดงจะถูกแสดง
ในขั้นตอนนี้ เราจะตรวจสอบคุณสมบัติ “$error” ซึ่งจะประเมินผลเป็น true เช่นกัน เนื่องจากเราได้ระบุค่าสำหรับตัวควบคุมไว้แล้ว ในกรณีนี้ เมื่อไม่มีการป้อนข้อมูลใดๆ ในกล่องข้อความ ตัวควบคุม span จะแสดงข้อความว่า “จำเป็นต้องระบุชื่อผู้ใช้”
หากค่าควบคุมกล่องข้อความไม่ถูกต้อง เราต้องการปิดใช้งานปุ่มส่งด้วย เพื่อให้ผู้ใช้ไม่สามารถส่งแบบฟอร์มได้ เราใช้คุณสมบัติ “ng-disabled” สำหรับการควบคุมเพื่อดำเนินการนี้โดยอิงตามค่าตามเงื่อนไขของคุณสมบัติ “$dirty” และ “$invalid” ของการควบคุม
ในตัวควบคุม เรากำลังตั้งค่าเริ่มต้นของค่าในกล่องข้อความเป็นข้อความ 'AngularJS' การดำเนินการนี้ใช้เพื่อตั้งค่าเริ่มต้นให้กับกล่องข้อความเมื่อฟอร์มแสดงครั้งแรก ซึ่งจะช่วยแสดงให้เห็นวิธีการตรวจสอบความถูกต้องของฟิลด์ในกล่องข้อความได้ดีขึ้น

หากโค้ดถูกดำเนินการสำเร็จ ผลลัพธ์ต่อไปนี้จะปรากฏขึ้นเมื่อคุณรันโค้ดในเบราว์เซอร์

เอาท์พุต

เมื่อฟอร์มแสดงขึ้นในตอนแรก กล่องข้อความจะแสดงค่าของ “AngularJS” และปุ่ม “submit” จะถูกเปิดใช้งาน ทันทีที่คุณลบข้อความออกจากตัวควบคุม ข้อความแสดงข้อผิดพลาดการตรวจสอบจะเปิดใช้งาน และปุ่ม Submit จะถูกปิดใช้งาน

ภาพหน้าจอด้านบนแสดงสองสิ่ง

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

การตรวจสอบแบบฟอร์มโดยใช้ AngularJS Auto Validate

มีสิ่งอำนวยความสะดวกใน AngularJS ที่จะตรวจสอบการควบคุมทั้งหมดในแบบฟอร์มโดยอัตโนมัติโดยไม่จำเป็นต้องเขียนโค้ดที่กำหนดเองสำหรับการตรวจสอบ ซึ่งสามารถทำได้โดยรวมโมดูลที่กำหนดเองที่เรียกว่า "jcs-AutoValidate"

ด้วยโมดูลนี้ คุณไม่จำเป็นต้องวางรหัสพิเศษใดๆ เพื่อดำเนินการตรวจสอบหรือแสดงข้อความแสดงข้อผิดพลาด ทั้งหมดนี้จัดการโดยโค้ดภายใน JCS-AutoValidate

ลองดูตัวอย่างง่ายๆ ของการบรรลุเป้าหมายนี้

ในตัวอย่างนี้

เรากำลังจะสร้างฟอร์มง่ายๆ ที่มีตัวควบคุม TextBox ซึ่งเป็นฟิลด์ที่จำเป็น หากไม่ได้กรอกข้อมูลในตัวควบคุมนี้ ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้น

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

คำอธิบายรหัส

ขั้นแรก เราต้องรวมสคริปต์ “jcs-auto-validate.js” ซึ่งมีฟังก์ชันการตรวจสอบอัตโนมัติทั้งหมด
เราจำเป็นต้องตรวจสอบให้แน่ใจว่าแต่ละองค์ประกอบรวมทั้ง "แท็ก div" ถูกวางไว้ในคลาส "form-group"
นอกจากนี้ ต้องแน่ใจว่าแต่ละองค์ประกอบ (ซึ่งเป็นองค์ประกอบ HTML เช่น การควบคุมอินพุต การควบคุมการขยาย การควบคุม div และอื่นๆ) เช่น การควบคุมอินพุต จะถูกวางไว้ในคลาสกลุ่มแบบฟอร์มด้วย
รวม jcs-autovalidate ไว้ในโมดูล AngularJS JS ของคุณ

เอาท์พุต

ตามค่าเริ่มต้นเมื่อคุณเรียกใช้โค้ดของคุณ แบบฟอร์มด้านบนจะแสดงตามโค้ด HTML

หากคุณพยายามส่งแบบฟอร์ม ข้อความแสดงข้อผิดพลาดจะปรากฏขึ้นว่า "จำเป็นต้องระบุข้อมูลในฟิลด์นี้" ทั้งหมดนี้ทำได้โดยตัวเลือก JCS-AutoValidate

การตอบรับของผู้ใช้ด้วยปุ่มลัดดา

ปุ่ม “ลัดดา” เป็นเฟรมเวิร์กพิเศษที่สร้างขึ้นสำหรับปุ่มที่อยู่ด้านบน Javaต้นฉบับ เพื่อให้เอฟเฟกต์ภาพแก่ปุ่มต่างๆ เมื่อกด

ดังนั้นหากปุ่มได้รับแอตทริบิวต์ "ladda" และถูกกด เอฟเฟกต์การหมุนจะปรากฏขึ้น นอกจากนี้ยังมีสไตล์ข้อมูลที่แตกต่างกันสำหรับปุ่มเพื่อให้เอฟเฟกต์ภาพเพิ่มเติม

มาดูตัวอย่างวิธีดูการทำงานของปุ่มลัดดากัน เราจะเห็นแบบฟอร์มง่ายๆ ซึ่งมีปุ่มส่ง เมื่อกดปุ่ม เอฟเฟกต์การหมุนจะแสดงบนปุ่ม

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

คำอธิบายรหัส

เรากำลังใช้ “ng-ส่ง” คำสั่งเพื่อเรียกใช้ฟังก์ชันที่เรียกว่า “ส่ง” ฟังก์ชั่นนี้จะใช้ในการเปลี่ยนแอตทริบิวต์ ladda ของปุ่มส่ง
คุณลักษณะลัดดาเป็นคุณลักษณะพิเศษของกรอบงานลัดดา คุณลักษณะนี้เองที่เพิ่มเอฟเฟกต์การหมุนเพื่อควบคุม เรากำลังตั้งค่าของแอตทริบิวต์ ladda ให้กับตัวแปรที่ส่ง
คุณสมบัติ data-style เป็นแอตทริบิวต์เพิ่มเติมที่นำเสนอโดยเฟรมเวิร์ก ladda ซึ่งเพิ่งเพิ่มเอฟเฟกต์ภาพที่แตกต่างให้กับปุ่มส่ง
จำเป็นต้องเพิ่มโมดูล 'AngularJS-ladda' ในแอปพลิเคชัน AngularJS.JS เพื่อให้เฟรมเวิร์ก ladda ทำงานได้
เริ่มแรก เรากำลังกำหนดและตั้งค่าของตัวแปรที่เรียกว่า 'การส่ง' เป็นเท็จ ค่านี้ถูกกำหนดไว้สำหรับแอตทริบิวต์ ladda ของปุ่มส่ง ในตอนแรกการตั้งค่านี้เป็นเท็จ เรากำลังบอกว่าเรายังไม่ต้องการให้ปุ่มส่งมีเอฟเฟกต์ลัดดาในตอนนี้
เรากำลังประกาศฟังก์ชันที่ถูกเรียกเมื่อกดปุ่มส่ง ในฟังก์ชันนี้ เรากำลังตั้งค่า 'การส่ง' เป็นจริง สิ่งนี้จะทำให้เอฟเฟกต์ลัดดาถูกนำไปใช้กับปุ่มส่ง

เอาท์พุต

เมื่อแบบฟอร์มแสดงครั้งแรก ปุ่มส่งจะแสดงในรูปแบบที่เรียบง่าย

เมื่อกดปุ่มส่ง ตัวแปรการส่งในคอนโทรลเลอร์จะถูกตั้งค่าเป็นจริง ค่านี้จะถูกส่งผ่านไปยังแอตทริบิวต์ "ladda" ของปุ่มส่งซึ่งทำให้เกิดเอฟเฟกต์การหมุนของปุ่ม

สรุป

การตรวจสอบความถูกต้องสำหรับตัวควบคุม HTML ของกล่องข้อความสามารถทำได้โดยใช้แอตทริบิวต์ 'จำเป็น'
ใน HTML5 มีการเพิ่มการควบคุมใหม่ๆ เช่น รหัสผ่าน อีเมล และหมายเลข ซึ่งมีชุดการตรวจสอบยืนยันของตัวเอง
การตรวจสอบความถูกต้องของแบบฟอร์มใน AngularJS ได้รับการดูแลโดยดูที่ค่า $dirty, $valid, $invalid และ $pristine ของตัวควบคุมแบบฟอร์ม
การตรวจสอบอัตโนมัติในแอปพลิเคชัน AngularJS สามารถทำได้โดยใช้โมดูลตรวจสอบความถูกต้องอัตโนมัติของ JCS
คุณสามารถเพิ่มปุ่ม Ladda ลงในแอปพลิเคชัน Angular.js เพื่อให้ผู้ใช้รู้สึกดีขึ้นเล็กน้อยเมื่อกดปุ่ม

ที่คุณอาจชอบ:

การตรวจสอบแบบฟอร์มใน AngularJS

การตรวจสอบแบบฟอร์มโดยใช้ HTML5

คำอธิบายรหัส

เอาท์พุต

บทความที่เกี่ยวข้อง

การตรวจสอบแบบฟอร์มโดยใช้ $dirty, $valid, $invalid, $pristine

คำอธิบายรหัส

เอาท์พุต

การตรวจสอบแบบฟอร์มโดยใช้ AngularJS Auto Validate

คำอธิบายรหัส

เอาท์พุต

การตอบรับของผู้ใช้ด้วยปุ่มลัดดา

คำอธิบายรหัส

เอาท์พุต

สรุป