0

I've got a form with required fields, but it allows me to submit the form without a value in required fields. What would be the best way to validate this?

<form action="formmail.php" method="post" id="orderform" onsubmit="formmail.php">
    <input name="company" id="company" type="text" class="orderFormFields" placeholder="Company Name" /> 
    <input name="name" id="name" type="text" class="orderFormFields" placeholder="Name" required/>
    <input name="phone" id="phone" type="text" class="orderFormFields" placeholder="Phone" required/> 
    <input name="email" id="email" type="email" class="orderFormFields" placeholder="Email" required/> 
    <button  class="formButton" type='submit' id='submit' value='Submit'/>
</form>
Community
  • 1
  • 1
zd428
  • 61
  • 1
  • 1
  • 7
  • What browser are you testing with? As you can see on http://www.w3schools.com/tags/att_input_required.asp many browser don't yet support this. You also have to make sure, your html document is marked to be HTML 5. It is best to also test the field values inside the formmail.php script – NineBerry Apr 20 '16 at 20:15
  • Thanks. It is declared as HTML 5. What would the PHP validation look like? I mostly work with HTML and CSS. I don't have much experience writing PHP. – zd428 Apr 20 '16 at 20:27
  • See for example http://stackoverflow.com/questions/18820013/html-form-php-post-to-self-to-validate-or-submit-to-new-page – NineBerry Apr 20 '16 at 20:52
  • That looks like it would still let someone submit the form without having the field, then give them an error message. Is there a way to validate onBlur so they know the before they try to submit? – zd428 Apr 20 '16 at 21:01
  • You can do that via JavaScript. But you have to be aware that users can disable JavaScript in their browser. So you have to check in the php anyway. See for example http://stackoverflow.com/a/35642981/101087 – NineBerry Apr 20 '16 at 21:03

1 Answers1

0

You can also use this in your stylesheet to hide the submit until the user provides valid input. Using this method will also insure that the person filling out you form uses an actual email (as opposed to just typing "asdf").

.orderFormFields {
     border-color: #3c3c3c;
}

.orderFormFields:valid {
     border-color: green;
}

Good luck =)

Andrew
  • 1
  • 3
  • I like this solution. What would be the best way to make the button appear only when the name, company, phone, and email fields are all filled in? – zd428 Apr 23 '16 at 15:57