1

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

Community
  • 1
  • 1
nabnub
  • 41
  • 8
  • Welcome to Stack Overflow! You might want to check out [how to ask a question](http://stackoverflow.com/help/how-to-ask). Formatting your question correctly will go a long way to getting you the answer you are looking for. – Gary Storey Jun 01 '15 at 19:07
  • What browser are you using? Look at this page for compatibility. http://www.w3schools.com/tags/att_input_required.asp As far a centering and all other styling that's basic CSS, you should post your code on jsfiddle.net – DivineChef Jun 01 '15 at 19:29
  • thanks, I'm using chrome – nabnub Jun 01 '15 at 19:42

1 Answers1

2

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();
Daemedeor
  • 1,013
  • 10
  • 22
  • Thanks, I'm trying to understand what is jquery validation – nabnub Jun 01 '15 at 20:19
  • jQuery Validation is hosted at this site[http://jqueryvalidation.org/]. basically, they do all the standard validation and have an excellent documentation on how to use their API, basically doing front end form validation. It's very robust as its been around since 2006 (forever in tech years) and seems pretty straight forward, if you'd like more help lmk – Daemedeor Jun 01 '15 at 20:22
  • shall I follow these examples: [link](http://runnable.com/UZJ24Io3XEw2AABU/how-to-validate-forms-in-jquery-for-validation) – nabnub Jun 01 '15 at 20:31
  • and this one [link](http://www.sitepoint.com/basic-jquery-form-validation-tutorial/) – nabnub Jun 01 '15 at 20:31
  • yeah sure. jQuery is pretty common validator for many places so its definitely an okay plugin to use, esp if you're already using jQuery on the page – Daemedeor Jun 01 '15 at 20:34
  • Maybe one more thing: I might leave the upload button not required: but the problem is that if nothing has been uploaded, it creates a link on the spreadsheet of a dummy file, how to prevent this? (create url only for file uploaded) – nabnub Jun 01 '15 at 20:41
  • ummmm ... i'm not sure if i can tell you how to prevent that because I don't know how you're creating the link on the backend? Just check if there are any forms on that input/blobs/req.files and then don't create the link and spreadsheet if not there? Also a note: for your UI/UX i'm guessing that you didn't want the lines around the input boxes because it looks cleaner. please do have lines. the average user to be blunt is not smart and they won't know where to click. they might assume there isn't anywhere where they can place their text and leave – Daemedeor Jun 01 '15 at 20:47
  • @nabnub I'm afraid you'll have to be more specific on what is working and what is not and what you are not clear on – Daemedeor Jun 02 '15 at 20:11
  • Actually, I thought to start a new post for this question: here you go: [link](http://stackoverflow.com/questions/30604870/html-css-form-jquery-plugin-validation-not-working) – nabnub Jun 02 '15 at 20:24