jQuery check form: Đoạn mã xác thực mẫu đơn giản -Simple Form validation jQuery snippet

Advertisement

Bạn cần kiểm tra dữ liệu form trước khi thực hiện bằng Jquery. Có rất nhiều cách, blog24h xin chia sẻ một cách đơn giản như sau:

 

Có rất nhiều plugin xác thực jQuery mạnh mẽ để đáp ứng nhu cầu của bạn, nhưng đôi khi yêu cầu của bạn rất ít đến nỗi bạn không bận tâm đến việc bao gồm các plugin này vào trang của mình, bạn có thể chỉ cần tạo xác thực đơn giản cho Mẫu của mình.

 

Vì vậy, đây là một kịch bản xác thực jQuery đơn giản mà bạn có thể đưa vào trang biểu mẫu của mình và có xác thực gần như mạnh mẽ. Giả sử bạn có dạng HTML tương tự như bên dưới, cần xác thực.

[quote]

<form action=”” method=”post” id=”my_form” novalidate>
<label><span>Name : </span><input type=”text” name=”name” required=”true” /></label>
<label><span>Email : </span><input type=”email” name=”email” required=”true” /></label>
<label><span>Message : </span><textarea name=”message” required=”true” ></textarea></label>
<label><input type=”submit” value=”Submit Form”></label>
</form>

[/quote]

Đây là tập lệnh xác thực jQuery đơn giản, sẽ lặp qua từng trường Form có thuộc tính bắt buộc = “true” và xác thực chúng.

 

Nếu trường trống hoặc email không chính xác, nó sẽ chỉ thay đổi màu đường viền trường thành màu đỏ và khi người dùng nhập lại, màu sẽ thay đổi trở lại bình thường.

[quote][code]

<script type=”text/javascript”>
$(document).ready( function()

{//simple validation at client’s end
$( “#my_form” ).submit(function( event ){ //on form submit
var proceed = true;
//loop through each field and we simply change border color to red for invalid fields
$(“#my_form input[required=true], #my_form textarea[required=true]”).each(function(){
$(this).css(‘border-color’,”);
if(!$.trim($(this).val())){ //if this field is empty
$(this).css(‘border-color’,’red’); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr(“type”)==”email” && !email_reg.test($.trim($(this).val()))){
$(this).css(‘border-color’,’red’); //change border color to red
proceed = false; //set do not proceed flag
}
});

if(proceed){ //if form is valid submit form
return true;
}
event.preventDefault();
});

//reset previously set border colors and hide all message on .keyup()
$(“#my_form input[required=true], #my_form textarea[required=true]”).keyup(function() {
$(this).css(‘border-color’,”);
$(“#result”).slideUp();
});

});
</script>

[/code][/quote]

Code đầy đủ như sau:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<form id="my_form" method="post"><label>Name : <input name="name" required="true" type="text" /></label>
<label>Email : <input name="email" required="true" type="email" /></label>
<label>Message : <textarea name="message" required="true"></textarea></label>
<label><input type="submit" value="Submit Form" /></label></form><script type="text/javascript">
$(document).ready( function()

{//simple validation at client's end
$( "#my_form" ).submit(function( event ){ //on form submit
var proceed = true;
//loop through each field and we simply change border color to red for invalid fields
$("#my_form input[required=true], #my_form textarea[required=true]").each(function(){
$(this).css('border-color','');
if(!$.trim($(this).val())){ //if this field is empty
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
//check invalid email
var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
$(this).css('border-color','red'); //change border color to red
proceed = false; //set do not proceed flag
}
});

if(proceed){ //if form is valid submit form
return true;
}
event.preventDefault();
});

//reset previously set border colors and hide all message on .keyup()
$("#my_form input[required=true], #my_form textarea[required=true]").keyup(function() {
$(this).css('border-color','');
$("#result").slideUp();
});

});
</script>

 

Demo

Here’s the demo of simple jQuery validation script.




 

Advertisement

NotePad24h tạo ghi chú miễn phí và lưu trữ vĩnh viễn

Comment của bạn

avatar
  Theo Dõi  
Thông báo