複数の要素を1つのjQuery Ajax呼び出しで塗りつぶす

Question

私は、CodeigniterのForm_Validationクラスを使用して、ajaxによるサブミット時にフィールドを検証するこのフォームを持っています。

<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の検証方法を呼び出します。 1つの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 
    });   

});