How do i hide my submit button until my Form is validated

Question

I am currently doing a school project and once again, I have another question to ask! I would like to create a function that prevents my submit button from working unless the value in my "Topic" and "Question" is filled.

What I want to try doing, is to make my Submit button become display: none; if my "topic" and "Question" field is empty.

I have tried using a if (data != 0) or a .strLength extension. However, I am not really sure of how it should work.

Any help will be appreciated

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="TestingTrueQuestionStylesheet.css">

    <script>
      function submitAnswer(){

      var data = document.getElementById("Question").value;
      var topicName = document.getElementById("TopicName").value;


      localStorage.newdata = data;
      localStorage.topicName = topicName;



      }

    </script>
  </head>


  <body>
      <form>
        <fieldset>
              <input placeholder="Topic" id="TopicName" required type="text"></input>
              <br/>
              <textarea placeholder="Question" id="Question" required rows="30" cols="100"></textarea>
              <br/>

              <input type="submit" onclick="submitAnswer()" id="SubmitButton" required ></input>
        </fieldset>
      </form>
  </body>

</html>

Have a look at z666zz666z's answer here - http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms?rq=1 — dmoo, Jul 18 '16 at 16:18
Done hide the button but set its property to disabled i.e. then the validation, if it passes can the reset the disabled attribute i.e. document.getElementById('SubmitButton').disabled = ''; — , Jul 18 '16 at 16:19
A disabled button could be a very confusing UX for the users since they would not be sure how to make it enabled (unless you will leave visual cues on what fields are mandatory in your form). Maybe a solution for you would be allowing users to click submit button but if fields are missing you will render a good intuitive warning/error message on a screen prompting users to type missing information. — anvk, Jul 18 '16 at 16:57
@Anirudha must have misread the question. thought he was. Thanks for ponting out! — Abaddon666, Jul 18 '16 at 17:44
@anvk I just realized that too! Is there any way to do that? I am unsure of how to go about doing it — Justin Soh, Jul 19 '16 at 05:29

Anirudha · Answer 1 · 2016-07-18T17:47:21.127

You should not hide but disable the button.A better solution would be to let user submit the form and then check the forms validity using the checkValidity function

function submitAnswer(){
    var f = document.forms["myform"];//get hold of the form
    if(f.checkValidity()){
         // form is valid
    }
    else{
         //form is invalid
    }

Also you will have to name the form

 <form name="myform">

If you want to disable the button you will have to add onkeyup event handler on each of your form elements and call below function

var f=document.forms['myform'];
var sbmtBtn=document.getElementById('SubmitButton');
function checkFormsValidity(){
        if(f.checkValidity()){
             sbmtBtn.disabled=false;
        }
        else{
             sbmtBtn.disabled=true;
        }
}

Your html will look like

<form name='myform'>
..
<input onkeyup='checkFormsValidity()'..
<textarea onkeyup='checkFormsValidity()'..

disabled button demo

May i know if it is possible for the Question field to only work if a certain number of words are inputted! For example, they cant click submit unless 50 words are inside — Justin Soh, Jul 19 '16 at 05:00
@JustinSoh you can use the `minlength=50` attribute for that input..Its an html5 feature... refer [this](http://www.wufoo.com/html5/attributes/18-minlength.html) — Anirudha, Jul 19 '16 at 12:08

How do i hide my submit button until my Form is validated

1 Answers1