CODEWITHSUNDEEP
html
Coding Gal
Coding Gal

Reputation: 145

"Required" HTML5 tag not working

<form id="contact_form" action="/contact-verzenden" method="POST" enctype="multipart/form-data" >
    <input  class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" value="Jouw naam" required/>
    <input  class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;" value="Telefoon" required/>
    <input  class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;" value="E-mail" required/>
    <textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required >Vraag/opmerking</textarea>
    <input id="submit_button" type="submit" value="Verzenden" />
</form>

When I click submit, the data sends regardless of whether something has been entered or not.

Even though it's exactly the same as the W3 schools example:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_required

What am I doing wrong?

Upvotes: 0

Views: 54

Answers (3)

MSH
MSH

Reputation: 1287

Because you are already giving him value (value="Jouw naam") and also onblur you are giving it a value ("Naam"). So the value is never empty. That`s why it is submitting the form.

Add placeholder="Jouw naam" instead of value = "Jouw naam"

Hope it helps !!

Upvotes: 0

soorapadman
soorapadman

Reputation: 4509

check this code:

<!DOCTYPE html>
<form id="contact_form" method="POST" enctype="multipart/form-data" >
    <input  class="textbox" type="text" name="name" id="name" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Naam':this.value;" placeholder="Jouw naam" required/>
    <input  class="textbox" type="text" name="name" id="tel" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Telefoon':this.value;"  placeholder="Telefoon" required/>
    <input  class="textbox" type="text" name="email" id="email" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'E-mail':this.value;"  placeholder="E-mail" required/>
    <textarea rows="6" cols="30" type="text" name="message" id="message" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Vraag/opmerking':this.value;" required ></textarea>
    <input id="submit_button" type="submit" value="Verzenden" />
</form>
</html>

Upvotes: 0

ZenithS
ZenithS

Reputation: 997

Because you still have value in every input elements.
Try using placeholder to make it look like your design.

<input  class="textbox" type="text" name="name" id="name" placeholder="test" required/>

Upvotes: 2

Related Questions