[SF 5]Mon champ ne s'affiche que sur Firefox

**mickasou** · 23/03/2020, 14h53

Salut à tous,

J'ai créé un formulaire très basique que j'ai envoyé à twig. Sur Firefox tout mes champs sont visibles et lorsque je remplis le formulaire et le valide, j'ai bien mon annonce qui s'ajoute dans ma BDD, mais avec Chrome je rencontre un problème.

Tout d'abord, seul mon champ image n'est pas affiché. Il m'affiche le label et pas le input. Ensuite si je remplis le formulaire et que je le valide ( sans remplir le champ image forcément...) j'ai dans ma console cette erreur :

An invalid form control with name='ad[image]' is not focusable.

Voici mon formType:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?php
 
namespace App\Form;
 
use App\Entity\Ad;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
 
class AdType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class)
            ->add('description',TextareaType::class)
            ->add('city',TextType::class)
            ->add('image',TextType::class);
 
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Ad::class,
        ]);
    }
}

mon Controller:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
/**
 * Allow to create an Ad
 *@Route("/profile/ajouter-annonce", name="add_ad")
 * @param Request $request
 * @param EntityManagerInterface $manager
 * @return Response
 */
public function addAd(Request $request, EntityManagerInterface $manager)
{
    $ad = new Ad();
    $form = $this->createForm(AdType::class, $ad);
    $form->handleRequest($request);
 
    if ($form->isSubmitted() && $form->isValid()){
        $ad->setUser($this->getUser());
        $manager->persist($ad);
        $manager->flush();
 
        $this->addFlash('success', 'Votre annonce a bien été ajouté');
        return $this->redirectToRoute('user_ads');
    }
 
    return $this->render('user/addAd.html.twig', [
        'form' => $form->createView(),
    ]);
 
}

et mon Twig :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
{% extends 'base.html.twig' %}
 
{% block body %}
<h1>Ajouter une annonce</h1>
 
{{form_start(form)}}
{{form_widget(form)}}
 
<button type="submit">Ajouter</button>
 
{{form_end(form)}}
 
{% endblock %}

Comme vous le voyez, mon champ image est basique, c'est seulement un TextType, tout comme le "city" ou le "title" mais il ne s'affiche pas sous chrome seulement
rendu sous chrome :

Nom : imgChrome.png
Affichages : 535
Taille : 28,7 Ko

Nom : imgChrome.png
Affichages : 535
Taille : 28,7 Ko

rendu sous Mozilla :

Nom : imgMozilla.png
Affichages : 484
Taille : 12,5 Ko

Avez-vous une idée pour gérer ce problème que chrome m'affiche ?

**mickasou** · 23/03/2020, 14h55

J'ai oublié de précisé que si je passe mon champ image de TextType à FileType (par exemple) le champ s'affiche et je n'ai pas d'erreur dans la console...

**andry.aime** · 24/03/2020, 06h41

Bonjour

Retire cette ligne de ton Twig

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit">Ajouter</button>

et utilise un SubmitType dans ta classe de Form.
Et si tu n'as rien n'a personnalisé dans ton formulaire, utilise juste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{{form(form)}}

A+.

**mickasou** · 24/03/2020, 11h12

Bonjour Andry,

J'ai fais les changements mais j'ai toujours le champ image qui n'apparaît pas. Ça apparaît sous Mozilla et Edge mais pas chrome

**armel18** · 24/03/2020, 12h20

bonjour,
Essaie de supprimer la validation html 5:

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% extends 'base.html.twig' %}
 
{% block body %}
<h1>Ajouter une annonce</h1>
 
{{ form_start(form, {attr: {'novalidate': 'novalidate'}}) }}
 
{{form_widget(form)}}
 
<button type="submit">Ajouter</button>
 
{{form_end(form)}}
 
{% endblock %}

**mickasou** · 24/03/2020, 13h49

Bonjour armel,

Ça ne change rien. C'est seulement sur mon champ image que ça n'apparaît pas ( et seulement sur Chrome) alors que mon champ city et title sont aussi en TextType....

**andry.aime** · 24/03/2020, 14h37

Re,

Normalement ça devrait fonctionner avec le code de armel18.

Essaie avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 ->add('image',TextType::class, ['required'=>false])

Sinon, tu peux nous montrer le code HTML source généré qui se trouve sur chrome?

A+.

**mickasou** · 24/03/2020, 15h25

Re,

Idem pour cette méthode, rien ne change. Je vous listes ce que j'ai déjà essayé de faire, en plus de vos recommandations :

- Supprimer tout les scripts et mes fichiers CSS
-Passer mon code html sur le w3c validator qui m'a reconnu une erreur mais qui venait de bootstrap ( une div qui contenait un attribut "x-placement")
- J' ai supprimé cette div...

Rien n'y fait...

Voici mon code source ( je t'épargne la toolbar symfony

) :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Welcome!</title>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">
        <link rel="stylesheet" href="/build/vendors~app.css"><link rel="stylesheet" href="/build/app.css">    </head>
    <body class="">
    <header style="background-image:">
    <nav>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">SymBnB</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
 
  <div class="collapse navbar-collapse" id="navbarColor03">
    <ul class="navbar-nav w-100 d-flex justify-content-end mr-5">
      <li class="nav-item active">
        <a class="nav-link" href="/">Accueil <span class="sr-only">(current)</span></a>
      </li>
           <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Mon compte</a>
    <div class="dropdown-menu" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: -5px; left: -30px; will-change: transform;" x-placement="bottom-start">
      <a class="dropdown-item" href="/profile/mes-annonces">Mes annonces</a>
      <a class="dropdown-item" href="#">Mes réservations</a>
      <a class="dropdown-item" href="#">Tableau de bord</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="/logout"><i class="fas fa-sign-out-alt"></i> Déconnection</a>
    </div>
  </li>
          </ul>
  </div>
</nav>    </nav>
 
    </header>
        <main>
 
        <h1>Ajouter une annonce</h1>
 
<form name="ad" method="post">
<div id="ad"><div class="form-group"><label for="ad_title" class="required">Title</label><input type="text" id="ad_title" name="ad[title]" required="required" class="form-control" /></div><div class="form-group"><label for="ad_description" class="required">Description</label><textarea id="ad_description" name="ad[description]" required="required" class="form-control"></textarea></div><div class="form-group"><label for="ad_city" class="required">City</label><input type="text" id="ad_city" name="ad[city]" required="required" class="form-control" /></div><div class="form-group"><label for="ad_image" class="required">Image</label><input type="text" id="ad_image" name="ad[image]" required="required" class="form-control" /></div><input type="hidden" id="ad__token" name="ad[_token]" value="al0YrhADTBvyzH65ePmjKDOalOEVlkIauP3xU-GGQuU" /></div>
 
<button type="submit">Ajouter</button>
 
</form>
 
        </main>
 
                <script src="/build/vendors~app.js"></script><script src="/build/app.js"></script>

**armel18** · 24/03/2020, 16h45

je viens de tester le formulaire html généré , Chrome n’apprécie pas le sélecteur d'identifiant ad_image de l'attribut input.
Change le préfixe ad du formulaire en add par exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
class AdType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class)
            ->add('description',TextareaType::class)
            ->add('city',TextType::class)
            ->add('image',TextType::class);
 
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Ad::class,
        ]);
    }
 
/**
  les champs seront préfixés par add
*/
  public function getBlockPrefix(): string
    {
        return 'add';
    }
 
 
}

**mickasou** · 24/03/2020, 17h13

Je dit ouiiiiii

Merci ça marche niquel maintenant. J'étais en train de chercher quel script me bloquer sur chrome, je faisais fausse route.
En tout cas merci pour tout et merci à vous 2 d'avoir pris de votre temps pour m'aider.

[SF 5]Mon champ ne s'affiche que sur Firefox [4.x]

Symfony PHP

Discussions similaires

Partager

Partager