Form

onsubmit属性

Thuộc tính onsubmit

「onsubmit」は「formタグ」内の属性として記述するようになっており、submitされた時に起動するイベントです。

「onsubmit」là sự kiện được kích hoạt khi thực hiện submit, nó được viết như là 1 thuộc tính của thẻ form.

preventDefault()メソッド

hàm preventDefault()

preventDefault() メソッドは、ユーザーエージェントに、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。通常submitするとその情報を送信してページを更新することですが、それを防ぐことができます。

hàm preventDefault() chỉ ra rằng khi với các sự kiện không xử lý rõ ràng với user thì không cần thiết tiến hành hành động mặc định như bình thường. Bình thường, khi submit thì nó sẽ gửi thông tin đó đi và update lại page, trong trường hợp này nó sẽ ngăn hành động đó.

formの記述例

ví dụ với form

1//onsubmit属性,event.preventDefault()
2<form id="bank-form" class="form" onsubmit="initializeUserAccount(); event.preventDefault()">
3    <div class="form-group">
4        <input type="email" name="userEmail" class="form-control" placeholder="Email" required>
5    </div>
6    <div class="form-group">
7        <input type="text" name="userFirstName" class="form-control" placeholder="First name" required>
8    </div>
9    <div class="form-group">
10        <input type="text" name="userLastName" class="form-control" placeholder="Last name" required>
11    </div>    <div class="form-group">
12        <input type="number" class="form-control" name="userFirstDeposit" aria-describedby="emailHelp" placeholder="Enter your first deposit" required>    </div>    <div class="form-group">
13        <div class="form-check">
14            <input class="form-check-input" type="radio" name="userAccountType" id="userAccountType1" value="savings" checked required>
15            <label class="form-check-label" for="userAccountType1">                Savings            </label>
16        </div>
17        <div class="form-check">
18            <input class="form-check-input" type="radio" name="userAccountType" id="userAccountType2" value="checkings" required>
19            <label class="form-check-label" for="userAccountType2">                Checkings            </label>
20         </div>
21    </div>
22    <button type="submit" class="btn btn-primary col-12">Submit</button>
23</form>

input

required属性

thuộc tính required

input要素のrequired属性は、その入力項目が必須属性であることをブラウザに知らせることができる。HTML5では、required属性を設定するだけでJavaScriptによる入力チェックがなくてもエラーメッセージを表示させることが可能。

thuộc tính required của phần tử input cho phép mình thông báo với trình duyệt rằng item input đó có thuộc tính bắt buộc phải nhập. đối với HTML5, chỉ cần chúng ta thiết lập thuộc tính required thì không cần phải tiến hành check input bằng javascript cũng có thể hiển thị được các message báo lỗi