How to Prevent Submitting the HTML Form's Input Field Value If It Empty

How to prevent submitting the HTML form's input field value if it empty

This can only be done through JavaScript, as far as I know, so if you rely on this functionality you need to restructure. The idea, anyway, is to remove the name attribute from inputs you don’t want included:

jQuery:

$('#my-form-id').submit(function () {
    $(this)
        .find('input[name]')
        .filter(function () {
            return !this.value;
        })
        .prop('name', '');
});

No jQuery:

var myForm = document.getElementById('my-form-id');

myForm.addEventListener('submit', function () {
    var allInputs = myForm.getElementsByTagName('input');

    for (var i = 0; i < allInputs.length; i++) {
        var input = allInputs[i];

        if (input.name && !input.value) {
            input.name = '';
        }
    }
});

You might also want to reset the form afterwards, if you use a listener and cancel.

Prevent form from submitting if form is empty

Why not just use the required attribute? No JS necessary

<input id="email" type="email" required>

This will check if the email field is not empty and additionally entered string is a valid email format.

Note that HTML "required" does not work in safari browser whose version less than Safari 10.1 (May 2017)

Edit:
To display a custom message, subscribe to the invalid event

const email = document.getElementById('email');
email.addEventListener('invalid', function(e){
   if (email.value == '')
     email.setCustomValidity('Where is the email?'); 
   else if (email.validity.typeMismatch)
     email.setCustomValidity('Email address be invalid!'); 
});

You can learn more about Form Validation at Mozilla

Prevent submitting if input field is empty

Add this attribute to the correct input field: <input required: required;> that should fix it for you :-)

see http://w3c.github.io/html/sec-forms.html#the-required-attribute for more information

How to not pass empty input fields in HTML form

One way is to set all empty fields to disabled before submit, e.g.

function disableEmptyInputs(form) {
  var controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    controls[i].disabled = controls[i].value == '';
  }
}

And run it on the form's submit listener:

<form onsubmit="disableEmptyInputs(this)" ...>

So any input that has a value of "" (empty string) will have its disabled property set to true and it won't be submitted.

Or to add the listener dynamically:

window.onload = function() {
  document.getElementById('formID').addEventListener('submit', function() {
    Array.prototype.forEach.call(this.elements, function(el) {
      el.disabled = el.value == '';
    });
  }, false);
};

Disable submit button if input field is blank or user enter empty spaces

trim() your strings

You can call trim() on a string to remove empty space before and after.

See snippet with the modified code:

$("#edit-title-input").on("keyup", stateHandle);

function stateHandle(e) {
  console.log('input value vs. input value.trim()', '"' + e.target.value + '"', '"' + e.target.value.trim() + '"');
  if ($("#title").text() == e.target.value || e.target.value.trim().length == 0) {
    $('#edit-submit').prop('disabled', true);
  } else {
    $('#edit-submit').prop('disabled', false);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="edit-title-input"><br>
<button id="edit-submit">Submit</button>

How can I prevent submit if selected options are empty?

Proposed solution

The most convenient way is to use HTML form validations handled by a browser (required)
as mentioned by epascarello

Unfortunately, your selects has the first option as the default. You can just add a placeholder option with no value. That will prevent submitting the form without selecting.

If you don't want to display it you can hide this option for the user. Second select in the example.

Third input added to answer your question in the comment. No value means it will be content of <option> tag be the default. It would only work if you have no text in this option.

<form id="my_form">    <select required name="form1" form="my_form">        <option value>Placeholder</option>        <option value="Option 1">Option 1</option>        <option value="Option 2">Option 2</option>    </select>
    <select required name="form2" form="my_form">        <option hidden disabled selected value>Choose an option</option>        <option value="Option 1">Option 1</option>        <option value="Option 2">Option 2</option>    </select>
    <select required name="form3" form="my_form">        <option>I'm the value if none set</option>        <option value="Option 1">Option 1</option>        <option value="Option 2">Option 2</option>    </select>

    <input type="submit" value="Send"></form>

---

Related Topics