HTML/CSS FORM: Data submitted though required field not valid or entered

Question

This is my first time using HTML/CSS to create a form:

While trying to switch from google form to html form for the sake of having an upload button, I've found this very useful answer: Upload file/stackover

Then I looked at improving the design, so I'v found this: CSS HTML Form Designs Template ; (I've used Form Style 10).

So after trying and trying I've managed to do this: JSFIDDLE

the Thanks.html file is missing (as on the original example post)

I'm almost done except few thing to sort out, if anyone can help me out that will be great:

• I'd like all the required values to be checked upon submission I've tried to add required Name: <input type="text" name="name" required /> nevertheless it sends the form data to the spreadsheet then display error message in the 1st required field (basically I'd like nothing to be sent until everything is ok in the form) (I read few things about onclick/onsubmit and type="button or submit" but couldn't sort it out)

• in the Thanks file, I've removed everything and wrote only:

   <div> <p><blink>Thank you <?= name ?>, your application has been received.</blink></p> </div> 

  How can I center this message under the form, increase size and change colour to red please

• I've tried to add the inner-wrap (grey colour around fields) as the template (Form Style 10) by adding: <inner-wrap> instead, but it doesn't work (any idea?)

Thanks you for your help

Answer 1

The reason why it doesn't do what you want is because the button still submits and you have no preventDefault event on submit because they assume you handle it on the backend. But will still display error messages to let the user know something is wrong.

There are several ways you can attack this problem:

1. you could use a 3rd party plugin like jquery validate

2. you can handle it to not submit until you check all the fields and then call form.submit() (via this method you have the final one on the bottom not be input with type='submit' and handle click event and call a validate form method then submit if everything is alright)

3. on the backend you can check the fields to make sure they're all filled out and not even save to whereever

as for your text-centering: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Edit: For form validation, import the jQuery Validate at the top of your page either with the CDN/local js file and then call:

$("#commentForm").validate();