10/10/2018, 10:48

form đăng ký thành viên bằng ajax.

Mình có Code đăng ký thành viên sau:
<script>
Dùng ajax để kiểm tra xem tên tài khoản nhập vào đã được dùng chưa.
<script>
tạo file java check.js để sử lý hàm validate_form().
</script>
<form action="get.php" method="post" onsubmit="return validate_form()>
nếu validate_form() = true thì dẫn đến file get.php để đưa dữ liệu vào database, còn ko thì ko làm gì.
</form>

Nhưng mà khi mình chỉ nhập mỗi tên đăng nhập (đã thỏa mãn chưa ai dùng), rồi bấm submit thì nó tự động chuyển đến file get.php luôn, trong khi những mục như password, email mình vẫn chưa nhập, hàm validate_form() vẫn là false. Các bạn giải thích và sửa giúp mình với. Thanks.
mitdacqn viết 12:58 ngày 10/10/2018
Bạn đưa code lên đi, chắc là do hàm validate_form bạn viết sai cú pháp nên nó bị bỏ qua.
trunghieuhf viết 12:52 ngày 10/10/2018
Mình nghĩ là không sai, bởi khi mình ko nhập trong phần đăng kí tài khoản đầu tiên thì nếu các phần pass, email mà chưa nhập thì nó báo lỗi luông --> hàm validate_form() có hoạt động. Đấy là mình thử trên firefox, còn trền google chorme thì thậm chí ko cần nhập cái gì nó cũng báo là tạo tài khoản thành công. Bó tay.
thuyduongcd viết 12:59 ngày 10/10/2018
trong cái form, chỗ nút submit thì thay bằng:
Code:
<input type="button" onclick="validate_form()" value="submit" />
trong hàm validate_form tiến hành check data, nếu lỗi thì alert lỗi ra, ngược lại kiểm tra hết mà không có lỗi thì gọi hàm submit() để bắt đầu gửi data
trunghieuhf viết 12:49 ngày 10/10/2018
Không được bạn à.
Đây là file kiểm tra tên tài khoản :
<script type="text/javascript">
pic1 = new Image(16, 16);
pic1.src = "loader.gif";

$(document).ready(function(){

$("#username").change(function() {

var usr = $("#username").val();
var re = /^[a-z0-9\.\_]+$/;
var pos = $("#username").val().search(re);
if(usr == '') {
$("#status").html('<font color="red">Tên tài khoản không được để trống.</font>');
$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
}
else
if (pos == -1) {
$("#status").html('<font color="red">Tên tài khoản chỉ gồm các ký tự a-z, 0-9, các dấu ".", "_" (KHÔNG VIẾT HOA, KHÔNG CÓ DẤU CÁCH).</font>');
$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
}
else
if((usr.length >= 5) & (usr.length <=23))
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Đang kiểm tra...');

$.ajax({
type: "POST",
url: "connect.php",
data: "username="+ usr,
success: function(msg){

$("#status").ajaxComplete(function(event, request, settings){

$("#username").removeClass('object_ok');
$("#username").addClass("object_error");
$(this).html(msg);

});

}

});

}
else
{
$("#status").html('<font color="red">Tên tài khoản từ 5 đến 23 ký tự.</font>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
}

});

});
</script>

Tiếp đến là file check.js chứa hàm validate_form() để kiểm tra các thông tin còn lại:
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
var px = document.layers ? "" : "px";
var alert_password_blank = 'Mật khẩu không được để trống.';
var alert_password_length = 'Mật khẩu ít nhất 5 ký tự.';
var alert_repass_blank = 'Xác nhận mật khẩu không được để trống.';
var alert_repass_wrong = 'Xác nhận mật khẩu không đúng.';
var alert_email_blank = 'E-mail không được để trống.';
var alert_email_format = 'Định đạng e-mail không đúng.';
var alert_reemail_blank = 'Xác nhận e-mail không được để trống.';
var alert_reemail_wrong = 'Xác nhận e-mail không đúng.';
var alert_agree_check = 'Bạn phải đồng ý điều khoản sử dụng.';

function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.a ll[id]:d.layers[id];
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;el.cy = el.sy = sy;
el.sP=function(x,y){this.style.left=x+px;this.styl e.top=y+px;};
el.flt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.flt()", 40);
}
return el;
}

$(document).ready(function(){
JSFX_FloatDiv("float_comment", 0, 0).flt();

$("#password").focus(function(){
show_comment('pass_comment');
});
$("#password").blur(function(){
hide_comment('pass_comment');
check_pass();
});

$("#repass").focus(function(){
show_comment('pass_comment');
});
$("#repass").blur(function(){
hide_comment('pass_comment');
check_repass();
});

$("#email").focus(function(){
show_comment('email_comment');
});
$("#email").blur(function(){
hide_comment('email_comment');
check_email();
});

$("#reemail").blur(function(){
check_reemail();
});
});

function validate_form(){
if (check_username() & check_pass() & check_repass() & check_email() & check_reemail() & check_agree())
{
$("#loading_image").css("display","block");
return true;
}
else
{
if (!check_reemail())
$("#reemail").focus();
if (!check_email())
$("#email").focus();
if (!check_repass())
$("#repass").focus();
if (!check_pass())
$("#password").focus();
if (!check_username())
$("#Username").focus();
return false;
}
}

function show_block(id)
{
document.getElementById(id).style.display='block';
}
function hide_block(id)
{
document.getElementById(id).style.display='none';
}

function check_fail(id,content)
{
document.getElementById("alert_"+id).innerHTML ='<img src="error_icon.png" />';
document.getElementById("error_"+id).innerHTML = content;
}
function check_correct(id,content)
{
var str = '<img src="correct_icon.png" />';
document.getElementById("alert_"+id).innerHTML = str;
document.getElementById("error_"+id).innerHTML = '';
}
function check_Ok(id,content)
{
var str = '<img src="tick.gif" />';
document.getElementById("alert_"+id).innerHTML = str;
document.getElementById("error_"+id).innerHTML = '';
}
function check_username()
{
var re = /^[a-z0-9\.\_]+$/;
var pos = $("input#username").val().search(re);
if($("input#username").val() == '')
{
return false;
}
else if($("input#username").val().length < 5 || $("input#username").val().length > 23)
{
return false;
}
else if(pos == -1)
{
return false;
}
else
{
check_correct('username');
return true;
}
}
function show_comment(id)
{
document.getElementById(id).className = "hightlight_comment";
}
function hide_comment(id)
{
document.getElementById(id).className = "";
}
function check_pass()
{
if($("input#password").val() == '')
{
check_fail('pass',alert_password_blank);
return false;
}
else if($("input#password").val().length < 5)
{
check_fail('pass',alert_password_length);
return false;
}
else
{
check_correct('pass');
return true;
}
}
function check_repass()
{
if($("input#repass").val() == '')
{
check_fail('repass',alert_repass_blank);
return false;
}
else if($("input#repass").val() != $("input#password").val())
{
check_fail('repass',alert_repass_wrong);
return false;
}
else{
check_correct('repass');
return true;
}
}
function check_email(){
var email = $("input#email").val();
var apos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");

if(email == '')
{
check_fail('email',alert_email_blank);
return false;
}
else if (apos<1||dotpos-apos<2){
check_fail('email',alert_email_format);
return false;
}
else{
check_correct('email');
return true;
}
}
function check_reemail()
{
if($("input#reemail").val() == '')
{
check_fail('reemail',alert_reemail_blank);
return false;
}
else if($("input#reemail").val() != $("input#email").val())
{
check_fail('reemail',alert_reemail_wrong);
return false;
}
else{
check_correct('reemail');
return true;
}
}
function check_agree()
{
if ($('form #chkAgree').is(':checked'))
{
check_Ok('agree');
return true;
}
else{
check_fail('agree',alert_agree_check);
return false;
}
}


Cuối cùng là form đăng ký:
<form name="frmRegister" id="frmRegister" action="check.php" method="post" onsubmit="return validate_form()">
<div style="float:left; width:71%">
<div align="center"><span class="style9"><span class="title"><span><img src="/logo.png" width="44" height="46" /></span></span>beta</span> <div class="title style1"> Đăng ký tài khoản </div>
</div>
<p align="center" class="title">&nbsp;</p>
<div class="red_main">
<div style="width:90%; float:center; margin-top:5px;">
<div class="reg_line"> Tên tài khoản: </div>
<div class="reg_content">
<input id="username" size="20" type="text" name="username" value="">
<div style="font-size:13px" id="status"></div>
</div>
</div>
<div style="width:90%; float:left; margin-top:20px;">
<div class="reg_line">Mật khẩu: </div>
<div class="reg_content">
<input type="password" name="password" id="password" class="textbox262" />
<div class="style3" id="error_pass"></div>
</div>
<div id="alert_pass"></div>
</div>
<div style="width:90%; float:left; margin-top:10px;">
<div class="reg_line">Nhập lại mật khẩu: </div>
<div class="reg_content">
<input type="password" name="repass" id="repass" class="textbox262" />
<div class="style3" id="error_repass"></div>
</div>
<div id="alert_repass"></div>
</div>
<div style="width:90%; float:left; margin-top:20px;">
<div class="reg_line">Địa chỉ e-mail: </div>
<div class="reg_content">
<input type="text" name="email" id="email" class="textbox262" value="" />
<div class="style3" id="error_email"></div>
</div>
<div class="style2" id="alert_email"></div>
</div>
<div style="width:90%; float:left; margin-top:10px; margin-bottom:30px">
<div class="reg_line">Nhập lại e-mail: </div>
<div class="reg_content">
<input type="text" name="reemail" id="reemail" class="textbox262" />
<div class="style3" id="error_reemail"></div>
</div>
<div id="alert_reemail" style="margin-bottom:10px"></div>
</div>
</div>
<div align="center" style=" clear:both; margin-bottom:20px;">
<div style="color:#CC3300; position:relative"><input type="checkbox" name="chkAgree" id="chkAgree" />
&nbsp;&nbsp;Tôi đã đọc và đồng ý với các điều khoản.
<div id="condition_block"></div>
<div class="reg_comment" id="error_agree"></div>
</div>
<div id="alert_agree"></div>
</div>

<div align="center" style="height:26px; clear:both">
<div style="float:left; display:none;" id="loading_image">
<img src="/ajax_loader.gif" />
</div>
<input type="button" onclick="validate_form()" value="submit" />
<input type="button" value="Quay lại" class="reg_btn" onclick="history.back();" style="*margin-left:-11px;" /> </div>
<p> </p>
<p> </p>
<div align="center" class="style4" style="clear:both"><span style="text-decoration:underline">Lưu ý</span>:<span style="border-left:15px"> E-mail phải tồn tại. </span></div>
<div id="float_comment" >
<p id="pass_comment"></p>
<p id="email_comment"></p>
</div>
</div>
</form>

Bạn thử xem mình làm sai ở đâu.
cayriver viết 12:54 ngày 10/10/2018
ko ai đọc đâu bạn ơi
thuyduongcd viết 13:04 ngày 10/10/2018
Chỗ này:
<form name="frmRegister" id="frmRegister" action="check.php" method="post" onsubmit="return validate_form()">
Nên bỏ cái phần onsubmit="..." đi.

Sửa chỗ này:
Code:
function validate_form(){
if (check_username() & check_pass() & check_repass() & check_email() & check_reemail() & check_agree())
{
$("#loading_image").css("display","block");
document.getElementById("frmRegister").submit();
}
else{
....
}
trunghieuhf viết 13:04 ngày 10/10/2018
Mình đã sửa như bạn nói,nhưng sau khi điền hết các thông tin, bấm submit thì nó ko làm gì cả.
mitdacqn viết 13:04 ngày 10/10/2018
Bạn dùng FF với firebug plugin để xem nó báo lỗi gì.
trunghieuhf viết 12:48 ngày 10/10/2018
Không được bạn à. Bạn có cách khác không
Bài liên quan
0