jQueryのセレクタ

Question

Iは、自動的

をjQueryのを使用して、Laravel 5.5 Ajaxのエラー検証を表示しようとしましたセレクタに基づいて各要素にエラーメッセージが追加されます。

しかし、私は例<input type="text" name="start_date[]" /> のために、配列フィールドを使用している場合それから私は、エラーの検証を以下ました：

{"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."]}} 

だから私のjavascriptのは、要素を見つけることができませんでしたstart_date.0

を選択する方法その応答でjQueryを使用している要素ですか？ （start_date.0、start_date.1）

Answer 1

使用は、オブジェクトstart_dateの要素0を取得しようとしますが、あなたはこのstart_date.0などを持っているstart_date.0を使用してerrors['start_date.0']代わりerrors.start_date.0

var myObj = {"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."]}}; 
 

 
console.log(myObj.errors['start_date.0']);

要素errorsのように[ ]を使用してstart_date.0を処理してくださいjQueryのドットを許可していませんので、私のhtmlタグは、この<input type="text" id="start_date.0" name="start_date[]" />

ようにする必要がありますように、すべての答えをerrors

var response = {"message":"The given data was invalid.","errors":{"start_date.0":["The start_date.0 field is required when availability is 0."],"start_date.1":["The start_date.1 field is required."],"end_date.0":["The end_date.0 field is required."],"end_date.1":["The end_date.1 field is required."],"dob":["Date of birth is required."]}}; 
 

 
$.each(response.errors, function (key, value) { 
 
    var name = $("input[name='"+key+"']"); 
 
    if(key.indexOf(".") != -1){ 
 
    var arr = key.split("."); 
 
    name = $("input[name='"+arr[0]+"[]']:eq("+arr[1]+")"); 
 
    } 
 
    name.parent().append('<div class="error right-align pink-text text-mute">'+value[0]+'</div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><input type="text" name="start_date[]" value=""></div> 
 
<div><input type="text" name="start_date[]" value=""></div> 
 
<div><input type="text" name="end_date[]" value=""></div> 
 
<div><input type="text" name="end_date[]" value=""></div> 
 
<div><input type="text" name="dob" value=""></div>

Answer 2

おかげで、私は "、id属性を使用してこの問題を終わらせます"セレクタ内のパターンは、私のセレクタは次のようにする必要があります。この el.find('input[id="select_date.0"]')

ので、私のコードは次のようになります。

$.each(response.errors, function (key, value) { 
    el.find('input[id="'+key+'"],input[name="'+key+'"] , select[name="'+key+'"] , textarea[name="'+key+'"]').parent().append('<div class="error right-align pink-text text-mute">'+value+'</div>'); 
}); 

Answer 3

error: function(data){ 
    var response = JSON.parse(data.responseText); 
    var errorString = '<ul style="list-style: none;">'; 
    $.each(response.errors, function(key, value) { 
     errorString += '<li><small>' + value + '</small></li>'; 
    }); 
    errorString += '</ul>'; 

    $("#errors").html(errorString); 
}