Form validation jquery problem - El Forum - 11-26-2010
[eluser]V4Mp[/eluser]
Hi,
I have a registration form and want to validate the accountname (account) with jquery, to get a realtime validation.
Validation works, but it loads the form as well again in position where the validation is loaded.
I am new to java, ajax and jquery and hope someone can help me.
code see below (sry for my bad english)
Code: <html>
<head>
<title>User Account Create</title>
[removed][removed]
[removed]
pic1 = new Image(16, 16);
pic1.src = "http://localhost/images/loader.gif";
$(document).ready(function(){
$("#account").change(function() {
var usr = $("#account").val();
if(usr.length >= 3)
{
$("#status").html('<img align="absmiddle" src="http://localhost/images/loader.gif" /> Checking availability...');
$.ajax({
type: "POST",
data: "account="+ usr,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#account").removeClass('object_error'); // if necessary
$("#account").addClass("object_ok");
$(this).html(' <img align="absmiddle" src="http://localhost/images/validyes.png" /> ');
}
else
{
$("#account").removeClass('object_ok'); // if necessary
$("#account").addClass("object_error");
$(this).html(msg);
}});}});}
else
{
$("#status").html('The account should have at least 3 characters.');
$("#account").removeClass('object_ok'); // if necessary
$("#account").addClass("object_error");
}});});
//-->
[removed]
</head>
<body>
<?php
// This is a code to check the account from a mysql database table
if(isSet($_POST['account']))
{
$account = $_POST['account'];
$sql_check = mysql_query("SELECT account FROM user_details WHERE account='$account'");
if(mysql_num_rows($sql_check))
{
echo '<span style="color: red;">The account <b>'.$account.'</b> is already in use.</span>';
}
else
{
echo 'OK';
}}
?>
<h1>Become a </h1>
<p>Please fill in the form</p>
<?php
echo form_open(base_url() . 'newaccount/newuser');
$account = array(
'name' => 'account',
'id' => 'account',
'class' => 'inn',
'value' => set_value('account')
);
$givenname = array(
'name' => 'givenname',
'id' => 'givenname',
'value' => set_value('givenname')
);
if(form_error('givenname'))
$givenname['class'] = 'error';
$surname = array(
'name' => 'surname',
'id' => 'surname',
'value' => set_value('surname')
);
if(form_error('surname'))
$surname['class'] = 'error';
?>
<ul>
<li>
<label>Accountname</label>
<div>
<?php echo form_input($account); ?><div id="status"></div>
<?php echo form_error('account', '<div class="errortext">', '</div>'); ?>
</div>
</li>
<li>
<label>Vorname</label>
<div>
<?php echo form_input($givenname); ?>
</div>
</li>
<li>
<label>Nachname</label>
<div>
<?php echo form_input($surname); ?>
</div>
</li>
<li>
</li>
<li>
<div>
<?php echo form_submit(array('name' => 'user'), 'Send!'); ?>
</div>
</li>
</ul>
<?php
echo form_close();
?>
</body>
</html>
Form validation jquery problem - El Forum - 11-26-2010
[eluser]nuwanda[/eluser]
You need a discrete function that handles the account validation and echoes only the result of the validation.
This reply may help:
http://ellislab.com/forums/viewreply/828298/
Form validation jquery problem - El Forum - 11-26-2010
[eluser]V4Mp[/eluser]
I have a function wich das this
Code: function check_exists_useraccount($account)
{
$query_str = "SELECT account from user_details where account = ?";
$result = $this->db->query($query_str, $account);
if ($result->num_rows() > 0)
{
//account exists
return true;
}
else
{
//account doesn't exists
return false;
}
}
But I dont understand how to implent it into the jquery function...
Form validation jquery problem - El Forum - 11-26-2010
[eluser]nuwanda[/eluser]
I'll try to make this clearer for you:
Create a controller method that does something like this to check if the account name is taken:
Code: function exists(){
$account_name = $this->input->post('account_name');
$table = your_table;
$column = your_column;
$query = $this->db->query("SELECT COUNT(*) AS count FROM $table WHERE $column = '$account_name'");
$row = $query->row();
if($row->count > 0){
echo "Account name already exists";
}else{
echo "Account name is available";
}
}
Note the use of echo to return output to the ajax call.
Then your ajax:
Code: var account_name_value = $('#account_name_input').val();
$.ajax({
type: "POST",
url: "/controller/exists",
data: ({account_name: account_name_value}),
dataType: "html",
success: function (result) {
//update page with result from exists function
}
});
|