sélecteur Jquery pour tableau de Laravel erreurs de validation

Question

j'ai essayé d'afficher l'erreur Laravel 5.5 Ajax validation en utilisant jQuery automatiquement,

Lorsque pour le champ unique, il était un travail, d'utiliser le code suivant:

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

Le code ci-dessus ajoutera un message d'erreur à chaque élément en fonction du sélecteur.

Mais si j'utiliser le champ de tableau, par exemple <input type="text" name="start_date[]" /> Puis je me suis après validation d'erreur:

{"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."]}} 

Donc, mon javascript n'a pas pu trouver les éléments start_date.0

Comment choisir l'élément utilisant jQuery avec cette réponse? (start_date.0, start_date.1)

Answer 1

Utilisez errors['start_date.0'] à la place 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']);

En utilisant start_date.0 il tente d'obtenir l'élément 0 dans l'objet start_date, mais vous avez cette start_date.0 comme élément de errors donc utiliser la parenthèse [ ] pour traiter start_date.0 comme élément de 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

Merci pour toute réponse, je finis ce problème en utilisant l'attribut id, donc mon balise html devrait être comme ça <input type="text" id="start_date.0" name="start_date[]" />

Depuis jquery ne permet pas de point " " modèle dans le sélecteur, mon sélecteur doit être comme ça el.find('input[id="select_date.0"]')

Alors Mon code devrait être:

$.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); 
}