CODEWITHSUNDEEP
htmlcssforms
Julian van Heek
Julian van Heek

Reputation: 15

Textbox with required not working

I made a form, and I put required in every text box. But for some reason it doesn't work.

If anyone knows a solution for this, please let me know.

<form name="mailForm" method="post" action="mail.php" >
                <div class="form">
                    <input class="input-text" type="text" name="Naam" id="Naam" value="Naam *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"  required>
                    <input class="input-text" type="text" name="E-Mail" id="E-Mail" value="E-Mail *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    <input class="input-text" type="text" name="Subject" id="Subject" value="Onderwerp *" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>
                    <textarea class="input-text text-area" name="Bericht" id="Bericht" value="Bericht *"cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required>Bericht *</textarea>

                    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
                </div>
            </form>

Upvotes: 1

Views: 1864

Answers (4)

Ikelie Cyril
Ikelie Cyril

Reputation: 130

Check if you HTML declaration is HTML5 else change

required

to

required="required"

Upvotes: 0

Marvin
Marvin

Reputation: 14255

You have set a default value (value="") and you reset your input elements to that value with your onblur listener every time the element is left emtpy. So the browser will always see content.

Remove your listeners and rely on the placeholder attribute instead:

<form name="mailForm" method="post" action="mail.php">
  <div class="form">
    <input class="input-text" type="text" name="Naam" id="Naam" placeholder="Naam *" required>
    <input class="input-text" type="text" name="E-Mail" id="E-Mail" placeholder="E-Mail *" required>
    <input class="input-text" type="text" name="Subject" id="Subject" placeholder="Onderwerp *" required>
    <textarea class="input-text text-area" name="Bericht" id="Bericht" placeholder="Bericht *" cols="0" rows="0" required></textarea>

    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
  </div>
</form>

Upvotes: 2

Ahmed Salama
Ahmed Salama

Reputation: 2825

It doesn't work because it already has a value, so you can change it to placeholder 

<form name="mailForm" method="post" action="mail.php" >
  <div class="form">
    <input class="input-text" type="text" name="Naam" id="Naam" placeholder="Naam *" required>
    <input class="input-text" type="text" name="E-Mail" id="E-Mail" placeholder="E-Mail *" required>
    <input class="input-text" type="text" name="Subject" id="Subject" placeholder="Onderwerp *" required>
    <textarea class="input-text text-area" name="Bericht" id="Bericht" placeholder="Bericht *"cols="0" rows="0" required>Bericht *</textarea>

    <input class="input-btn" type="submit" value="Verstuur" name="Submit">
  </div>
</form>

Upvotes: 1

Ricardo Mota
Ricardo Mota

Reputation: 161

You can try like this:

        <form name="mailForm" method="post" action="mail.php" >
            <div class="form">
                <input class="input-text" type="text" name="Naam" id="Naam" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"  required="required">
                <input class="input-text" type="text" name="E-Mail" id="E-Mail" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">
                <input class="input-text" type="text" name="Subject" id="Subject" value="" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">
                <textarea class="input-text text-area" name="Bericht" id="Bericht" value=""cols="0" rows="0" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" required="required">Bericht *</textarea>

                <input class="input-btn" type="submit" value="Verstuur" name="Submit">
            </div>
        </form>

See that I changed from required to required="required"

Upvotes: 0

Related Questions