Question

我想使用.post() jQuery方法验证表单而不刷新页面。

我使用codeigniter进行验证。你能告诉我怎么做对吗？我发现它很混乱......

这是jQuery代码：

$(document).ready(function(){
  $(".form_errors").hide();
  $("#send").on("click",function(){ //the submit button has the id="send"
    $(".form_errors").hide();  //these are <p> for each input to show the error
    var user=$("input.box");
    var data={};
    var names=$("input.box").attr("name");
    for(i=0;i<user.length;i++){
      name=names[i];
      value=user[i].val();
      data.name=value;
    }
    $.post('ksite/account',
           data,
           function(result){
             $("div.answer").html(result);
             for(i=0;i<user.length;i++){
               error_message=<?php echo form_error("?>names[i]<?php ");?>;
               $("p#error_"+names[i]+".form_errors").html(error_message).show();
             }
           }
           return false;});
  });

form_error是CodeIgniter函数。（我想使用ci的人很熟悉。）

表格：

<p id="error_user" class="form_errors"></p>
<input type="text" class="box" name="user">
<p id="error_password" class="form_errors"></p>
<input type="password" class="box" name="password">
<input type="submit" id="send">

表格标签是否必要？如果是的话，我是否必须提及行动和方法？我是否必须指定响应的类型？

我在ksite / account中执行：

/* ...... */
if (!this->form_validation->run(''account")) {
  echo "The account couldn't be made";
} else {
  echo "The account was successfully created  ";
}

P.S.虽然你可能不熟悉codeigniter，但如果有人能告诉我代码是否正确以及可以做些什么改进，我将不胜感激。

Answer 1

这就是我所做的。

您必须使用Ajax才能在不刷新页面的情况下获取数据。

HTML页面

$form = $(form);
var url = $form.attr('action');
dataString = $form.serialize();
$.ajax({
type: "POST",
url: url,
data: dataString,
dataType: "json",
success: function(data) {
$(data).each(function(j,details){
var status = details.status;
var message = details.message;
$('#message_ajax_register').show();
$('#message_ajax_register').html('<div class="alert alert-success">'+message+'</div>');
});
}
});//end of $.ajax**

我首先在我的控制器方法中设置规则，然后验证它。

控制器

    public function update_fest()
    {

        if($this->input->post())
        {
        $this->form_validation->set_rules('txtgpluswebsite', 'Google Plus Page URL', 'trim|xss_clean|prep_url');
        $this->form_validation->set_error_delimiters('<div class="error">', '</div>');

        if($this->form_validation->run() == false){
            $message = validation_errors();
            $data = array('message' => $message,'status'=>0);
        } 
        else{
            $message = $this->add_fest_database();
            $data = $message;
        }
    }
    else{
            $message = "Fest details are required";
            $data = array('message' => $message,'status'=>0);   
        }
    $this->output->set_content_type('application/json');
    $json = $this->output->set_output(json_encode($data));
    return $json;
 }

如果验证运行不为false，则转到add_fest_database（其他函数）。在该职能中，

    function add_fest_database()
    {
        $youtubeWebsite = $this->input->post('txtyoutubewebsite');
        $gplusWebsite = $this->input->post('txtgpluswebsite');
        $this->load->model('model_fest');
        $data = array("fest_youtube"=>$youtubeWebsite,"fest_gplus"=>$gplusWebsite);
        return  data;
     }

如何使用codeigniter form_validation的post（）jquery方法

1 个答案: