하나의 jQuery Ajax 호출로 여러 요소 채우기

Question

(Codeigniter의 Form_Validation 클래스를 사용하여) 아약스를 통해 제출할 때 필드를 검증하는이 양식이 있습니다.

<input type="text" name="field1" id="field1"> /> 
<span id="field1_error"></span> 
.... 
<input type="text" name="field2" id="field2"> /> 
<span id="field2_error"></span> 
... 
<input type="text" name="field3" id="field3"> /> 
<span id="field3_error"></span> 
<input type="submit" name="submit" id="btnPublish" /> 

제출시 jQuery는 CI의 유효성 검사 메소드를 호출합니다. 단일 Ajax 호출로 이러한 유효성 검증 오류를 출력하는 가장 좋은 방법은 무엇입니까?

Answer 1

어쩌면이 방법이 더 서버 측에서 유효성 검사를 수행하고 (예를 들어) JSON을 반환

완벽한 솔루션보다 힌트 ...처럼 .. 당신을 도울 수 - 은 $ 진행이 참/거짓 - 검증 결과에 따라와 $ 오류가 배열 (이름, translated_error/또는 "")

부분 PHP :

$res = array(
    'progress' => $progress, 
    'errors' => $errors 
); 
$jsonReturn = json_encode($res); 

//output result 
header('Content-Type: text/html; charset=utf-8');  
echo $jsonReturn; 

부분 jQuery를 :

var errorFields = $([]).add(field1_error).add(field2_error).add(field3_error), 
    mainFields = $([]).add(field1).add(field2).add(field3); 

$('#btnPublish').button().click(function(event){ 

    mainFields.removeClass('ui-state-error'); 
    errorFields.val();             

    $.ajax({ 
    type: 'POST', 
    url: your_url, 
    data: $('#your_form_id').serialize(), 
     async: false, 
     success: function (returned_value){ 
      var obj = $.parseJSON(returned_value); 

      if (obj.progress==true){ 
       alert('Validation successfull'); 

      }else{ 
       $.each(obj.errors, function(index, value) { 
        if (value!=""){ //it will skip those fields with no errors 
         $('#'+index).addClass(('ui-state-error')); 
         $('#'+index+'_error').val(value); 
        } 
       }); 

      }//end return ajax 

     }//end ajax 
    });   

});