Jquery

Form Validation using jQuery .

Đầu tiên chúng ta tạo 1 form đơn giản với các dữ liệu bạn muốn . Ở đây mình có file index.html như sau :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Simple Form Validation</title>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px;
                                  text-align: right; margin-right: 5px; }
.form-row { padding: 5px 0; clear: both; width: 700px; }
label.error { width: 250px; display: block; float: left;
                                     color: red; padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div><span>Name *</span><input type="text" name="name" /></div>
<div><span>E-Mail *</span><input type="text" name="email" /></div>
<div><span>URL</span><input type="text" name="url" /></div>
<div><span>Your comment *</span><textarea name="comment" ></textarea></div>
<div><input type="submit" value="Submit"></div>
</form>
</body>
</html>

Theo mẩu form của mình thì chúng ta cần kiểm tra 4 đầu vào đó là : name , email , url , comment .
Vậy ta cần có đoạn code jquery như sau . Vì ở đây mình dùng form validater của plugins jquery  nên ta có thêm .

<script type="text/javascript"
                      src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com
                    /view/trunk/plugins/validate/jquery.validate.js"></script>

Và sau đó ta sử dụng form validate plugins của jqurey như sau :

<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a comment."
}
});
});
</script>

Ok , như thế là ta đã có thêm được một kiểu validate bằng jquery tương đối đơn giản .
Các bạn có thể download demo tại đây

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s