Force user to fill all fields before enabling form submit

Question

I have a form containing various fields.

My aim is to enable the submit button only when the user has filled in all fields.

So far, I'm able to force the title field to have content before submit button is enabled. How do I make it so that all other fields need to be filled too before submit button is enabled.

    jQuery("input[type='text']").on("keyup", function () {
        if (jQuery(this).val() != "" ) {
            if (jQuery("#titlenewtide").val() != '')
            {
                jQuery("#subnewtide").removeAttr("disabled");
            }
        } else {
            jQuery("#subnewtide").attr("disabled", "disabled");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
        Title: <input id="titlenewtide" type="text" name="title" required> <br>
        Description: <textarea name="description" id="description"></textarea> <br>
        Tag:  <input id="newtag" type="text" name="newtag" required> <br>
        Category: <input type="radio" name="category" value="19" required> Animation
        <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
    </form>

Note that I am loading the JavaScripts in my footer.

I will bounty this question with 100 points when eligible in hopes for a solution that will work in all browsers. — Henrik Petterson, Aug 01 '15 at 13:37
Be glad, I have hopefully a very nice solution to upload soon. — Maytham Fahmi, Aug 09 '15 at 01:12

cнŝdk · Accepted Answer · 2018-11-26T13:22:45.667

Make the changes take effect after changing inputs values:

On each input change, test the values of other inputs and checked state of radio, if all inputs has been entered it will make the submit button enabled:

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}

inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

Demo:

var inputs = $("form#myForm input, form#myForm textarea");

var validateInputs = function validateInputs(inputs) {
  var validForm = true;
  inputs.each(function(index) {
    var input = $(this);
    if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
      $("#subnewtide").attr("disabled", "disabled");
      validForm = false;
    }
  });
  return validForm;
}


inputs.change(function() {
  if (validateInputs(inputs)) {
    $("#subnewtide").removeAttr("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

Also it uses the form id="myForm", so you can use it to validate only specific forms in your pages.

Note: This is tested and working on Chrome, Firefox and IE.

EDIT:

Make the changes take effect when we type in the inputs:

In the previous code we are using onchange event handler to call the function so it's only called when we click outside a given input (after change).

To perform the call automatically when the user enters a character in a field (the last one) we need to use the onkeyup event so we don't need to click outside of it.

This is the changed code you need :

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

When clicking inside an input, and then clicking outside of it, it will enable the submit button...? — Henrik Petterson, Aug 01 '15 at 14:36
no need to iterate `inputs` using `each` to apply change handler ... `inputs.change()` is same thing — charlietfl, Aug 01 '15 at 14:36
@HenrikPetterson yes but only if all the inputs was entered/checked. — cнŝdk, Aug 01 '15 at 14:40
No, I just tested this on latest version of FF and was able to enable the submit button even when there are no content inside the fields. — Henrik Petterson, Aug 01 '15 at 14:41
@HenrikPetterson I just edited it, and I tested it with FF and IE and it works perfectly — cнŝdk, Aug 01 '15 at 15:45
Thank you for the update. I can't seem to make this work correctly. Note that I am loading the JS code in my footer. Is that the cause of the problem? — Henrik Petterson, Aug 03 '15 at 21:15
If you enter something in every field the button enables, then if you remove content from any field it remains enabled. OP didnt specify this behaviour, but its pretty common. — Jamiec, Aug 04 '15 at 15:32
@Jamiec Thank you for pointing it out, I fixed it, we only need to reset the button to disabled by adding this line `$("#subnewtide").attr("disabled", "disabled");` before returning `false`. — cнŝdk, Aug 05 '15 at 00:29
@HenrikPetterson I don't think so but it may be that, try to includ ethe script in the head of the page and test it, because anyway the function call should be atached to the change event of the inputs once the page is loaded. — cнŝdk, Aug 05 '15 at 00:32
@chsdk I ran final tests with this code and everything is working beside one major issue. In FF and likely all browsers, the submit button is enable only once the user clicks outside of the textarea. To test this, click the radio button first, then fill all the input/textarea... one you are at the last one, the submit button doesn't get enabled until you click outside of it, which is highly confusing for the user. Do you have a fix for this? Thanks for the code regardless, I learned a lot! — Henrik Petterson, Aug 07 '15 at 16:37
@HenrikPetterson Yes of course we can do it we should just use the `onkeyup` event instead of the `onchange` event to perform the change instantly when the users enters some characters, take a look at my EDIT you will find what you need. — cнŝdk, Aug 07 '15 at 17:44

Robin Carlo Catacutan · Answer 2 · 2015-08-01T14:34:01.633

10

Use this code below. On each input, it will check all the form fields by using this function validate().

jQuery("input[type='text'], textarea").on("input", function () {
    var isValid = validate();
    if (isValid) {
      jQuery("#subnewtide").removeAttr("disabled");
    } else {
        jQuery("#subnewtide").attr("disabled", "disabled");
    }
});


function validate() {
  var isValid = true;
  $('input, textarea').each(function() {
    if ($(this).val() === '')
        isValid = false;
  });
  return isValid;
}

Fiddle

Update

To make it validate if the form has id="new_tide" and fix about the radio button.

$("input[type='text'], textarea").on("change input", function() {
  validate($(this));
});

$("input:radio[name='category']").on("change", function() {
    validate($(this));
});

function validate(self) {
  if (self.parents("form:first").attr("id") == "new_tide") {
    var isValid = true;
    $('input[type="text"], textarea').each(function() {
      if ($(this).val() === '')
        isValid = false;
    });

    if (!$("input:radio[name='category']").is(':checked'))
      isValid = false;

    if (isValid) {
      $("#subnewtide").removeAttr("disabled");
    } else {
      $("#subnewtide").attr("disabled", "disabled");
    }
  }
}

Fiddle

edited Aug 01 '15 at 14:34

answered Aug 01 '15 at 13:57

Robin Carlo Catacutan

13,249
11
52
85

1

This is very nice. Although 2 adjustments. Can i make it only target if form has id="new_tide" and currently the submit button is enabled prior to the radio button (category) being selected...? – Henrik Petterson Aug 01 '15 at 14:01
1

note that `input` event is not available in older browsers and some have quirks when removing characters – charlietfl Aug 01 '15 at 14:09
@HenrikPetterson I have update the code to target if the form has `id` "new_tide" – Robin Carlo Catacutan Aug 01 '15 at 14:21
1

Can be shortened and optimized to just `function validate(){ $('input, textarea').each(function(){ if ($(this).val() === '') return false }); return true }` – SeinopSys Aug 01 '15 at 14:21
@charlietfl Updated, I added `change, input` so it should work now on older browser. – Robin Carlo Catacutan Aug 01 '15 at 14:23
@RobinCarloCatacutan Did you make the final updates to the fiddle as well? Also, did you implement DJDavid98's suggestion? I will definitely bounty this one 100 points when eligible, this has saved me a lot of work. – Henrik Petterson Aug 01 '15 at 14:24
events are space separated not comma delimited in `on()` – charlietfl Aug 01 '15 at 14:25
@HenrikPetterson Yeah updated, there's another answer other than mine maybe you can check that also. – Robin Carlo Catacutan Aug 01 '15 at 14:31
@RobinCarloCatacutan Thank you very much. Allow me to perform a few tests before I accept it as correct. – Henrik Petterson Aug 01 '15 at 14:37
@RobinCarloCatacutan I just started a 100 point bounty on this. I have added this in my test environment and it doesn't seem to work correctly. Note that I am loading the JS code at the very footer of the page, is that a problem in this case? – Henrik Petterson Aug 03 '15 at 21:14
@HenrikPetterson Are you adding those input fields dynamically? Also are you getting any errors on your console tab? No I don't think putting JS code at the footer will cause a problem as long as it's before the ending `
` tag.
– Robin Carlo Catacutan Aug 04 '15 at 05:25
I believe the problem is that you need to wrap it into jQuery(document).ready(function () {}...? – Henrik Petterson Aug 04 '15 at 17:50
@HenrikPetterson Yes, if you haven't wrap that yet. – Robin Carlo Catacutan Aug 04 '15 at 18:03

Johan Karlsson · Answer 3 · 2015-08-03T22:14:38.713

6

Here's how you can do it:

$(document).ready(function () {
    var $inputs = $("#new_tide input:not([type=hidden]), #new_tide textarea");

    $inputs.on("input change", function () {
        valid = true;
        $inputs.each(function () {
            valid *= this.type == "radio" ? this.checked : this.value != "";
            return valid;
        });    
        $("#subnewtide").prop("disabled", !valid);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description"></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    Hidden: <input type="hidden">
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

edited Aug 03 '15 at 22:14

answered Aug 03 '15 at 21:50

Johan Karlsson

6,419
1
19
28

2

For clarification, will this work if I have – Henrik Petterson Aug 03 '15 at 22:01
1

I believe the solution would be to add input[type='text'] instead – Henrik Petterson Aug 03 '15 at 22:11
So far, everything seems to work on my test environment besides the radio button part of the code. The submit button is enabled before the radio button is ticked. Do you know why? – Henrik Petterson Aug 03 '15 at 22:13
Oddly enough, this seems to be the only code that works on my site. Although the submit button is enabled **before** the radio button is clicks. Do you know why? – Henrik Petterson Aug 07 '15 at 16:29

score 5 · Answer 4 · answered Aug 07 '15 at 02:59

Try utilizing .siblings() , .map() to compile values of form elements , Array.prototype.every() to return Boolean representation of input , textarea values , set disabled property of form input[type=submit] element

$("form *[required]").on("input change", function(e) {
  $(this).siblings("[type=submit]").prop("disabled"
  , !$(this).siblings(":not([type=submit])").add(this).map(function(_, el) {
    return el.type === "radio" ? el.checked : el.value
   }).get().every(Boolean)
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description" required></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

adeneo · Answer 5 · 2015-08-11T19:45:06.217

By far the easiest, would be to rely on the HTML5 validation you're already using.

You'd have to add required to all form controls if you want to require all of them, and that can easily be done by using jQuery's :input selector and setting the property, like so

$(':input:not(#subnewtide)').prop('required', true)

We'll exclude the submit button, as that doesn't have to be required, obviously, not that it would matter in this case.

Then we'll listen for the input event, which covers all sorts of inputs, like typing, pasting etc, and the change event as well to cover the radio button.

Using form.checkValidity() tells us if the form is valid, and returns a boolean, so we could use it directly to set the disabled property of the submit button.

All together it looks like this, and that's all you need, a few lines of really simple code

$(':input:not(#subnewtide)').prop('required', true).on('input change', function() {
    $('#subnewtide').prop( 'disabled', !this.form.checkValidity() );
});

FIDDLE

If you have to support old browsers that don't have HTML5 validation, you can use the H5F polyfill

Maytham Fahmi · Answer 6 · 2015-08-19T22:24:27.367

My solution is base on standard JavaScript.

HTML form

<form action="#" method="post" id="new_tide" name="form1">
    Title: <input onkeyup="myBtnActivator(1)" id="titlenewtide" name="title" type="text" required> <br>
    Description: <textarea onkeyup="myBtnActivator(2)" id="description" name="description"></textarea> <br>
    Tag: <input id="newtag" onkeyup="myBtnActivator(3)" name="newtag" type="text" required> <br>
    Category: <input name="category" onchange="myBtnActivator(4)" type="radio" value="19" required> Animation
    <button id="subnewtide" name="subnewtide" type="submit" value="Submit">Submit</button>
</form>

JavaScript

<script>
    document.getElementById("subnewtide").disabled = true;
    var input1 = false;
    var input2 = false;
    var input3 = false;
    var input4 = false;

    function myBtnActivator(i) {
        switch (i) {
            case 1:
                input1 = true;
                if (document.form1.title.value == "")
                    input1 = false;
                break;
            case 2:
                input2 = true;
                if (document.form1.description.value == "")
                    input2 = false;
                break;
            case 3:
                input3 = true;
                if (document.form1.newtag.value == "")
                    input3 = false;
                break;
            case 4:
                input4 = true;
                if (document.form1.subnewtide.value == "")
                    input4 = false;
                break;
        }
        trigger();
    }

    function trigger() {
        if (input1 == true && input2 == true && input3 == true && input4 == true) {
            document.getElementById("subnewtide").disabled = false;
        } else {
            document.getElementById("subnewtide").disabled = true;
        }
    }
</script>

score 1 · Answer 7 · answered Aug 04 '15 at 05:51

Why don't you use jquery validate . It's a good plugin .

The logic works like, any change in the form it will check the form is valid or not. And also using the errorplacement function it will disable the default error message also.

$().ready(function() {
    // validate signup form on keyup and submit
    $("#contactForm").validate({
        rules: {
            title: "required",
            description: {
                required: true
            },
            newtag: {
                required: true
            },
            category: {
                required: true
            }
        },
        errorPlacement: function(error, element) {
            return true;
        },
        submitHandler: function() {


        }
    });


    $('#contactForm').change(function() {
        if ($("#contactForm").valid()) {
            $("#subnewtide").removeAttr("disabled");
        }
    });

});

Fiddle

G_hi3 · Answer 8 · 2015-08-07T08:51:36.337

There's actually a pretty easy approach. I'm using native JavaScript, but I think it is applicable in jQuery as well:

var form = document.getElementById("new_tide");
form.onchange = function onChange() {
    var enable = true;
    var inputs = form.getElementsByTagName("input");
    var textareas = form.getElementsByTagName("textarea");

    for (var i in inputs) {
        enable = enable && inputs[i].value != "";
    }

    for (var i in textareas) {
        enable = enable && textareas[i].value != "";
    }

    enable = enable && textarea.value != "";
    document.getElementById("subnewtide").disabled = !enable;
}

The change event on form is always called, when any input or textarea element was changed (click in element, type, click somewhere else or lose focus).

Edit:
Regarding hidden fields, you can exclude them by surrounding the enable calculation with an if-condition:

if (!inputs[i].hidden) {
    enable = enable && inputs[i].value != "";
}

Note:
This will work in any browser (even Internet Explorer 5.5). Check on MDN:

for ..in Loop
element.getElementsByTagName()
document.getElementById()

Thank you for the asnwer, although it doesn't seem to work. See this fiddle: https://jsfiddle.net/ujuL5waw/ — Henrik Petterson, Aug 07 '15 at 15:07

score 1 · Answer 9 · answered Aug 09 '15 at 00:23

Thought I might chip in. Assuming as little as possible.

jQuery("input, textarea").on("keyup click", function () { // going vanilla after easy-mode attach
    var sub = document.getElementById('subnewtide');
    if (require_all(find_form(this))) {
        sub.removeAttribute('disabled');
        sub.disabled = false;
    } else {
        sub.setAttribute('disabled', 'disabled');
        sub.disabled = true;
    }
});

function concat(a, b) { // concating Array-likes produces Array
    var slice = [].slice; // not assuming Array.prototype access
    return [].concat.call(
        slice.call(a, 0),
        slice.call(b, 0)
    );
}

function find_form(e) { // shim input.form
    if (e) do {
        if (e.tagName === 'FORM') return e;
    } while (e = e.parentNode);
    return null;
}

function require_all(form, dontIgnoreHidden) { // looks at textareas & inputs (excluding buttons)
    var inp = concat(form.getElementsByTagName('input'), form.getElementsByTagName('textarea')),
        rad = {}, // not assuming Object.create
        i, j,
        has = {}.hasOwnProperty; // not assuming Object.prototype access
    for (i = 0; i < inp.length; ++i) {
        switch ((inp[i].type || '').toLowerCase()) {
            default: // treat unknown like texts
            case 'text':
                if (!inp[i].value) return false; break;
            case 'checkbox':
                if (!inp[i].checked) return false; break;
            case 'radio':
                j = inp[i].getAttribute('name');
                if (!rad[j]) rad[j] = inp[i].checked;
                break;
            case 'hidden':
                if (dontIgnoreHidden && !inp[i].value) return false; break;
            case 'button':
            case 'submit':
                break;
        }
    }
    for (j in rad) if (!has || has.call(rad, j)) // not assuming hasOwnProperty
        if (!rad[j]) return false;
    return true;
}

score 1 · Answer 10 · answered Aug 10 '15 at 14:44

Here is a quick way to accomplish that. It involves attaching a change event listener to :radio and :checkbox elements and an input event listener to other elements. These can both use a common predefined handler that will count the number of unfilled element each time each of these events fires on the appropriate element.

function checkForm() {
    //define and initialize variables
    var unfilled = 0,
        form = $(this.form);

    //disable submit button if enabled
    $(':submit', form).prop('disabled', true);

    //count number of unfilled elements
    $(':input', form).each(function() {
        if( $(this).is(':radio,:checkbox') ) {
            $('input[name=' + this.name + ']:checked').length || unfilled++;
        } else {
            $('[name=' + this.name + ']').val() || unfilled++;
        }
    });
  
    //enable submit button if no unfilled element is found
    unfilled || $(':submit', form).prop('disabled', false);
}

//set up event listeners to fire above handler
$(':text,textarea,select').on('input', checkForm);
$(':radio,:checkbox').on('change', checkForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="#" method="post" id="new_tide">
    Title: <input id="titlenewtide" type="text" name="title" required> <br>
    Description: <textarea name="description" id="description"></textarea> <br>
    Tag:  <input id="newtag" type="text" name="newtag" required> <br>
    Category: <input type="radio" name="category" value="19" required> Animation
    <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> 
</form>

score 1 · Answer 11 · answered Jan 13 '17 at 13:49

    var inputs = $("form#myForm input, form#myForm textarea");

    var validateInputs = function validateInputs(inputs) {
      var validForm = true;
      inputs.each(function(index) {
        var input = $(this);
        if (!input.val() || (input.type === "radio" && !input.is(':checked'))) {
          $("#subnewtide").attr("disabled", "disabled");
          validForm = false;
        }
      });
      return validForm;
    }


    inputs.each(function() {
      var input = $(this);
      if (input.type === "radio") {
        input.change(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      } else {
        input.keyup(function() {
          if (validateInputs(inputs)) {
            $("#subnewtide").removeAttr("disabled");
          }
        });
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" id="myForm">

  Title:
  <input id="titlenewtide" type="text" name="title" required>
  <br>Description:
  <textarea name="description" id="description"></textarea>
  <br>Tag:
  <input id="newtag" type="text" name="newtag" required>
  <br>Category:
  <input type="radio" name="category" value="19" required>Animation
  <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>

Do you mind explaining your code instead of code dumping? – DᴀʀᴛʜVᴀᴅᴇʀ Jan 13 '17 at 14:10 — DᴀʀᴛʜVᴀᴅᴇʀ, Jan 13 '17 at 14:10

score 0 · Answer 12 · answered Aug 07 '15 at 05:19

Use this html<br>
HTML:
<br>
<pre>
<form action="#" method="post" id="">
        Title: ##<input id="titlenewtide" type="text" name="title" required> 
        Description: <textarea name="description" id="description"></textarea>
        Tag:  <input id="newtag" type="text" name="newtag" required> 
        Category: <input type="checkbox" onclick="validate()" name="category" id="cate"value="19" required > Animation
        <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button>

</form>
</pre>
validation code:<br>
//on each key up function intiate the function validate
<pre>
    jQuery("input[type='text']").on("keyup", function () {
        validate();
    });
    jQuery("#description").on("keyup", function () {
        validate();
    });

    function validate(){
     jQuery("input[type='text']").each(function(){

        if (jQuery(this).val() != "" )
        {
            if((jQuery("#description").val() !="") && (jQuery("#cate").is(':checked')))
            {

                jQuery("#subnewtide").removeAttr("disabled"); 
            }
            else {
                jQuery("#subnewtide").attr("disabled", "disabled");
            }
        } 
    });
    }
    </pre>
    you can find the fiddle in : https://jsfiddle.net/s8uv2gkp/

score 0 · Answer 13 · answered Jun 07 '22 at 01:23

Maytham Fahmi's relatively easy solution can be made even easier by passing this.name.

<form action="#" method="post" id="new_tide" name="form1">
    <input onkeyup="myBtnActivator(this.name)" name="title" type="text" required> <br>
    <textarea onkeyup="myBtnActivator(this.name)" name="description"></textarea> <br>
    <input id="newtag" onkeyup="myBtnActivator(this.name)" name="newtag" type="text" required> <br>
    <input name="category" onchange="myBtnActivator(this.name)" type="radio" value="19" required> Animation
    <button id="subnewtide" name="subnewtide" type="submit" value="Submit">Submit</button>
</form>

this refers to the DOM object that called the function. So the switch can just directly take the name, or the value, or anything else you can pass with DOM.

myBtnActivator(n)
{
    switch(n)
    {
        case "title":
            break;
        case "description":
            break;
        case "newtag":
            break;
        case "category":
            break;
    }
}

Force user to fill all fields before enabling form submit

13 Answers13

EDIT:

Linked