-1

I'm trying to add a "required" attribute to some inputs in my form, but it just doesn't work. The only way it can work is by removing the "value" attribute from the input, but its necessary.

<form id="contact-form" method="POST" action=" <?php echo htmlspecialchars($_SERVER[" PHP_SELF "]) ?>" role="form">
    <div class="row">
        <div class="col-md-6">
            <label for="firstname">Prenom<span class="blue">*</span></label>
            <input type="text" name="firstname" class="form-control" placeholder="votre prenom" value=" <?php echo $firstname ?>" required>
            <p class="comments">Message d'erreur</p>
        </div>
        <div class="col-md-6">
            <label for="lastname">Nom<span class="blue">*</span></label>
            <input type="text" name="lastname" class="form-control" placeholder="votre nom" value=" <?php echo $name ?>" required>
            <p class="comments">Message d'erreur</p>
        </div>
        <div class="col-md-6">
            <label for="email">Email<span class="blue">*</span></label>
            <input type="text" name="email" class="form-control" placeholder="votre email" value=" <?php echo $email ?>" required>
            <p class="comments">Message d'erreur</p>
        </div>
        <div class="col-md-6">
            <label for="phone">Téléphone<span class="blue"></span></label>
            <input type="text" name="phone" class="form-control" placeholder="votre email" value=" <?php echo $phone ?>">
            <p class="comments">Message d'erreur</p>
        </div>
        <div class="col-md-12">
            <label for="name">Message<span class="blue"></span></label>
            <textarea id="message" name="message" class="form-control" placeholder="Votre message" rows="3" value=" <?php echo $message ?>"></textarea>
            <p class="comments">Message d'erreur</p>
        </div>
        <div class="col-md-12">
            <p class="blue"><strong>*Ces informations sont requises</strong></p>
        </div>
        <div class="col-md-12">
            <input type="submit" class="button" value="envoyer">
        </div>

    </div>
    <p class="thankyou">Votre message a été bien envoyé, Merci de m'avoir contacté</p>
</form>

actually, if i remove the "value" attribute, it'll work perfectly... Does anyone knows why this happens ? And how can i keep the value attribute and get "required" working ?

Mahbubul Islam
  • 998
  • 1
  • 10
  • 24
Mehdi Jilali
  • 17
  • 6
  • Required attribute in your example works perfectly. Required attribute role is to make sure the field is completed (is not empty). As you allready have values for fields, then those fields are completed. You are probably looking for a javascript code to do more checks on values. – Andrei Oct 26 '19 at 02:48
  • 1
    Define "doesn't work". What is the exact behavior you're observing and what were you expecting? – David Oct 26 '19 at 02:59
  • @David , i expected the : "please fill the form" message to pop up, but it doesn't. – Mehdi Jilali Oct 26 '19 at 03:10
  • 1
    @MehdiJilali: Are any of the fields empty when you expect this? The code implies that all of the fields have values. – David Oct 26 '19 at 03:11
  • @Andrei Thanks for the explanation, sounds logic that value attribute will automatically cancel required attribute role cause it already has a value by default. Thank you – Mehdi Jilali Oct 26 '19 at 03:11
  • @David thats what i just realized. they already have values lmao. Thanks for the clarification – Mehdi Jilali Oct 26 '19 at 03:13

1 Answers1

-1

remove the space in value attribute, that space is telling the browser that there is a value in that field so the required attribute and placeholder attribute not working

change to

value="<?php echo @$firstname ?>"

from

value=" <?php echo $firstname ?>"

in all the input fields and you can use @ before php variable which is used to avoid the error notice.

Pavan Kumar
  • 164
  • 15