Cara Membuat Validasi Form Dengan AngularJs

Validasi form adalah alert atau informasi yang diberikan dari ketentuan form input yang sudah kita buat. Contoh ketentuan form seperti ketika kita melakukan input data tidak boleh kosong, atau ketika kita masukkan data harus sesuai tipe data yang kita masukkan dan masih banyak lagi. Dan pada kesempatan kali ini saya akan membahas tentang Cara Membuat Validasi Form Dengan AngularJs.

Cara Membuat Validasi Form Dengan AngularJs langkah yang pertama saya akan buat terlebih dahulu struktur htmlnya seperti script di bawah ini. Dan untuk templatenya saya menggunakan bootstrap versi 4.

<!doctype html>
<html lang="en" ng-App="myApp">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>

    <title>Cara Membuat Validasi Form Dengan AngularJs</title>
  </head>
  <body ng-controller="myCon">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="text-center">Cara Membuat Validasi Form Dengan AngularJs</h1>
          <form>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" ng-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
              <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">Password</label>
              <input type="password" ng-model="pass" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <button type="submit" class="btn btn-primary" ng-click="submit()">Submit</button>
          </form>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

<!doctype html>

<head>

<title>Cara Membuat Validasi Form Dengan AngularJs</title>

</head>

<h1 class="text-center">Cara Membuat Validasi Form Dengan AngularJs</h1>

<form>

<label for="exampleInputEmail1">Email address</label>

<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<button type="submit" class="btn btn-primary" ng-click="submit()">Submit</button>

</form>

</div>

</body>

</html>

Dan langkah selanjutnya kita akan membuat controller angularjs untuk melakukan pengecekan form input tidak boleh kosong dan jika kosong kita akan munculkan alert yang berisikan keterangan email atau password tidak boleh kosong seperti script di bawah ini.

<script>
      var modul = angular.module("myApp",[]);
      modul.controller("myCon",function($scope){
        $scope.submit = function(){
          if($scope.email == null){
            alert("Email Wajib Di Isi !")
          }else if($scope.pass == null){
            alert("Password Wajib Di Isi !")
          }else{
            alert("Data Berhasil Di Simpan !")
          }
        }

      })
    </script>

var modul = angular.module("myApp",[]);

modul.controller("myCon",function($scope){

$scope.submit = function(){

if($scope.email == null){

alert("Email Wajib Di Isi !")

}else if($scope.pass == null){

alert("Password Wajib Di Isi !")

}else{

alert("Data Berhasil Di Simpan !")

}

})

</script>

Script di atas saya buat fungsi submit di dalam controller dengan membuat kondisi dengan menggunakan if sama dengan null yang berarti data kosong dan alert akan ditampilkan.

Demikian artikel tentang Cara Membuat Validasi Form Dengan AngularJs. Semoga bermanfaat dan selamat mencoba.

Facebook DUMET School

Categories