2017-07-22 10 views
0

私はcodeigniter組み込みヘルパーを使用してサーバー側の検証を行うフォームを持っています。私はコントローラでデータを送信するためにajaxを使用しています。私は成功関数で使用しているjsonレスポンスを返します。ここで入力が配列を使用して有効な場合のエラーメッセージの削除

は、コントローラです:

$this->form_validation->set_rules($this->validates()['create']); 
     if($this->form_validation->run()){ 
      $response['status'] = true; 
      $response['message'] = "Successfully added user"; 
      $response['page'] = base_url('/user'); 
      $this->user_model->user_add($this->form_input()['create']); 
     }else{ 
      $errors = array(); 
      foreach ($this->input->post() as $key => $value) { 
       $errors[$key] = form_error($key); 
      } 
      $response['errors'] = array_filter($errors); 
      $response['status'] = false; 
     } 
    $this->jsonresponse($response); 

はここでAjaxコードです:

$.ajax({ 
     url:site_url('user/user_add'), 
     data: $('#user_form').serialize(), 
     type: 'post', 
     dataType: 'json', 
     beforeSend: function(){ 
      console.log('test'); 
     }, 
     success: function(response){ 
      if(response.status == true){ 
       alert(response.message); 
      }else{ 
      $.each(response.errors,function(key,val){ 
       var names = ["firstname","middlename","lastname","username","job"]; 
       if(names.indexOf(key) > -1){ 

        $('input[name="' + key + '"]').next().html(val); 
       }else{ 
        $('input[name="' + key + '"]').next().html(''); 
       } 
      }); 

     } 
     } 
    }); 

は、ここでビューの:

<div class="col-sm-10 col-md-10"> 
     <div class="row container-fluid well" style="background: white; border:3px groove orange;"> 
      <div class="col-md-12 "> 
       <table id="patient_data" class="table display row-border table-condensed" width="100%"> 
        <thead> 
        <tr> 
         <th>ID</th> 
         <th>First Name</th> 
         <th>Middle Name</th> 
         <th>Last Name</th> 
         <th>Birthdate</th> 
         <th>Age</th> 
         <th>Gender</th> 
         <th>Bloodtype</th> 
         <th>Height</th> 
         <th>Weight</th> 
         <th>Address</th> 
         <th>Contact</th> 
         <th>Action</th> 
        </tr> 
        </thead> 
        <tbody></tbody> 
       </table> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

<div class="modal fade" role="dialog" id="patient_modal"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <span class="close" data-dismiss="modal">&times;</span> 
       <h4 class="modal-title"></h4> 
      </div> 
      <div class="modal-body"> 
       <form id="patient_form" autocomplete="off"> 
        <div class="row"> 
        <input type="text" name="id" hidden> 
         <div class="col-md-6"> 
          <div class="form-group"> 
          <label for="firstname">First Name</label> 
          <input type="text" class="form-control" name="firstname"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Middle Name</label> 
          <input type= "text" class="form-control" name="middlename"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Last Name</label> 
          <input type="text" class="form-control" name="lastname"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 


          <label for="firstname">Gender</label> 
          <div class="form-check"> 

           <label for="gender" class="radio-inline" style="padding-right: 20px;"> 

            <input type="radio" id="female" name="gender" value="female"> 

            Female 
           </label> 
           <label for="gender" class="radio-inline"> 
            <input type="radio" id="male" name="gender" value="male"> 
            Male 
           </label> 
           <input type="radio" name="gender" value="" hidden checked> 
           <span class="text-danger"></span> 
          </div> 
         </div> 

         <div class="form-group row"> 
          <div class="col-md-6"> 
           <label for="firstname">Birthdate</label> 
           <input type="date" id="birthdate" class="form-control" name="birthdate"> 
           <span class="text-danger"></span> 
          </div> 
          <div class="col-md-6"> 
           <label for="firstname">Age</label> 
           <input type="text" readonly class="form-control" name="age"> 

          </div> 
         </div> 
         </div> 
         <div class="col-md-6"> 
          <div class="form-group"> 
          <label for="firstname">Height (cm)</label> 
          <input type="text" maxlength="3" class="form-control" name="height" class="extra"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Weight (kg)</label> 
          <input type="text" maxlength="3" class="form-control" name="weight" class="extra"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Blood Type</label> 
          <select name="bloodtype" class="form-control"> 
           <option hidden selected></option> 
           <option value="A-">Blood Type A - Negative</option> 
           <option value="A+">Blood Type A - Positive</option> 
           <option value="B-">Blood Type B - Negative</option> 
           <option value="B+">Blood Type B - Positive</option> 
           <option value="AB-">Blood Type AB - Negative </option> 
           <option value="AB+">Blood Type AB - Positive</option> 
           <option value="O-">Blood Type O - Negative</option> 
           <option value="O+">Blood Type O - Positive </option> 
          </select> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Address</label> 
          <input type="text" class="form-control" name="address"> 
          <span class="text-danger"></span> 
         </div> 
         <div class="form-group"> 
          <label for="firstname">Contact Number</label> 
          <input type="text" maxlength="11" class="form-control" name="contact"> 
          <span class="text-danger"></span> 
         </div> 
         </div> 
        </div>  
      <div class="modal-footer"> 
       <button class="btn btn-primary col-md-2 col-md-push-10 btn-sm submit" id="patient_action" type="button"></button> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

コントローラからの応答ステータスが成功したかであるならば、私はチェック失敗します。失敗した場合、応答エラーを反復して表示します。

私の問題は、フィールドが既に有効である場合、それが隠れたり削除されたりしないことです。私はそれが応答エラーと同じが含まれているが、それは動作していないかどうかをチェックするには、フィールド名を持つ配列を使用します。

フォームの検証が機能していて、jsonresponseがjsonエンコードされたデータを返すMY_Controllerの関数です。

答えて

0

バリデーションルール設定している場合 https://www.codeigniter.com/userguide3/libraries/form_validation.html

//$this->form_validation->set_rules($this->validates()['create']); 

ために、設定されたルールのため、このドキュメントを参照してください正しく、その後

アヤックスの

if($this->form_validation->run()){ 
    $response['status'] = true; 
    $response['message'] = "Successfully added user"; 
    $response['page'] = base_url('/user'); 
    $this->user_model->user_add($this->form_input()['create']); 
}else{ 
    $response['errors'] = $this->form_validation->error_array();//generate error array with input post key 
    $response['status'] = false; 
} 
//set page header in JSON format 
$this->output 
     ->set_content_type('application/json') 
     ->set_output(json_encode($response)); 

変更あなたの成功のコールバックは、あなたのコードに次の変更

success: function(response){ 
    //remove all errors 
    $('#patient_form .form-group').find('span.text-danger').text(''); 
    if(response.status == true){ 
     alert(response.message); 
    }else{ 
    var names = ["firstname","middlename","lastname","username","job"]; 
    //appent all errors 1-1 
    $.each(response.errors,function(key,val){ 
     if(names.indexOf(key) > -1){ 
     $('#patient_form input[name="'+key+'"]').parent('.form-group').children('span.text-danger').text(val); 
     } 
    }); 
    } 
}, 
+0

フォームの検証またはjsonエンコーディングはフィールドが有効な場合にエラーメッセージを取り除く方法。 –

+0

あなたのHTMLフォームを表示してください。 –

+0

更新しました上記のフォームコードを参照してください –

関連する問題