2017-10-21 1 views
2

j'ai essayé d'afficher l'erreur Laravel 5.5 Ajax validation en utilisant jQuery automatiquement,sélecteur Jquery pour tableau de Laravel erreurs de validation

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)

+0

Avez-vous vérifié ma réponse, je pense que vous voulez obtenir la valeur de 'start_date.0' dans 'erreurs'? – C2486

+0

Avez-vous résolu le problème? – C2486

+0

Oui, voir ma réponse ci-dessous –

Répondre

0

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>

+0

sera-t-il possible de l'ajouter en utilisant jquery si le nom est start_date []? – Niladri

+0

Je ne vous comprends pas. append signifie que vous voulez convertir 'start_date [0]' en start_date.0'? – C2486

+0

oui .. l'OP veut l'ajouter en utilisant 'el.find ('input [name ="' + key + '"]' – Niladri

0

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>'); 
}); 
-1
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); 
}